I'm attempting to pass a useState function between screens. I receive this function on the App.tsx and I passed it to the Navigator handler, to I can pass the set parameter into the signInScreen.
This is the app.tsx:
export default function App() { // Autentication const [isAuthenticated, setIsAuthenticated] = useState(false); useEffect(() => { setLocale('pt'); auth.onAuthStateChanged((user) => { if (user) { if (user?.emailVerified) { setIsAuthenticated(true); } } }); }, []); if (!fontsLoaded) return <></>; return (<ThemeProvider theme={theme}> {!isAuthenticated ? (<NavigationContainer><AuthRoutes setIsAuthenticated={setIsAuthenticated} /></NavigationContainer> ) : (<Provider store={store}><Main /></Provider> )}<ToastMessage /></ThemeProvider> );}The route, this is how I attemtped to pass the function:
import React from 'react';import { createStackNavigator } from '@react-navigation/stack';import { SignIn } from '../screens/SignIn';import { Register } from '../screens/Register';import { Welcome } from '../screens/Welcome';import { ForgotPassword } from '../screens/ForgotPassword';export function AuthRoutes({ setIsAuthenticated }: any) { const { Navigator, Screen } = createStackNavigator(); return (<Navigator screenOptions={{ headerShown: false }} initialRouteName="Welcome"><Screen key="Welcome" name="Welcome" component={Welcome} /><Screen key="SignIn" name="SignIn" component={SignIn} options={setIsAuthenticated}/><Screen key="SignUp" name="SignUp" component={Register} /><Screen key="ForgotPassword" name="ForgotPassword" component={ForgotPassword} /></Navigator> );}On the signIn I attempted to access the props, but the function wasn't there:
import React, { useEffect, useState } from 'react';import ArrowBack from '../../assets/arrowBack.svg';import { Keyboard, TouchableWithoutFeedback } from 'react-native';import { Form } from '../../components/FormSignIn';import { Container, TitleContainer, Title, ArrowContainer, ArrowTouchable, ForgotPasswordContainer, ForgotPasswordTouchable, ForgotPasswordText, TextContainer, Text, TouchableText, SignUpText,} from './styles';import i18n from 'i18n-js';import { Modal } from '../../components/Modal';export function SignIn({ navigation, ...props }: any) { const [forgotEmail, setForgotEmail] = useState(''); const [showModal, setShowModal] = useState(false);console.log(props) return (<TouchableWithoutFeedback onPress={Keyboard.dismiss}><><Modal visible={showModal} text={i18n.t('checkEmail.emailSent')} state="success" description={i18n.t('checkEmail.description')} buttonText={i18n.t('checkEmail.sendAgain')} navigation={undefined} setShowModal={setShowModal} onPress={() => console.log('[pre')} /><Container><ArrowContainer><ArrowTouchable onPress={() => navigation.goBack(null)}><ArrowBack width={24} height={24} /></ArrowTouchable></ArrowContainer><TitleContainer><Title>{i18n.t('login.title')}</Title></TitleContainer><Form setForgotEmail={setForgotEmail} setShowModal={setShowModal} /><ForgotPasswordContainer><ForgotPasswordTouchable onPress={() => navigation.navigate('ForgotPassword', { forgotEmail })}><ForgotPasswordText>{i18n.t('login.forgotPassword')}</ForgotPasswordText></ForgotPasswordTouchable></ForgotPasswordContainer><TextContainer><Text>{i18n.t('login.createAccount')}</Text><TouchableText onPress={() => navigation.navigate('SignUp')}><SignUpText>{i18n.t('login.signUp')}</SignUpText></TouchableText></TextContainer></Container></></TouchableWithoutFeedback> );}