navigation error solved (Needs improvement)

src/app/navigation/RainSharingDataNavigator.js

@@ -8,14 +8,11 @@ import SharingDataScreen from '../screens/SharingDataScreen';
 
 const Stack = createStackNavigator();
 
-function RainSharingDataNavigator(){
-    return(
-        <NavigationContainer>
-            <Stack.Navigator initialRouteName = "SharingData">
-                <Stack.Screen name = "SharingData" component={SharingDataScreen}/>
-                <Stack.Screen name = "RainSharingData" component={RainSharingDataScreen}/>
+function RainSharingDataNavigator() {
+    return (
+        <Stack.Navigator>
+            <Stack.Screen name="RainSharingData" component={RainSharingDataScreen} />
         </Stack.Navigator>
-        </NavigationContainer>
     );
 }
 export default RainSharingDataNavigator;

src/app/screens/SharingDataScreen.js

@@ -1,85 +1,82 @@
 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 { Image, Text, TouchableOpacity } from 'react-native';
+import { createStackNavigator } from "@react-navigation/stack";
+import RainSharingDataScreen from '../screens/RainSharingDataScreen';
+
 //1/3
 const styles = StyleSheet.create({
-  container:{
-    paddingTop:50,
+  container: {
+    paddingTop: 50,
   },
   rainLogo: {
     width: 110,
-    height:100,
-    margin:30,
+    height: 100,
+    margin: 30,
   },
   floodingLogo: {
     width: 85,
-    height:85,
+    height: 85,
     marginTop: 70,
 
   },
 })
-class SharingDataScreen extends React.Component {
-  static navigationOptions = {
-  title: "SharingDataScreen",
-  headerStyle: {
-  backgroundColor: "#73C6B6"
-  }
-  };
-  render() {
-  return(
+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'}}>
+      <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
 
-      <TouchableOpacity>
+        <TouchableOpacity style={{ alignItems: 'center' }}>
           <Image
-          style = {styles.floodingLogo}
+            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}
+            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'}}>
+      <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
+
+        <TouchableOpacity style={{ alignItems: 'center' }}>
           <Image
-          style = {styles.floodingLogo}
+            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}
+            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>
+          <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;