Starting weather forecast screen

src/app/screens/ForecastScreen.js

@@ -1,13 +1,77 @@
-import React from "react";
+import React, { useState } from "react";
 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) {
+  const [day, setDay] = useState(0);
+
   return (
-    <Screen>
-      <InDevelopment />
+    <Screen style={styles.container}>
+      {forecastDay(day, setDay)}
+      {day == 0 ? renderTodayForecast() : renderWeekForecast()}
     </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;