Browse Source

Swipe gesture for weather forecast screen

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

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

1
src/package.json

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

Loading…
Cancel
Save