Fixing navigation to Profile screen

src/app/navigation/AppNavigator.js

@@ -8,81 +8,104 @@ import MessagesNavigator from "./MessagesNavigator";
 import ForecastNavigator from "./ForecastNavigator";
 import NewListingButton from "./NewListingButton";
 import SharingDataOptionsNavigator from "./SharingDataOptionsNavigator";
+import { NavigationContainer } from "@react-navigation/native";
+import {createStackNavigator} from "@react-navigation/stack";
 
 const Tab = createBottomTabNavigator();
+const Stack = createStackNavigator();
+
+function tabScreens() {
+  return (
+    <Tab.Navigator style={{ backgroundColor: "white" }}>
+      <Tab.Screen
+        name="Home"
+        component={FeedNavigator}
+        options={{
+          tabBarIcon: ({ color, size }) => (
+            <MaterialCommunityIcons name="home" color={color} size={size} />
+          ),
+        }}
+      />
+      <Tab.Screen
+        name="SharingData"
+        component={SharingDataOptionsNavigator}
+        options={({ navigation }) => ({
+          tabBarButton: () => (
+            <NewListingButton
+              onPress={() =>
+                navigation.navigate("SharingData", {
+                  screen: "Voltar",
+                  initial: false,
+                })
+              }
+            />
+          ),
+          tabBarIcon: ({ color, size }) => (
+            <MaterialCommunityIcons
+              name="plus-circle"
+              color={color}
+              size={size}
+            />
+          ),
+        })}
+      />
+      <Tab.Screen
+        name="Previsão"
+        component={ForecastNavigator}
+        options={{
+          tabBarIcon: ({ color, size }) => (
+            <MaterialCommunityIcons
+              name="check-circle"
+              color={color}
+              size={size}
+            />
+          ),
+        }}
+      />
+
+      {/* <Tab.Screen */}
+      {/*   name="Notificação" */}
+      {/*   component={MessagesNavigator} */}
+      {/*   options={{ */}
+      {/*     tabBarIcon: ({ color, size }) => ( */}
+      {/*       <MaterialCommunityIcons */}
+      {/*         name="bell" */}
+      {/*         color={color} */}
+      {/*         size={size} */}
+      {/*       /> */}
+      {/*     ), */}
+      {/*   }} */}
+      {/* /> */}
+
+    </Tab.Navigator>
+  );
+}
 
 const AppNavigator = () => (
-  <Tab.Navigator style={{ backgroundColor: "white" }}>
-    <Tab.Screen
-      name="Home"
-      component={FeedNavigator}
-      options={{
-        tabBarIcon: ({ color, size }) => (
-          <MaterialCommunityIcons name="home" color={color} size={size} />
-        ),
-      }}
-    />
-    <Tab.Screen
-      name="SharingData"
-      component={SharingDataOptionsNavigator}
-      options={({ navigation }) => ({
-        tabBarButton: () => (
-          <NewListingButton
-            onPress={() =>
-              navigation.navigate("SharingData", {
-                screen: "Voltar",
-                initial: false,
-              })
-            }
-          />
-        ),
-        tabBarIcon: ({ color, size }) => (
-          <MaterialCommunityIcons
-            name="plus-circle"
-            color={color}
-            size={size}
-          />
-        ),
-      })}
-    />
-    <Tab.Screen
-      name="Previsão"
-      component={ForecastNavigator}
-      options={{
-        tabBarIcon: ({ color, size }) => (
-          <MaterialCommunityIcons
-            name="check-circle"
-            color={color}
-            size={size}
-          />
-        ),
-      }}
-    />
+  <NavigationContainer
+    independent={true}
+  >
+    <Stack.Navigator>
+      <Stack.Screen
+        name="tab"
+        options={{ headerShown: false }}
+        component={tabScreens}
+      />
+
+      <Stack.Screen
+        name="Perfil"
+        component={AccountNavigator}
+        options={{
+         headerShown: false,
+          tabBarIcon: ({ color, size }) => (
+            <MaterialCommunityIcons name="account" color={color} size={size} />
+          ),
+        }}
+      />
 
-    {/* <Tab.Screen */}
-    {/*   name="Notificação" */}
-    {/*   component={MessagesNavigator} */}
-    {/*   options={{ */}
-    {/*     tabBarIcon: ({ color, size }) => ( */}
-    {/*       <MaterialCommunityIcons */}
-    {/*         name="bell" */}
-    {/*         color={color} */}
-    {/*         size={size} */}
-    {/*       /> */}
-    {/*     ), */}
-    {/*   }} */}
-    {/* /> */}
 
-    {/* <Tab.Screen */}
-    {/*   name="Perfil" */}
-    {/*   component={AccountNavigator} */}
-    {/*   options={{ */}
-    {/*     tabBarIcon: ({ color, size }) => ( */}
-    {/*       <MaterialCommunityIcons name="account" color={color} size={size} /> */}
-    {/*     ), */}
-    {/*   }} */}
-    {/* /> */}
-  </Tab.Navigator>
+    </Stack.Navigator>
+  </NavigationContainer>
 );
 
 export default AppNavigator;