React Native Private/Public Screen Pattern - Wrap the `@react-navigation/stack` to be auth aware (Note: replace `.` in file names with `/` to make more sense)

navigations.index.js

import AScreen from 'screens/A'
import BScreen from 'screens/B'
import MainScreen from 'screens/Main'
import SignInScreen from 'screens/SignIn'
import SignUpScreen from 'screens/SignUp'
import SomeNestedScreen from 'screens/SomeNested'

import StackNavigator from './stack-navigator'

const Navigations = () => {
  return (
    <>
      <StackNavigator.Navigator initialRouteName='SignIn'>
        <StackNavigator.PublicScreen name='SignUp' component={SignUpScreen} />
        <StackNavigator.PublicScreen name='SignIn' component={SignInScreen} />
      </StackNavigator.Navigator>
      <StackNavigator.Navigator initialRouteName='Main'>
        <StackNavigator.PrivateScreen name='Main' component={MainScreen} />
        <StackNavigator.PrivateScreen name='A' component={AScreen} />
        <StackNavigator.PrivateScreen name='B' component={BScreen} />
        <StackNavigator.Navigator initialRouteName='SomeNestedScreen'>
          <StackNavigator.PrivateScreen name='SomeNestedScreen' component={SomeNestedScreen} />
        </StackNavigator.Navigator>
      </StackNavigator.Navigator>
    </>
  )
}

export default Navigations

navigations.stack-navigator-public.screen.js

import Stack from './stack'

const PublicScreen = ({ component, name }) => {
  return <Stack.Screen name={name} component={component} />
}
  
export default PublicScreen

navigations.stack-navigator.index.js

import PrivateScreen from './private-screen'
import PublicScreen from './public-screen'
import Stack from './stack'

export {
  Navigator: Stack.Navigator,
  PrivateScreen,
  PublicScreen,
}

navigations.stack-navigator.private-screen.component.js

import Login from 'screens/Login'

import Stack from './stack'

const PrivateScreen = ({ isAuthenticated, component, name, navigateToLogin }) => {
  if (!isAuthenticated) {
    navigateToLogin()
    return null
  }
  return <Stack.Screen name={name} component={component} />
}
  
export default PrivateScreen

navigations.stack-navigator.private-screen.index.js

import { connect } from 'react-redux'

import someAuthSelectors from 'src/authentication/selectors'
import PrivateScreen from './component'

const mapStateToProps = (state) => {
  return {
    // Let redux determine the state of authentication
    isAuthenticated: someAuthSelectors.getIsAuthenticated(state),
  }
}

const mapDispatchToProps = (dispatch, { navigation }) => {
  return {
    navigateToLogin: dispatch(navigation.navigate('Login')),
  }
} 

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(PrivateScreen)

navigations.stack-navigator.stack.js

import { createStackNavigator } from '@react-navigation/stack'

const Stack = createStackNavigator()

export default Stack

Not sure if this is possible, but for PrivateScreen, why not this instead?

const PrivateScreen = ({ isAuthenticated, navigation, component, name }) => {
  if (!isAuthenticated) {
        navigation.navigate('Login');
  }
  return <Stack.Screen name={name} component={component} />
}

Not sure if this is possible, but for PrivateScreen, why not this instead?

const PrivateScreen = ({ isAuthenticated, navigation, component, name }) => {
  if (!isAuthenticated) {
        navigation.navigate('Login');
  }
  return <Stack.Screen name={name} component={component} />
}

Agreed, someone else has also pointed out this issue on Reddit.

const PrivateScreen = ({ isAuthenticated, navigation, component, name }) => {
  if (!isAuthenticated) {
      navigation.navigate('Login')
      return null
  }
  return <Stack.Screen name={name} component={component} />
}

I think your fix would work (plus a one-line amendment as above) but I will try to create a repo to test this when I have time.

Edit: Now the gist has been updated with a fix similar to @hbina's suggestion

Hello , thanks for this code
but i keep receiving this error: Error: A navigator can only contain 'Screen' components as its direct children (found 'undefined' for the screen 'Login')
Is there anyway to resolve it ?

Its been a while since I've use React but it seems like you passed an undefined value in <Login ...>. Share some code?

Thanks hbina for responding i've used another method to solve the problem , !

I keep get error Error: A navigator can only contain 'Screen' components as its direct children (found 'undefined' for the screen 'Login')