Adding header title for sharing screens

src/app/screens/SharingDataScreen.js

@@ -13,16 +13,6 @@ import RiverFloodSharingDataScreen from "./RiverFloodSharingDataScreen";
 function SharingDataScreen({ navigation }) {
   return (
     <View style={styles.container}>
-      <Text
-        style={{
-          fontSize: 25,
-          textAlign: "center",
-          backgroundColor: "lightgray",
-          marginTop: 10,
-        }}
-      >
-        Enviar uma informação
-      </Text>
       <View style={{ flexDirection: "row", justifyContent: "space-around" }}>
         <TouchableOpacity
           style={{ alignItems: "center" }}
@@ -48,7 +38,10 @@ function SharingDataScreen({ navigation }) {
       </View>
 
       <View style={{ flexDirection: "row", justifyContent: "space-around" }}>
-        <TouchableOpacity style={{ alignItems: "center" }} onPress={() => navigation.navigate('PluviometerSharingData')}>
+        <TouchableOpacity
+          style={{ alignItems: "center" }}
+          onPress={() => navigation.navigate("PluviometerSharingData")}
+        >
           <Image
             style={styles.floodingLogo}
             source={require("../assets/diario_pluviometrico.png")}
@@ -56,7 +49,10 @@ function SharingDataScreen({ navigation }) {
           <Text style={styles.text}>Diário do{"\n"}pluviômetro</Text>
         </TouchableOpacity>
 
-        <TouchableOpacity style={{ alignItems: "center" }} onPress={() => navigation.navigate('RiverFloodData')}>
+        <TouchableOpacity
+          style={{ alignItems: "center" }}
+          onPress={() => navigation.navigate("RiverFloodData")}
+        >
           <Image
             style={styles.floodingLogo}
             source={require("../assets/nivel_rio.png")}
@@ -74,7 +70,6 @@ const styles = StyleSheet.create({
     textAlign: "center",
     marginTop: 10,
   },
-
   rainLogo: {
     width: 110,
     height: 100,
@@ -92,12 +87,58 @@ const Stack = createStackNavigator();
 function RainSharingDataNavigator() {
   return (
     <Stack.Navigator initialRouteName="SharingData">
-      <Stack.Screen name="SharingData" component={SharingDataScreen} />
+      <Stack.Screen
+        name="SharingData"
+        component={SharingDataScreen}
+        options={{
+          title: "Enviar uma informação",
+          headerStyle: {
+            backgroundColor: "lightgray",
+          },
+          headerTitleStyle: { alignSelf: "center" },
+        }}
+      />
 
-      <Stack.Screen name="RainSharingData" component={RainSharingDataScreen} />
-      <Stack.Screen name="FloodSharingData" component={SharingFloodZonesScreen}/>
-      <Stack.Screen name="PluviometerSharingData" component={PluviometerSharingDataScreen} />
-      <Stack.Screen name="RiverFloodData" component={RiverFloodSharingDataScreen} />
+      <Stack.Screen
+        name="RainSharingData"
+        component={RainSharingDataScreen}
+        options={{
+          title: "Enviar uma informação",
+          headerStyle: {
+            backgroundColor: "lightgray",
+          },
+        }}
+      />
+      <Stack.Screen
+        name="FloodSharingData"
+        component={SharingFloodZonesScreen}
+        options={{
+          title: "Enviar uma informação",
+          headerStyle: {
+            backgroundColor: "lightgray",
+          },
+        }}
+      />
+      <Stack.Screen
+        name="PluviometerSharingData"
+        component={PluviometerSharingDataScreen}
+        options={{
+          title: "Enviar uma informação",
+          headerStyle: {
+            backgroundColor: "lightgray",
+          },
+        }}
+      />
+      <Stack.Screen
+        name="RiverFloodData"
+        component={RiverFloodSharingDataScreen}
+        options={{
+          title: "Enviar uma informação",
+          headerStyle: {
+            backgroundColor: "lightgray",
+          },
+        }}
+      />
     </Stack.Navigator>
   );
 }