Inside App.js I have an authorized variable. Depending on it's value (true/false) App function returning the exact components.
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>
);
}
Inside the AuthStack I have a OTPScreen component:
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>
)
}
I need to change the authorized value inside the App.js from a OTPScreen.js. How can I do that?
This might work:
// 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')
}
}