Swipe gesture for weather forecast screen

src/app/screens/ForecastScreen.js

@@ -1,4 +1,4 @@
-import React, { useState, useContext } from "react";
+import React, { useState, useContext, useEffect } from "react";
 import Screen from "../components/Screen";
 import { StyleSheet, View, Text, TouchableNativeFeedback } from "react-native";
 import { dimensions, screen_width } from "../config/dimensions";
@@ -6,6 +6,7 @@ import colors from "../config/colors";
 import getWeatherForecast from "../api/weather_forecast";
 import assets from "../config/assets";
 import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
+import Swipeable from "react-native-gesture-handler/Swipeable";
 
 function forecastDay(day, setDay) {
   return (
@@ -83,7 +84,7 @@ function renderTodayForecast(forecast) {
       {WeatherInput(forecast.today_forecast.morning_weather_index, "Manhã")}
       <Text
         style={{
-          paddingTop: 26,
+          paddingTop: 30,
           fontWeight: "bold",
           fontSize: dimensions.text.default,
         }}
@@ -92,7 +93,7 @@ function renderTodayForecast(forecast) {
       </Text>
       <View
         style={{
-          paddingVertical: 44,
+          paddingVertical: 60,
           flexDirection: "row",
           justifyContent: "space-between",
           alignItems: "flex-start",
@@ -204,6 +205,13 @@ function currentLocationAndDate(forecast, day) {
 
 function renderScreen(forecast) {
   const [day, setDay] = useState(0);
+  const [swipePosition, setSwipePosition] = useState(null);
+
+  useEffect(() => {
+    if (swipePosition ) {
+      day == 0 ? swipePosition.openLeft() : swipePosition.openRight();
+    } 
+  }, [day]);
 
   return (
     <View>
@@ -212,15 +220,20 @@ function renderScreen(forecast) {
         {currentLocationAndDate(forecast, day)}
       </View>
 
+      <Swipeable
+        ref={(ref) => setSwipePosition(ref)}
+        renderRightActions={() => renderWeekForecast(forecast)}
+        onSwipeableOpen={() => {setDay(1)}}
+        onSwipeableClose={() => {setDay(0)}}
+      >
         <KeyboardAwareScrollView
           resetScrollToCoords={{ x: 0, y: 0 }}
           scrollEnabled={true}
-        height="80%"
+          height={"100%"}
         >
-        {day == 0
-          ? renderTodayForecast(forecast)
-          : renderWeekForecast(forecast)}
+          {renderTodayForecast(forecast)}
         </KeyboardAwareScrollView>
+      </Swipeable>
     </View>
   );
 }
@@ -253,6 +266,7 @@ const styles = StyleSheet.create({
     padding: dimensions.spacing.normal_padding,
   },
   centered: {
+    backgroundColor: "white",
     flexDirection: "column",
     alignItems: "center",
   },

src/package.json

@@ -21,6 +21,7 @@
     "@react-navigation/bottom-tabs": "^5.11.2",
     "@react-navigation/native": "^5.8.10",
     "@react-navigation/stack": "^5.12.8",
+    "apisauce": "^2.1.1",
     "expo": "^39.0.5",
     "expo-asset": "~8.2.0",
     "expo-file-system": "~9.2.0",