Browse Source

Adding "Perfil" screen as a header button

master
GabrielTrettel 4 years ago
parent
commit
c410f92116
  1. 30
      src/app/components/HeaderBarMenu.js
  2. 4
      src/app/screens/ForecastScreen.js
  3. 4
      src/app/screens/MapFeedScreen.js
  4. 2
      src/app/screens/MessagesScreen.js
  5. 4
      src/app/screens/SharingDataScreen.js
  6. 1
      src/package.json

30
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;

4
src/app/screens/ForecastScreen.js

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

4
src/app/screens/MapFeedScreen.js

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

2
src/app/screens/MessagesScreen.js

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

4
src/app/screens/SharingDataScreen.js

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

1
src/package.json

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

Loading…
Cancel
Save