ERROR: navigation to RainSharingDataScreen is not working!

src/app/navigation/RainSharingDataNavigator.js

@@ -1,20 +1,21 @@
+import { NavigationContainer } from '@react-navigation/native';
 import React, { Component } from 'react';
 import { Platform, StyleSheet, Text, View, YellowBox } from 'react-native';
-import { createStackNavigator } from 'react-navigation';
+
+import { createStackNavigator } from "@react-navigation/stack";
 import RainSharingDataScreen from '../screens/RainSharingDataScreen';
 import SharingDataScreen from '../screens/SharingDataScreen';
 
-const RootStack = createStackNavigator(
-    {
-    Home: { screen: SharingDataScreen },
-    Profile: { screen: RainSharingDataScreen },
-    },
-    {
-    initialRouteName: 'SharingData',
-    }
+const Stack = createStackNavigator();
+
+function RainSharingDataNavigator(){
+    return(
+        <NavigationContainer>
+            <Stack.Navigator initialRouteName = "SharingData">
+                <Stack.Screen name = "SharingData" component={SharingDataScreen}/>
+                <Stack.Screen name = "RainSharingData" component={RainSharingDataScreen}/>
+            </Stack.Navigator>
+        </NavigationContainer>
     );
-    export default class App extends Component {
-    render() {
-    return <RootStack />;
-    }
 }
+export default RainSharingDataNavigator;

src/app/navigation/routes.js

@@ -5,5 +5,6 @@ export default Object.freeze({
     MESSAGES: "Messages",
     REGISTER: "Register",
     SHARING_DATA: "SharingData",
+    RAIN_SHARING_DATA: "RainSharingData"
   });
   

src/app/screens/RainSharingDataScreen.js

@@ -1,5 +1,5 @@
-import React from "react";
-import { StyleSheet, View } from "react-native";
+import React, { useState } from "react";
+import { Button, StyleSheet, View } from "react-native";
 import * as Yup from "yup";
 
 import {
@@ -13,20 +13,30 @@ import Screen from "../components/Screen";
 import FormImagePicker from "../components/forms/FormImagePicker";
 import useLocation from "../hooks/useLocation";
 import { Image, Text, TouchableOpacity } from 'react-native';
+import colors from "../config/colors";
+import { TouchableNativeFeedback } from "react-native-gesture-handler";
 //1/3
 const styles = StyleSheet.create({
   container: {
     paddingTop: 50,
   },
-  rainLogo: {
-    width: 110,
-    height: 100,
-    margin: 30,
+  img_block: {
+    height: 120,
+    padding: 10,
+    borderRadius: 5,
+    borderStyle: "dotted",
+    borderColor: colors.primary,
+    justifyContent: "center",
+    alignItems: "center",
   },
   floodingLogo: {
     width: 85,
     height: 85,
     marginTop: 30,
+    borderRadius: 5,
+    borderColor: colors.primary,
+    justifyContent: "center",
+    alignItems: "center",
 
   },
 })
@@ -38,7 +48,9 @@ const validationSchema = Yup.object().shape({
     .required("Por favor, forneça uma descrição"),
 });
 
-const RainSharingDataScreen = ({ navigation }) => {
+function RainSharingDataScreen() {
+  const [passable, setPassable] = useState(0);
+
   return (
     <Screen style={styles.container}>
       <Form
@@ -49,74 +61,81 @@ const RainSharingDataScreen = ({ navigation }) => {
           category: null,
           images: [],
         }}
-        onSubmit={(values) => console.log("submissao")}
+        onSubmit={(values) => submitForm({ ...values, passable, location })}
         validationSchema={validationSchema}
       >
         <View>
           <Text style={{ fontSize: 25, textAlign: 'center', backgroundColor: 'lightgray' }}>
             Enviar uma informação
           </Text>
-          <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
 
-            <View style={{ alignItems: 'center' }}>
+          <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
+            <TouchableNativeFeedback onPress={() => setPassable(0)}>
+              <View borderWidth={passable == 0 ? 5 : 0} style={{ alignItems: 'center' }}>
                 <Image
                   style={styles.floodingLogo}
                   source={require("../assets/sem_chuva.png")}
                 />
                 <Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Sem chuva</Text>
               </View>
+            </TouchableNativeFeedback>
 
-            <View style={{ alignItems: 'center' }}>
+            <TouchableNativeFeedback onPress={() => setPassable(1)}>
+              <View borderWidth={passable == 1 ? 5 : 0} style={{ alignItems: 'center' }}>
                 <Image
                   style={styles.floodingLogo}
                   source={require("../assets/chuva_peq.png")}
                 />
                 <Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Chuva fraca</Text>
               </View>
+            </TouchableNativeFeedback>
 
-            <TouchableOpacity style={{ alignItems: 'center' }}>
+            <TouchableNativeFeedback onPress={() => setPassable(2)}>
+              <View borderWidth={passable == 2 ? 5 : 0} style={{ alignItems: 'center' }}>
                 <Image
                   style={styles.floodingLogo}
                   source={require("../assets/chuva_peq.png")}
                 />
                 <Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Chuva{"\n"}moderada</Text>
-            </TouchableOpacity>
               </View>
-          <View style={{ flexDirection: 'row' }}>
-
+            </TouchableNativeFeedback>
           </View>
 
           <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
-            <View style={{ alignItems: 'center' }}>
+            <TouchableNativeFeedback onPress={() => setPassable(3)}>
+              <View borderWidth={passable == 3 ? 5 : 0} style={{ alignItems: 'center' }}>
                 <Image
                   style={styles.floodingLogo}
                   source={require("../assets/chuva_forte.png")}
                 />
                 <Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Chuva forte</Text>
               </View>
+            </TouchableNativeFeedback>
 
-            <View style={{ alignItems: 'center' }}>
+            <TouchableNativeFeedback onPress={() => setPassable(4)}>
+              <View borderWidth={passable == 4 ? 5 : 0} style={{ alignItems: 'center' }}>
                 <Image
                   style={styles.floodingLogo}
                   source={require("../assets/chuva_muito_forte.png")}
                 />
                 <Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Chuva muito{"\n"}forte</Text>
               </View>
+            </TouchableNativeFeedback>
 
-            <View style={{ alignContent: 'center' }}>
+            <TouchableNativeFeedback onPress={() => setPassable(5)}>
+              <View borderWidth={passable == 5 ? 5 : 0} style={{ alignContent: 'center' }}>
                 <Image
                   style={styles.floodingLogo}
                   source={require("../assets/chuva_pancadas.png")}
                 />
                 <Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Pancada de{"\n"}chuva</Text>
               </View>
-          </View>
-          <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
-
+            </TouchableNativeFeedback>
           </View>
         </View>
+        <FormImagePicker backgroundColor="#1976D2" name="images" />
 
-        <FormImagePicker backgroundColor="blue" name="images"/>
+        <Button title="Enviar" backgroundColor="red" width="20" />
       </Form>
     </Screen>
   );