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

Issues with navigation between screens with expo react native

I am building a reac native expo application and i want to navigate to another page after successfully login. So i followed the documentation for expo and installed the following packages: @react-native-community/masked-view, @react-navigation/native, @react-navigation/native-stack, @react-navigation/stack, react-native-gesture-handler, react-native-gesture-handler, react-native-screens. Then i created a component to handle this navigation.

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import LoginScreen from '../screens/LoginScreen';

const Stack = createNativeStackNavigator();

const RootStack = () => {
  <NavigationContainer>
    <Stack.Navigator initialRouteName='LoginScreen'>
      <Stack.Screen name="LoginScreen" component={LoginScreen} />
    </Stack.Navigator>
  </NavigationContainer>
}
export default RootStack;

And on my App.js file i put this:

import RootStack from './app/navigators/RootStack';

export default function App() {
  return <RootStack />;
}

When i run the expo app on the android device i see no errors or warnings, but app wont load.

enter image description here

Can someone please help me with this?

Thanks in advance.

Tags:

2

Answers


  1. 0

    Certainly, here’s the text with improved grammar:

    Please check your ‘RootStack’ component. It does not return anything.

    You can either try this:

    const RootStack = () => (
  <NavigationContainer>
    <Stack.Navigator initialRouteName='LoginScreen'>
      <Stack.Screen name="LoginScreen" component={LoginScreen} />
    </Stack.Navigator>
  </NavigationContainer>
)

    Or:

    const RootStack = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName='LoginScreen'>
        <Stack.Screen name="LoginScreen" component={LoginScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  )
}
    Login or Signup to reply.
  2. 0

    update your app.js code with the below code.

    App.js file

    import { registerRootComponent } from 'expo';
import RootStack from './app/navigators/RootStack';

// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
// It also ensures that whether you load the app in Expo Go or in a native build,
// the environment is set up appropriately
registerRootComponent(RootStack);

    update your RootStack.js code with the below code.

    const RootStack = () => ( 
<NavigationContainer>
    <Stack.Navigator initialRouteName='LoginScreen'>
      <Stack.Screen name="LoginScreen" component={LoginScreen} />
    </Stack.Navigator>
  </NavigationContainer>
)

    expo docs

    And yes check your entry point also, The entry point can be found in node_modules/expo/AppEntry.js In this, you can change your entry point. Initially, it is set to App, Look at the import statement where that component is coming from.

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

Back To Top
Search