React-navigation redirect from a signIn screen - react-native

Question

I have 3 screens, Home.js, SignIn.js and CreateElement.js. People must be logged in to use CreateElement.js. So when some user is on Home and wants to use CreateElement the screen should redirect them to SignIn.js and then when the user is logged SignIn should continue the flow and redirect them to CreateElement.js.
My code doesn't work and it is the following
return (
<NavigationContainer linking={Linking}>
<AuthChecker>
<LanguageHandler>
<Stack.Navigator headerMode="none" >
<Stack.Screen name="Home" component={HomeScreen} />
{loggedIn
? <>
<Stack.Screen name="Create" component={CreateElementScreen} />
</>
: <>
<Stack.Screen name="SignIn" component={SignInScreen} />
</>
}
</Stack.Navigator>
</LanguageHandler>
</AuthChecker>
</NavigationContainer>
);
}
loggedIn is in the redux store.
Home.js has:
if (loggedIn)
navigate('Create')
else
navigate('SignIn')
and SignIn only change loggedIn to TRUE.
My first solution was create a private component like this one.
// #Vendors
const PrivateRoute = ({ loggedIn, children}) => {
const { navigate } = useNavigation();
useLayoutEffect(() => {
if (!loggedIn)
navigate('SignIn');
console.log('Component is mounted in the DOM');
}, []);
if (loggedIn)
return {children} //In This case <CreateElement/>
else
return <></>
}
const mapStateToProps = ({ auth }) => ({
loggedIn: auth.loggedIn
});
export default connect(mapStateToProps)(PrivateRoute);
My solution work on Android and IOS but when I use react-native-web, the code work but if I enter by URL to CreateElement the privateElement doesn't redirect to me
Any suggestion?

Answer 1

Have you checked whether the loggedIn variable is updated every time after the data is updated?
You might need a useState hook for updating the component.
Something like this:
const [isAuthenticated] = useState(loggedIn);
return (
<NavigationContainer linking={Linking}>
<AuthChecker>
<LanguageHandler>
<Stack.Navigator headerMode="none">
<Stack.Screen name="Home" component={HomeScreen} />
{isAuthenticated ? (
<>
<Stack.Screen name="Create" component={CreateElementScreen} />
</>
) : (
<>
<Stack.Screen name="SignIn" component={SignInScreen} />
</>
)}
</Stack.Navigator>
</LanguageHandler>
</AuthChecker>
</NavigationContainer>
);