Browse Source

Starting weather forecast screen

master
GabrielTrettel 4 years ago
parent
commit
241d7c4e3c
  1. 72
      src/app/screens/ForecastScreen.js

72
src/app/screens/ForecastScreen.js

@ -1,13 +1,77 @@
import React from "react";
import React, { useState } from "react";
import Screen from "../components/Screen"; import Screen from "../components/Screen";
import InDevelopment from "../components/InDevelopment";
import { StyleSheet, View, Text, TouchableNativeFeedback } from "react-native";
import { dimensions } from "../config/dimensions";
import colors from "../config/colors";
function forecastDay(day, setDay) {
return (
<View style={styles.forecastDays}>
<TouchableNativeFeedback onPress={() => setDay(0)}>
<View
style={[
styles.forecastDayBtn,
{ borderBottomColor: day == 0 ? colors.lightBlue : colors.white },
]}
>
<Text style={{ color: day == 0 ? colors.lightBlue : colors.black }}>
HOJE
</Text>
</View>
</TouchableNativeFeedback>
<TouchableNativeFeedback onPress={() => setDay(1)}>
<View
style={[
styles.forecastDayBtn,
{ borderBottomColor: day == 1 ? colors.lightBlue : colors.white },
]}
>
<Text style={{ color: day == 1 ? colors.lightBlue : colors.black }}>
PRÓXIMO
</Text>
</View>
</TouchableNativeFeedback>
</View>
);
}
function renderTodayForecast() {
return <Text>dia</Text>;
}
function renderWeekForecast() {
return <Text>semana</Text>;
}
function ForecastScreen(props) { function ForecastScreen(props) {
const [day, setDay] = useState(0);
return ( return (
<Screen>
<InDevelopment />
<Screen style={styles.container}>
{forecastDay(day, setDay)}
{day == 0 ? renderTodayForecast() : renderWeekForecast()}
</Screen> </Screen>
); );
} }
const styles = StyleSheet.create({
container: {
padding: dimensions.spacing.normal_padding,
},
forecastDays: {
flexDirection: "row",
justifyContent: "space-between",
},
forecastDayBtn: {
borderBottomWidth: 3,
width: "48%",
height: 30,
justifyContent: "center",
alignItems: "center",
},
});
export default ForecastScreen; export default ForecastScreen;
Loading…
Cancel
Save