changing imports with react-native-gesture-handler to react-native

src/App.js

@@ -3,7 +3,7 @@ import { NavigationContainer } from "@react-navigation/native";
 
 import navigationTheme from "./app/navigation/navigationTheme";
 import "./app/config/globals.js";
-import AppLoading from "expo-app-loading";
+import * as SplashScreen from 'expo-splash-screen';
 import FlashMessage, {
   showMessage,
   hideMessage,
@@ -26,6 +26,9 @@ import { connect } from "formik";
 import colors from "./app/config/colors";
 import { dimensions } from "./app/config/dimensions";
 
+
+SplashScreen.preventAutoHideAsync();
+
 export default function App() {
   const [user, setUser] = useState();
   const [pluviometerStation, setPluviometerStation] = useState(undefined);
@@ -50,37 +53,40 @@ export default function App() {
     });
   }
 
-  useEffect(async () => {
-    if (netInfo.isInternetReachable) {
-      const cachedForms = await cache.get("sendforms");
-      if (!isReconnected) {
-        notImplemented(
-          colors.greenWarning,
-          "Conexão à internet restabelecida",
-          3000,
-          true
-        );
-        setIsReconnected(true);
-      }
-
-      if (cachedForms) {
-        const arrayForms = JSON.parse(cachedForms);
-        arrayForms.forEach(async (element) => {
-          const isSent = await sendFormAnswer(
-            element,
-            netInfo.isInternetReachable,
-            null
+  useEffect(() => {
+      async function getNetInfo() {
+      if (netInfo.isInternetReachable) {
+        const cachedForms = await cache.get("sendforms");
+        if (!isReconnected) {
+          notImplemented(
+            colors.greenWarning,
+            "Conexão à internet restabelecida",
+            3000,
+            true
           );
+          setIsReconnected(true);
+        }
 
-          if (isSent.ok) {
-            cache.clear("sendforms");
-          }
-        });
-      }
-    } else {
-      notImplemented(colors.blueWarning, "Sem conexão à internet", null, false);
-      setIsReconnected(false);
+        if (cachedForms) {
+          const arrayForms = JSON.parse(cachedForms);
+          arrayForms.forEach(async (element) => {
+            const isSent = await sendFormAnswer(
+              element,
+              netInfo.isInternetReachable,
+              null
+            );
+
+            if (isSent.ok) {
+              cache.clear("sendforms");
+            }
+          });
+        }
+      } else {
+        notImplemented(colors.blueWarning, "Sem conexão à internet", null, false);
+        setIsReconnected(false);
+      } 
     }
+    getNetInfo()
   }, [netInfo.isInternetReachable]);
 
   useEffect(() => {
@@ -100,45 +106,39 @@ export default function App() {
     }
   }, [pluviometerStation]);
 
-  const restoreUser = async () => {
-    const storageUser = await authStorage.getUser();
-    if (storageUser) setUser(storageUser);
-
-    global.location = await getLocation();
-  };
-
-  if (!isReady) {
-    return (
-      <AppLoading
-        startAsync={restoreUser}
-        onFinish={() => setIsReady(true)}
-        onError={(e) => console.log(e)}
-      />
+  useEffect(()=>{
+    const restoreUser = async () => {
+      const storageUser = await authStorage.getUser();
+      if (storageUser) setUser(storageUser);
+  
+      global.location = await getLocation();
+      SplashScreen.hideAsync();
+    }; 
+    restoreUser()
+  })
+  
+  if (global.formsSockets === undefined)
+    global.formsSockets = useFiltering(
+      global.location || global.defaultLocation
     );
-  } else {
-    if (global.formsSockets === undefined)
-      global.formsSockets = useFiltering(
-        global.location || global.defaultLocation
-      );
 
-    return (
-      <AuthContext.Provider
-        value={{
-          user,
-          setUser,
-        }}
-      >
-        <CurrentLocationProvider>
-          <EventLocationProvider>
-            <MapDataProvider>
-              <NavigationContainer theme={navigationTheme}>
-                {user ? <AppNavigator /> : <AuthNavigator />}
-                <FlashMessage position="top" />
-              </NavigationContainer>
-            </MapDataProvider>
-          </EventLocationProvider>
-        </CurrentLocationProvider>
-      </AuthContext.Provider>
-    );
-  }
+  return (
+    <AuthContext.Provider
+      value={{
+        user,
+        setUser,
+      }}
+    >
+      <CurrentLocationProvider>
+        <EventLocationProvider>
+          <MapDataProvider>
+            <NavigationContainer theme={navigationTheme}>
+              {user ? <AppNavigator /> : <AuthNavigator />}
+              <FlashMessage position="top" />
+            </NavigationContainer>
+          </MapDataProvider>
+        </EventLocationProvider>
+      </CurrentLocationProvider>
+    </AuthContext.Provider>
+  );
 }

src/app.json

@@ -50,6 +50,11 @@
         "wasm",
         "svg"
       ]
+    },
+    "extra": {
+      "eas": {
+        "projectId": "5402ab13-6a3c-4cd0-89bd-770e3a6c25c3"
+      }
     }
   }
 }

src/app/components/FloatButton.js

@@ -9,7 +9,7 @@ import {
   Dimensions,
   PixelRatio,
 } from "react-native";
-import { FlatList } from "react-native-gesture-handler";
+import { FlatList } from "react-native";
 
 import colors from "../config/colors";
 import { MaterialCommunityIcons } from "@expo/vector-icons";

src/app/components/PickEventDateLocation.js

@@ -2,7 +2,7 @@ import React from "react";
 import { View } from "react-native";
 
 import colors from "../config/colors";
-import { TouchableOpacity } from "react-native-gesture-handler";
+import { TouchableOpacity } from "react-native";
 import FormDatePicker from "../components/forms/FormDatePicker";
 import FormLocationPicker from "../components/forms/FormLocationPicker";
 

src/app/components/forms/CheckBox.js

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import { View, Text } from "react-native";
 import { useFormikContext } from "formik";
 import colors from "../../config/colors";
-import { TouchableOpacity } from "react-native-gesture-handler";
+import { TouchableOpacity } from "react-native";
 import ErrorMessage from "./ErrorMessage";
 import { dimensions } from "../../config/dimensions";
 import CustomCheckBox from "../CustomCheckBox";

src/app/components/forms/FormField.js

@@ -4,7 +4,7 @@ import { useFormikContext } from "formik";
 import TextInput from "../TextInput";
 import ErrorMessage from "./ErrorMessage";
 import { View, Text } from "react-native";
-import { TouchableOpacity } from "react-native-gesture-handler";
+import { TouchableOpacity } from "react-native";
 import colors from "../../config/colors";
 import defaultStyles from "../../config/styles";
 

src/app/components/map/OpenStreetMap.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { View, Linking } from "react-native";
 import WebView from "react-native-webview";
 import {
@@ -46,7 +46,7 @@ export default function OpenStreetMap({
   setDataOptionsToShow,
   isForm = false,
 }) {
-  const [mapRef, setMapRef] = useState(null);
+  const mapRef = useRef(null)
   const webviewContent = html_content;
   const [markerListener, setMarkerListener] = useState(null);
 
@@ -59,15 +59,15 @@ export default function OpenStreetMap({
   });
 
   useEffect(() => {
-    if (markersList && mapRef) {
-      deleteAllMarkers(mapRef);
+    if (markersList && mapRef.current) {
+      deleteAllMarkers(mapRef.current);
 
       notEmpy(markersList) &&
         markersList.forEach((val) => {
           if (val.name == "susceptibilityAreas") {
-            insertPolygon(mapRef, val.ID, val.coordinate);
+            insertPolygon(mapRef.current, val.ID, val.coordinate);
           } else {
-            insertMarker(mapRef, val.ID, val.coordinate, val.image);
+            insertMarker(mapRef.current, val.ID, val.coordinate, val.image);
           }
         });
     }
@@ -77,9 +77,7 @@ export default function OpenStreetMap({
     <View flex={1}>
       {webviewContent && (
         <WebView
-          ref={(webViewRef) => {
-            setMapRef(webViewRef);
-          }}
+          ref={mapRef}
           onMessage={(event) => {
             bindEventsToListeners(
               handleEvent(event),

src/app/navigation/AccountNavigator.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { createStackNavigator } from "@react-navigation/stack";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import AccountScreen from "../screens/AccountScreen";
 import PluviometerRegisterScreen from "../screens/PluviometerRegisterScreen";
 import MapFormScreen from "../screens/MapFormScreen";
@@ -12,7 +12,7 @@ import ActivateInstitutionShowCode from "../screens/ActivateInstitutionShowCode"
 import PasswordRecovery from "../screens/PasswordRecoveryScreen";
 import PasswordRecoveryChangePswd from "../screens/PasswordRecoveryChangePswdScreen";
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 const AccountNavigator = () => (
   <Stack.Navigator initialRouteName="Profile">

src/app/navigation/AppNavigator.js

@@ -9,12 +9,12 @@ import ForecastNavigator from "./ForecastNavigator";
 import NewListingButton from "./NewListingButton";
 import SharingDataOptionsNavigator from "./SharingDataOptionsNavigator";
 import { NavigationContainer } from "@react-navigation/native";
-import { createStackNavigator } from "@react-navigation/stack";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import Abbout from "../screens/Abbout";
 import colors from "../config/colors";
 
 const Tab = createBottomTabNavigator();
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 function TabScreens() {
   return (

src/app/navigation/AuthNavigator.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { createStackNavigator } from "@react-navigation/stack";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import LoginScreen from "../screens/LoginScreen";
 import RegisterScreen from "../screens/RegisterScreen";
 import PasswordRecovery from "../screens/PasswordRecoveryScreen"
@@ -7,7 +7,7 @@ import colors from "../config/colors";
 import UserAgreement from "../screens/UserAgreement";
 import PasswordRecoveryChangePswd from "../screens/PasswordRecoveryChangePswdScreen";
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 const AuthNavigator = () => (
   <Stack.Navigator>

src/app/navigation/DataNavigator.js

@@ -1,8 +1,8 @@
 import React from "react";
-import { createStackNavigator } from "@react-navigation/stack";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import DataScreen from "../screens/DataScreen";
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 const DataNavigator = () => (
   <Stack.Navigator>

src/app/navigation/FeedNavigator.js

@@ -1,8 +1,8 @@
 import React from "react";
-import { createStackNavigator } from "@react-navigation/stack";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import MapFeedScreen from "../screens/MapFeedScreen";
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 const FeedNavigator = () => (
   <Stack.Navigator>

src/app/navigation/ForecastNavigator.js

@@ -1,8 +1,8 @@
 import React from "react";
-import { createStackNavigator } from "@react-navigation/stack";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import ForecastScreen from "../screens/ForecastScreen";
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 const ForecastNavigator = () => (
   <Stack.Navigator>

src/app/navigation/MessagesNavigator.js

@@ -1,8 +1,8 @@
 import React from "react";
-import { createStackNavigator } from "@react-navigation/stack";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import MessagesScreen from "../screens/MessagesScreen";
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 const MessagesNavigator = () => (
   <Stack.Navigator>

src/app/navigation/SharingDataNavigator.js

@@ -1,8 +1,8 @@
 import React from "react";
-import { createStackNavigator } from "@react-navigation/stack";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import SharingDataScreen from "../screens/SharingDataScreen";
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 const SharingDataNavigator = () => (
 <Stack.Navigator>

src/app/navigation/SharingDataOptionsNavigator.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { createStackNavigator } from "@react-navigation/stack";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import RainSharingDataScreen from '../screens/RainSharingDataScreen';
 import RiverFloodSharingDataScreen from '../screens/RiverFloodSharingDataScreen';
 import SharingFloodZonesScreen from '../screens/SharingFloodZonesScreen';
@@ -7,7 +7,7 @@ import PluviometerSharingDataScreen from '../screens/PluviometerSharingDataScree
 import SharingDataNavigator from './SharingDataNavigator';
 import MapFormScreen from '../screens/MapFormScreen';
 
-const Stack = createStackNavigator();
+const Stack = createNativeStackNavigator();
 
 function SharingDataOptionsNavigator() {
     return (

src/app/screens/AccountScreen.js

@@ -3,7 +3,7 @@ import { Text, View, StyleSheet, ScrollView } from "react-native";
 import Screen from "../components/Screen";
 import { AuthContext } from "../auth/context";
 import authStorage from "../auth/storage";
-import { TouchableOpacity } from "react-native-gesture-handler";
+import { TouchableOpacity } from "react-native";
 import assets from "../config/assets";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 import colors from "../config/colors";

src/app/screens/LoginScreen.js

@@ -15,7 +15,7 @@ import { AuthContext } from "../auth/context";
 import authStorage from "../auth/storage";
 import assets from "../config/assets";
 import Button from "../components/Button";
-import { TouchableNativeFeedback } from "react-native-gesture-handler";
+import { TouchableNativeFeedback } from "react-native";
 import { login, userPersonalData } from "../api/auth";
 import PasswordFormField from "../components/forms/PasswordFormField";
 import ConfirmationModal from "../components/ConfirmationModal";

src/app/screens/MapFormScreen.js

@@ -1,11 +1,11 @@
-import React, { useContext, useState, useEffect, memo } from "react";
+import React, { useContext, useState } from "react";
 import { StyleSheet, View, Text, Image } from "react-native";
 import * as Location from "expo-location";
 
 import colors from "../config/colors";
 
 import { EventLocationContext } from "../context/EventLocationContext";
-import { TouchableOpacity } from "react-native-gesture-handler";
+import { TouchableOpacity } from "react-native";
 import OpenStreetMap from "../components/map/OpenStreetMap";
 
 // NOTE: Implementação posterior: É interessante adcionar um searchBox para que o usuário busque um endereço (google places autocomplete é uma api paga)

src/app/screens/PluviometerRegisterScreen.js

@@ -6,7 +6,7 @@ import { dimensions } from "../config/dimensions";
 import FormDatePicker from "../components/forms/FormDatePicker";
 import colors from "../config/colors/";
 import moment from "moment";
-import { TouchableOpacity } from "react-native-gesture-handler";
+import { TouchableOpacity } from "react-native";
 import { FontAwesome5 } from "@expo/vector-icons";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { AuthContext } from "../auth/context";

src/eas.json

@@ -10,6 +10,11 @@
     "preview": {
       "distribution": "internal"
     },
+    "emulator": {
+      "android": {
+        "buildType": "apk"
+      }
+    },
     "production": {}
   },
   "submit": {

src/metro.config.js

@@ -1,12 +1,13 @@
-const { getDefaultConfig } = require("metro-config");
+const { getDefaultConfig } = require('expo/metro-config');
 
 module.exports = (async () => {
   const {
     resolver: { sourceExts, assetExts },
-  } = await getDefaultConfig();
+  } = getDefaultConfig(__dirname);
   return {
     transformer: {
       babelTransformerPath: require.resolve("react-native-svg-transformer"),
+      assetPlugins: ['expo-asset/tools/hashAssetFiles'],
     },
     resolver: {
       assetExts: [...assetExts.filter((ext) => ext !== "svg"), "db"],

src/package.json

@@ -15,62 +15,62 @@
     ]
   },
   "dependencies": {
-    "@expo/metro-config": "^0.2.8",
-    "@react-native-async-storage/async-storage": "~1.15.0",
+    "@expo/metro-config": "~0.10.0",
+    "@react-native-async-storage/async-storage": "1.18.2",
     "@react-native-community/checkbox": "^0.5.9",
-    "@react-native-community/datetimepicker": "3.5.2",
+    "@react-native-community/datetimepicker": "7.2.0",
     "@react-native-community/masked-view": "^0.1.11",
-    "@react-native-community/netinfo": "6.0.2",
+    "@react-native-community/netinfo": "9.3.10",
     "@react-navigation/bottom-tabs": "^6.0.9",
     "@react-navigation/native": "^6.0.6",
-    "@react-navigation/stack": "^6.0.11",
+    "@react-navigation/native-stack": "^6.9.16",
     "apisauce": "^2.1.2",
     "babel-core": "^6.26.3",
     "babel-loader": "^8.2.3",
     "eslint": "^8.1.0",
     "eslint-plugin-react": "^7.26.1",
-    "expo": "^43.0.2",
-    "expo-app-loading": "~1.2.1",
-    "expo-asset": "~8.4.3",
-    "expo-file-system": "~13.0.3",
-    "expo-image-picker": "~11.0.3",
-    "expo-location": "~13.0.4",
-    "expo-permissions": "~13.0.3",
-    "expo-secure-store": "~11.0.3",
-    "expo-sqlite": "~10.0.3",
-    "expo-status-bar": "~1.1.0",
+    "expo": "^49.0.0",
+    "expo-app-loading": "^2.1.1",
+    "expo-asset": "~8.10.1",
+    "expo-file-system": "~15.4.4",
+    "expo-image-picker": "~14.3.2",
+    "expo-location": "~16.1.0",
+    "expo-permissions": "~14.2.1",
+    "expo-secure-store": "~12.3.1",
+    "expo-splash-screen": "~0.20.5",
+    "expo-sqlite": "~11.3.3",
+    "expo-status-bar": "~1.6.0",
     "formik": "^2.2.9",
     "jest-expo-enzyme": "^1.2.4",
     "jwt-decode": "^3.1.2",
     "moment": "^2.29.1",
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-google-places-autocomplete": "^3.3.2",
-    "react-native": "0.64.2",
+    "react-native": "0.72.6",
     "react-native-action-button": "^2.8.5",
     "react-native-chart-kit": "^6.11.0",
     "react-native-dropdown-picker": "^5.2.3",
     "react-native-flash-message": "^0.2.0",
-    "react-native-gesture-handler": "~1.10.2",
+    "react-native-gesture-handler": "~1.7.0",
     "react-native-google-places-autocomplete": "^2.4.1",
     "react-native-keyboard-aware-scroll-view": "^0.9.5",
-    "react-native-maps": "0.28.0",
+    "react-native-maps": "1.7.1",
     "react-native-mask-text": "^0.5.0",
     "react-native-multiple-choice": "^0.0.8",
     "react-native-multiple-select-list": "^1.0.4",
     "react-native-places-input": "^1.1.7",
-    "react-native-reanimated": "~2.2.0",
-    "react-native-safe-area-context": "3.3.2",
-    "react-native-screens": "~3.8.0",
+    "react-native-reanimated": "~3.3.0",
+    "react-native-safe-area-context": "4.6.3",
+    "react-native-screens": "~3.22.0",
     "react-native-searchable-dropdown": "^1.1.3",
     "react-native-shadow-2": "^5.1.1",
     "react-native-simple-dialogs": "^1.4.0",
-    "react-native-svg": "12.1.1",
+    "react-native-svg": "13.9.0",
     "react-native-svg-transformer": "^0.14.3",
-    "react-native-svg-uri": "^1.2.3",
     "react-native-walkthrough-tooltip": "^1.3.0",
-    "react-native-web": "0.17.1",
-    "react-native-webview": "11.13.0",
+    "react-native-web": "~0.19.6",
+    "react-native-webview": "13.2.2",
     "react-navigation": "^4.4.4",
     "react-navigation-header-buttons": "^9.0.1",
     "react-navigation-tabs": "^2.11.1",
@@ -84,5 +84,15 @@
     "@babel/core": "^7.12.9",
     "jest-expo": "^43.0.0"
   },
+  "overrides": {
+    "@expo/config-plugins": "~7.2.2",
+    "@expo/prebuild-config": "~6.2.4",
+    "expo-modules-autolinking": "~1.5.0"
+  },
+  "resolutions": {
+    "@expo/config-plugins": "~7.2.2",
+    "@expo/prebuild-config": "~6.2.4",
+    "expo-modules-autolinking": "~1.5.0"
+  },
   "private": true
 }