Dentro de App.js tengo una variable authorized . Dependiendo de su valor (verdadero/falso), la función de la aplicación devuelve los componentes exactos.
App.js .... import React, { useState } from 'react'; import { NavigationContainer } from '@react-navigation/native'; import MyDrawer from './components/Drawer' import AuthStack from './components/AuthStack' export default function App() { const [authorized, setAuthorized] = useState(false) return authorized ? ( <NavigationContainer> <MyDrawer /> </NavigationContainer> ) : ( <NavigationContainer> <AuthStack /> </NavigationContainer> ); } Dentro de AuthStack tengo un componente OTPScreen:
OTPScreen.js .... import React, { useState } from 'react'; import { View, Text, StyleSheet, TextInput, StatusBar, Pressable } from 'react-native'; export default function OTPScreen(props) { const [code, setCode] = useState(''); const confirm = props.route.params.confirm; const OTPVerify = async () => { try { let data = await confirm.confirm(code); // Update "authorized" value here } catch (error) { console.log('Invalid code') } } return ( <View style={styles.mainContainer}> <StatusBar backgroundColor='#9394ee' barStyle='light-content' /> <View style={styles.mainContent}> <View style={styles.codeBar}> <TextInput style={styles.input} placeholder="Enter code" placeholderTextColor='#000000' value={code} onChangeText={setCode} /> </View> <Pressable style={styles.button} onPress={OTPVerify}> <Text style={styles.buttonText}>Sign in</Text> </Pressable> </View> </View> ) }Necesito cambiar el valor autorizado dentro de App.js desde OTPScreen.js. ¿Cómo puedo hacer eso?
Esto podría funcionar:
// App.js const authorize = () => { setAuthorized(true); } // App.js <AuthStack onAuthorize={authorize} /> // OTPScreen <OTPScreen onAuthorize={props.onAuthorize} /> // OTPScreen const OTPVerify = async () => { try { let data = await confirm.confirm(code); props.onAuthorize(); } catch (error) { console.log('Invalid code') } }