diff --git a/src/app/api/weather_forecast.js b/src/app/api/weather_forecast.js index a332448..0e600e2 100644 --- a/src/app/api/weather_forecast.js +++ b/src/app/api/weather_forecast.js @@ -28,7 +28,7 @@ function getWeatherForecast() { rain_fall_mm: 0, }, { - week_day: "Terça", + week_day: " Terça ", date: "20/03", weather_index: 2, rain_fall_mm: 5, diff --git a/src/app/screens/ForecastScreen.js b/src/app/screens/ForecastScreen.js index ceba187..fbaef73 100644 --- a/src/app/screens/ForecastScreen.js +++ b/src/app/screens/ForecastScreen.js @@ -1,11 +1,13 @@ import React, { useState, useContext } from "react"; import Screen from "../components/Screen"; import { StyleSheet, View, Text, TouchableNativeFeedback } from "react-native"; -import { dimensions } from "../config/dimensions"; +import { dimensions, screen_width } from "../config/dimensions"; import colors from "../config/colors"; import { EventLocationContext } from "../context/EventLocationContext"; import getWeatherForecast from "../api/weather_forecast"; import assets from "../config/assets"; +import { ScrollView } from "react-native-gesture-handler"; +import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view"; function forecastDay(day, setDay) { return ( @@ -105,8 +107,55 @@ function renderTodayForecast(forecast) { ); } +// FIXME: The border line must be in full wcreen width. +function border() { + return ( + + ); +} + +function weekDayList(day_forecast) { + const SvgImage = assets.weather_icons[day_forecast.weather_index]; + + return ( + + {border()} + + + {day_forecast.week_day} + ({day_forecast.date}) + + + {day_forecast.rain_fall_mm} mm + + + ); +} + function renderWeekForecast(forecast) { - return semana; + var i = 0; + return ( + + {forecast.next_forecast.map(weekDayList)} + {border()} + + ); } function currentLocationAndDate(forecast, day) { @@ -146,10 +195,20 @@ function renderScreen(forecast) { return ( - {forecastDay(day, setDay)} - {currentLocationAndDate(forecast, day)} + + {forecastDay(day, setDay)} + {currentLocationAndDate(forecast, day)} + - {day == 0 ? renderTodayForecast(forecast) : renderWeekForecast(forecast)} + + {day == 0 + ? renderTodayForecast(forecast) + : renderWeekForecast(forecast)} + ); } @@ -173,9 +232,7 @@ function ForecastScreen(props) { const forecast = getWeatherForecast(); return ( - - {forecast ? renderScreen(forecast) : renderErrorScreen()} - + {forecast ? renderScreen(forecast) : renderErrorScreen()} ); }