Implementing next days weather forecast

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,

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 (
+    <View
+      style={{
+        width: screen_width,
+        alignSelf: "center",
+        height: 2,
+        backgroundColor: colors.lightestGray,
+      }}
+    />
+  );
+}
+
+function weekDayList(day_forecast) {
+  const SvgImage = assets.weather_icons[day_forecast.weather_index];
+
+  return (
+    <View key={day_forecast.date}>
+      {border()}
+      <View
+        style={{
+          paddingVertical: 10,
+          paddingHorizontal: 12,
+          flexDirection: "row",
+          flexGrow: 1,
+          alignItems: "center",
+          justifyContent: "space-evenly",
+        }}
+      >
+        <View style={{ alignItems: "center" }}>
+          <Text>{day_forecast.week_day}</Text>
+          <Text>({day_forecast.date})</Text>
+        </View>
+        <SvgImage style={{ marginHorizontal: 52 }} />
+        <Text>{day_forecast.rain_fall_mm} mm</Text>
+      </View>
+    </View>
+  );
+}
+
 function renderWeekForecast(forecast) {
-  return <Text>semana</Text>;
+  var i = 0;
+  return (
+    <View>
+      {forecast.next_forecast.map(weekDayList)}
+      {border()}
+    </View>
+  );
 }
 
 function currentLocationAndDate(forecast, day) {
@@ -146,10 +195,20 @@ function renderScreen(forecast) {
 
   return (
     <View>
-      {forecastDay(day, setDay)}
-      {currentLocationAndDate(forecast, day)}
+      <View style={styles.container}>
+        {forecastDay(day, setDay)}
+        {currentLocationAndDate(forecast, day)}
+      </View>
 
-      {day == 0 ? renderTodayForecast(forecast) : renderWeekForecast(forecast)}
+      <KeyboardAwareScrollView
+        resetScrollToCoords={{ x: 0, y: 0 }}
+        scrollEnabled={true}
+        height="80%"
+      >
+        {day == 0
+          ? renderTodayForecast(forecast)
+          : renderWeekForecast(forecast)}
+      </KeyboardAwareScrollView>
     </View>
   );
 }
@@ -173,9 +232,7 @@ function ForecastScreen(props) {
   const forecast = getWeatherForecast();
 
   return (
-    <Screen style={styles.container}>
-      {forecast ? renderScreen(forecast) : renderErrorScreen()}
-    </Screen>
+    <Screen>{forecast ? renderScreen(forecast) : renderErrorScreen()}</Screen>
   );
 }