navigation error solved (Needs improvement)

src/app/navigation/RainSharingDataNavigator.js

@@ -10,12 +10,9 @@ const Stack = createStackNavigator();
 
 function RainSharingDataNavigator() {
     return (
-        <NavigationContainer>
-            <Stack.Navigator initialRouteName = "SharingData">
-                <Stack.Screen name = "SharingData" component={SharingDataScreen}/>
+        <Stack.Navigator>
             <Stack.Screen name="RainSharingData" component={RainSharingDataScreen} />
         </Stack.Navigator>
-        </NavigationContainer>
     );
 }
 export default RainSharingDataNavigator;

src/app/screens/SharingDataScreen.js

@@ -1,18 +1,10 @@
 import React from "react";
 import { StyleSheet, View } from "react-native";
-import * as Yup from "yup";
 
-import {
-  Form,
-  FormField,
-  FormPicker as Picker,
-  SubmitButton,
-} from "../components/forms";
-import CategoryPickerItem from "../components/CategoryPickerItem";
-import Screen from "../components/Screen";
-import FormImagePicker from "../components/forms/FormImagePicker";
-import useLocation from "../hooks/useLocation";
 import { Image, Text, TouchableOpacity } from 'react-native';
+import { createStackNavigator } from "@react-navigation/stack";
+import RainSharingDataScreen from '../screens/RainSharingDataScreen';
+
 //1/3
 const styles = StyleSheet.create({
   container: {
@@ -30,56 +22,61 @@ const styles = StyleSheet.create({
 
   },
 })
-class SharingDataScreen extends React.Component {
-  static navigationOptions = {
-  title: "SharingDataScreen",
-  headerStyle: {
-  backgroundColor: "#73C6B6"
-  }
-  };
-  render() {
+function SharingDataScreen({ navigation }) {
   return (
     <View style={styles.container}>
-      <Text style={{ fontSize: 25, textAlign: 'center', backgroundColor: 'lightgray'}}>
+      <Text style={{ fontSize: 25, textAlign: 'center', backgroundColor: 'lightgray', marginTop: 10 }}>
         Enviar uma informação
         </Text>
       <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
 
-      <TouchableOpacity>
+        <TouchableOpacity style={{ alignItems: 'center' }}>
           <Image
             style={styles.floodingLogo}
             source={require("../assets/pontos_alagamento_peq.png")}
           />
+          <Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Pontos de {"\n"}alagamento</Text>
         </TouchableOpacity>
-      <TouchableOpacity onPress={() => this.props.navigation.navigate("RainSharingData")}>
+
+        <TouchableOpacity style={{ alignItems: 'center' }} onPress={() => navigation.navigate('RainSharingData')}>
           <Image
             style={styles.floodingLogo}
             source={require("../assets/chuva_peq.png")}
           />
+          <Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Chuva</Text>
         </TouchableOpacity>
       </View>
-      <View style={{flexDirection:'row'}}>
-        <Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10, marginLeft: 50}}>Pontos de {"\n"}alagamento</Text>
-        <Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10, marginLeft: 110}}>Chuva</Text>
-      </View>
 
       <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
+
+        <TouchableOpacity style={{ alignItems: 'center' }}>
           <Image
             style={styles.floodingLogo}
             source={require("../assets/diario_pluviometrico.png")}
           />
+          <Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Diário do{"\n"}pluviômetro</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity style={{ alignItems: 'center' }}>
           <Image
             style={styles.floodingLogo}
             source={require("../assets/nivel_rio.png")}
           />
-      </View>      
-      <View style={{flexDirection:'row', justifyContent: 'space-around'}}>
-        <Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10}}>Diário do{"\n"}pluviômetro</Text>
           <Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Nível de água {"\n"}no rio</Text>
+        </TouchableOpacity>
       </View>
     </View>
   );
 }
+const Stack = createStackNavigator();
+
+function RainSharingDataNavigator() {
+  return (
+    <Stack.Navigator initialRouteName="SharingData">
+      <Stack.Screen name="SharingData" component={SharingDataScreen} />
+      <Stack.Screen name="RainSharingData" component={RainSharingDataScreen} />
+    </Stack.Navigator>
+  );
 }
 
-export default SharingDataScreen;
+export default RainSharingDataNavigator;