From c410f92116056f35520eea1270d9fe86f5989b97 Mon Sep 17 00:00:00 2001
From: GabrielTrettel <gabrielmtrettel@gmail.com>
Date: Fri, 2 Apr 2021 17:34:27 -0300
Subject: [PATCH] Adding "Perfil" screen as a header button

---
 src/app/components/HeaderBarMenu.js  | 30 ++++++++++++++++++++++++++++
 src/app/screens/ForecastScreen.js    |  4 ++--
 src/app/screens/MapFeedScreen.js     |  4 +++-
 src/app/screens/MessagesScreen.js    |  2 ++
 src/app/screens/SharingDataScreen.js |  4 ++--
 src/package.json                     |  1 +
 6 files changed, 40 insertions(+), 5 deletions(-)
 create mode 100644 src/app/components/HeaderBarMenu.js

diff --git a/src/app/components/HeaderBarMenu.js b/src/app/components/HeaderBarMenu.js
new file mode 100644
index 0000000..424a22e
--- /dev/null
+++ b/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;
diff --git a/src/app/screens/ForecastScreen.js b/src/app/screens/ForecastScreen.js
index 9464098..4962931 100644
--- a/src/app/screens/ForecastScreen.js
+++ b/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>
   );
diff --git a/src/app/screens/MapFeedScreen.js b/src/app/screens/MapFeedScreen.js
index 409c94e..a5cb1a2 100644
--- a/src/app/screens/MapFeedScreen.js
+++ b/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
diff --git a/src/app/screens/MessagesScreen.js b/src/app/screens/MessagesScreen.js
index 8a773b1..4c94268 100644
--- a/src/app/screens/MessagesScreen.js
+++ b/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 />
diff --git a/src/app/screens/SharingDataScreen.js b/src/app/screens/SharingDataScreen.js
index 81eb99a..b08427b 100644
--- a/src/app/screens/SharingDataScreen.js
+++ b/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>
diff --git a/src/package.json b/src/package.json
index d9b492a..b6e378b 100644
--- a/src/package.json
+++ b/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"