Adding "Perfil" screen as a header button

src/app/components/HeaderBarMenu.js

@@ -0,0 +1,30 @@
+import React, { useContext, useEffect, useState } from "react";
+
+import { FontAwesome5 } from "@expo/vector-icons";
+import {
+  HeaderButtons,
+  HeaderButton,
+  Item,
+} from "react-navigation-header-buttons";
+
+const IoniconsHeaderButton = (props) => (
+  <HeaderButton IconComponent={FontAwesome5} iconSize={23} {...props} />
+);
+
+function HeaderBarMenu(navigation) {
+  React.useLayoutEffect(() => {
+    navigation.setOptions({
+      headerRight: () => (
+        <HeaderButtons HeaderButtonComponent={IoniconsHeaderButton}>
+          <Item
+            title="user"
+            iconName="user"
+            onPress={() => navigation.navigate("Perfil")}
+          />
+        </HeaderButtons>
+      ),
+    });
+  }, [navigation]);
+}
+
+export default HeaderBarMenu;

src/app/screens/ForecastScreen.js

@@ -3,11 +3,10 @@ import Screen from "../components/Screen";
 import { StyleSheet, View, Text, TouchableNativeFeedback } from "react-native";
 import { dimensions, screen_width } from "../config/dimensions";
 import colors from "../config/colors";
-import { EventLocationContext } from "../context/EventLocationContext";
 import getWeatherForecast from "../api/weather_forecast";
 import assets from "../config/assets";
-import { ScrollView } from "react-native-gesture-handler";
 import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
+import HeaderBarMenu from "../components/HeaderBarMenu";
 
 function forecastDay(day, setDay) {
   return (
@@ -245,6 +244,7 @@ function renderErrorScreen() {
 function ForecastScreen(props) {
   const forecast = getWeatherForecast();
 
+  HeaderBarMenu(props.navigation);
   return (
     <Screen>{forecast ? renderScreen(forecast) : renderErrorScreen()}</Screen>
   );

src/app/screens/MapFeedScreen.js

@@ -4,11 +4,11 @@ import MapView from "react-native-maps";
 
 import colors from "../config/colors";
 import { screen_width, screen_height } from "../config/dimensions";
-
 import useMarkers from "../hooks/selectFromDB";
 import MapMarker from "../components/MapMarker";
 import attachFocusToQuery from "../hooks/useFocus";
 import { CurrentLocationContext } from "../context/CurrentLocationContext";
+import HeaderBarMenu from "../components/HeaderBarMenu";
 
 function MapFeedScreen(props) {
   const context = useContext(CurrentLocationContext);
@@ -30,6 +30,8 @@ function MapFeedScreen(props) {
     longitudeDelta: map_scale * (screen_width / screen_height),
   };
 
+  HeaderBarMenu(props.navigation);
+
   return (
     <View style={styles.container}>
       <MapView

src/app/screens/MessagesScreen.js

@@ -1,8 +1,10 @@
 import React from "react";
 import Screen from "../components/Screen";
 import InDevelopment from "../components/InDevelopment";
+import HeaderBarMenu from "../components/HeaderBarMenu";
 
 function MessageScreen(props) {
+  HeaderBarMenu(props.navigation);
   return (
     <Screen>
       <InDevelopment />

src/app/screens/SharingDataScreen.js

@@ -6,14 +6,14 @@ import assets from "../config/assets";
 import { scaleDimsFromWidth, dimensions } from "../config/dimensions";
 import { Svg, Image as ImageSvg, SvgXml } from "react-native-svg";
 
+import HeaderBarMenu from "../components/HeaderBarMenu";
 //1/3
 
 function SharingDataScreen({ navigation }) {
   const dims = scaleDimsFromWidth(93, 106, 35);
   // const dims = { width: "100%", height: "100%" };
 
-
-
+  HeaderBarMenu(navigation);
   return (
     <View style={styles.container}>
       <ScrollView>

src/package.json

@@ -53,6 +53,7 @@
     "react-native-walkthrough-tooltip": "^1.1.11",
     "react-native-web": "~0.13.12",
     "react-navigation": "^4.4.3",
+    "react-navigation-header-buttons": "^7.0.1",
     "react-navigation-tabs": "^2.10.1",
     "searchable-flatlist": "0.0.4",
     "yup": "^0.28.5"