Putting the profile screen to the tabbar and adding the information button to the header bar

src/app/components/HeaderBarMenu.js

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { FontAwesome5 } from "@expo/vector-icons";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
 import {
   HeaderButtons,
   HeaderButton,
@@ -8,7 +8,7 @@ import {
 } from "react-navigation-header-buttons";
 
 const IoniconsHeaderButton = (props) => (
-  <HeaderButton IconComponent={FontAwesome5} iconSize={23} {...props} />
+  <HeaderButton IconComponent={MaterialCommunityIcons} iconSize={23} {...props} />
 );
 
 function HeaderBarMenu(navigation) {
@@ -17,9 +17,9 @@ function HeaderBarMenu(navigation) {
       headerRight: () => (
         <HeaderButtons HeaderButtonComponent={IoniconsHeaderButton}>
           <Item
-            title="user"
-            iconName="user"
-            onPress={() => navigation.navigate("Perfil")}
+            title="Sobre"
+            iconName="information-outline"
+            onPress={() => navigation.navigate("Abbout")}
           />
         </HeaderButtons>
       ),

src/app/navigation/AppNavigator.js

@@ -9,14 +9,21 @@ import ForecastNavigator from "./ForecastNavigator";
 import NewListingButton from "./NewListingButton";
 import SharingDataOptionsNavigator from "./SharingDataOptionsNavigator";
 import { NavigationContainer } from "@react-navigation/native";
-import {createStackNavigator} from "@react-navigation/stack";
+import { createStackNavigator } from "@react-navigation/stack";
+import Abbout from "../screens/Abbout";
+import colors from "../config/colors";
 
 const Tab = createBottomTabNavigator();
 const Stack = createStackNavigator();
 
 function tabScreens() {
   return (
-    <Tab.Navigator style={{ backgroundColor: "white" }}>
+    <Tab.Navigator
+      style={{ backgroundColor: "black" }}
+      tabBarOptions={{
+        activeTintColor: colors.primary,
+      }}
+    >
       <Tab.Screen
         name="Home"
         component={FeedNavigator}
@@ -49,42 +56,22 @@ function tabScreens() {
           ),
         })}
       />
+
       <Tab.Screen
-        name="Previsão"
-        component={ForecastNavigator}
+        name="Perfil"
+        component={AccountNavigator}
         options={{
           tabBarIcon: ({ color, size }) => (
-            <MaterialCommunityIcons
-              name="check-circle"
-              color={color}
-              size={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.Navigator>
   );
 }
 
 const AppNavigator = () => (
-  <NavigationContainer
-    independent={true}
-  >
+  <NavigationContainer independent={true}>
     <Stack.Navigator>
       <Stack.Screen
         name="tab"
@@ -93,17 +80,19 @@ const AppNavigator = () => (
       />
 
       <Stack.Screen
-        name="Perfil"
-        component={AccountNavigator}
+        name="Abbout"
+        component={Abbout}
         options={{
-         headerShown: false,
+          title: "Sobre",
           tabBarIcon: ({ color, size }) => (
-            <MaterialCommunityIcons name="account" color={color} size={size} />
+            <MaterialCommunityIcons
+              name="information-outline"
+              color={color}
+              size={size}
+            />
           ),
         }}
       />
-
-
     </Stack.Navigator>
   </NavigationContainer>
 );

src/app/screens/SharingDataScreen.js

@@ -9,7 +9,6 @@ import HeaderBarMenu from "../components/HeaderBarMenu";
 //1/3
 
 function SharingDataScreen({ navigation }) {
-  HeaderBarMenu(navigation);
   const dims = scaleDimsFromWidth(93, 106, 35);
   // const dims = { width: "100%", height: "100%" };