Estoy intentando esconder/mostrar el botón de logout de mi drawer menu según el usuario este logeado o no, he puesto una función en el componente que decida si mostrar o no el botón en cada momento, pero solo funciona cuando el usuario entra la primera vez a la aplicación, después aunque el usuario se logee correctamente no se muestra el botón ya que el drawer navigation no se ha actualizado. Habría algún modo de poder actualizar el drawer menu cuando el usuario se logee, para que aparezca el botón de logout? Y el procedimiento contrario al clicar el botón de logout...
Navigation.js
import React from "react";
import { createAppContainer } from "react-navigation";
import { createDrawerNavigator } from "react-navigation-drawer";
import JornadaScreenStacks from "./JornadaStacks";
import CustomComponent from "./CustomDrawerComponent";
const NavigationStacks = createDrawerNavigator(
{
Jornada: {
screen: JornadaScreenStacks,
navigationOptions: () => ({
topBarLabel: "Jornada"
})
}
},
{
contentComponent: props => <CustomComponent {...props} />,
order: ["Jornada"]
}
);
export default createAppContainer(NavigationStacks);
CustomdrawerComponent.js
import React, { useState, useEffect } from "react";
import { View, ScrollView, StyleSheet } from "react-native";
import SafeAreaView from "react-native-safe-area-view";
import { DrawerNavigatorItems } from "react-navigation-drawer";
import { Icon } from "react-native-elements";
import { cerrarSesion, isLogeado } from "../utils/acces_control";
import {
withNavigation,
NavigationActions,
StackActions
} from "react-navigation";
function CustomDrawerContentComponent(props) {
const [es_logeado, setEs_logeado] = useState(false);
const { navigation } = props;
useEffect(() => {
async function logeado() {
let login = await isLogeado();
if (login === "true") {
setEs_logeado(true);
}
}
logeado();
}, [es_logeado]);
return (
<ScrollView>
{es_logeado && (
<View style={styles.logoutButton}>
<Icon
type="material-community"
name="power-standby"
onPress={() => {
cerrarSesion();
const resetAction = StackActions.reset({
index: 0,
key: null,
actions: [NavigationActions.navigate({ routeName: "Jornada" })]
});
navigation.dispatch(resetAction);
}}
/>
</View>
)}
<SafeAreaView>
<DrawerNavigatorItems {...props} />
</SafeAreaView>
</ScrollView>
);
}
export default withNavigation(CustomDrawerContentComponent);
const styles = StyleSheet.create({
logoutButton: {
flex: 1,
flexDirection: "row",
alignItems: "center",
marginTop: 40
}
});
JornadaStacks.js
import React, { useState } from "react";
import { createStackNavigator } from "react-navigation-stack";
import JornadaScreen from "../screens/Jornada/Jornada";
import FormCodigoScreen from "../screens/Jornada/FormCodigo";
import EscanearCodigoScreen from "../screens/Jornada/QRScanner";
import PaneltrabajadorScreen from "../screens/Jornada/PanelTrabajador";
const JornadaScreenStacks = createStackNavigator({
Jornada: {
screen: JornadaScreen,
navigationOptions: () => ({
title: "Valida tu código",
headerTintColor: "white",
headerStyle: {
backgroundColor: "#753e9c"
}
})
},
FormCodigo: {
screen: FormCodigoScreen,
navigationOptions: () => ({
title: "Introduce tu código",
headerTintColor: "white",
headerStyle: {
backgroundColor: "#753e9c"
}
})
},
EscanearCodigo: {
screen: EscanearCodigoScreen,
navigationOptions: () => ({
title: "Escanea el código QR",
headerTintColor: "white",
headerStyle: {
backgroundColor: "#753e9c"
}
})
},
Paneltrabajador: {
screen: PaneltrabajadorScreen,
navigationOptions: () => ({
title: "Mi Jornada",
headerLeft: () => null,
headerTintColor: "white",
headerStyle: {
backgroundColor: "#753e9c"
}
})
}
});
export default JornadaScreenStacks;
App.js
import React from "react";
import Navigation from "./app/navigations/Navigation";
import { navigationRef } from "./app/utils/RootNavigation";
export default function App() {
return <Navigation ref={navigationRef} />;
}
acces_control.js
import { AsyncStorage } from "react-native";
export const isLogeado = async () => {
try {
// await AsyncStorage.setItem("loged", "null"); //Invalidar logeo
return await AsyncStorage.getItem("loged");
} catch (error) {
console.log(error);
return false;
}
};
export const cerrarSesion = async () => {
try {
AsyncStorage.setItem("loged", "false");
return false;
} catch (error) {
console.log(error);
return false;
}
};
export const setSesion = () => {};
cerrarSesion
?false
el estadoes_logeado
, creo que luego decerrarSesion
deberías ponersetEs_logeado(false);