Browse Source

Implementing next days weather forecast

master
GabrielTrettel 4 years ago
parent
commit
423bbf56bf
  1. 2
      src/app/api/weather_forecast.js
  2. 69
      src/app/screens/ForecastScreen.js

2
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,

69
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>
<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>
);
}

Loading…
Cancel
Save