Browse Source

Swipe gesture for weather forecast screen

master
GabrielTrettel 3 years ago
parent
commit
6ed7ee5ff6
  1. 28
      src/app/screens/ForecastScreen.js
  2. 1
      src/package.json

28
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",
},

1
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",

Loading…
Cancel
Save