Question 247913 in React native Question posted in
The official React Native documentation can be found here.

How to use React Native Navigation in the Entry Point File (React Native Navigation not working when Component is outside a NavigationContainer)

I’m really sorry for the title being so long on this question but I’m pretty stumped on it.

Ive been working a react native login page for around 10 days now and after finishing all the server side logic it is time to provide login by token functionality.

So my current issue is that I can use navigation.navigate() in all the components that are part of the and the <Stack.Navigator>.

For my login page I designed a function to authenticate them based on stored tokens. This function works but after calling it and getting the desired response I wish to move them to the home screen of the app.

const Stack = createNativeStackNavigator();

export default function App({navigation}) {
  

  async function validate(){
   
   let key =await getKey('token')
   let retval = await Http.post('/verify',{token:key})
   return retval.status

  } 

 validate().then(function(value){
  if(value==215){
  }
 }).catch(function(error){
  console.log(error)
 })

  navigation.navigate('Home')

  return (
      <NavigationContainer>
           <Stack.Navigator >
              <Stack.Screen
                options={{headerShown: false}}
                name='Login'
                component={Login}
              />
               <Stack.Screen
                name='Sign-up'
                component={Signup}
              />
              <Stack.Screen
              
                options={{headerShown: false}}
                name='Home'
                component={Home}
              />
            </Stack.Navigator>
      </NavigationContainer>
 
  );
}

So this code results in a undefined property error but I’m mainly asking for a solution to navigate from the encapsulating component.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The best way to do this is using a navigationRef.

    https://reactnavigation.org/docs/navigating-without-navigation-prop/

    import { NavigationContainer } from '@react-navigation/native';
import { navigationRef } from './RootNavigation';

export default function App() {
  return (
    <NavigationContainer ref={navigationRef}>{/* ... */}</NavigationContainer>
  );
}

  2. 0

    you can use Passing parameters to routes navigation

      <Stack.Screen
                options={{headerShown: false}}
                name='Home'
                component={Home}
                initialParams={{key}}
/>

    and get

    const Home =({})=>{
  const {key} = route?.params}

    https://reactnavigation.org/docs/params/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search