How to navigate from splash screen to login screen in react native?

Question

I am a newbie to react native. I\'m developing a sample app where user will get splash screen on opening of the app and later he will get login screen. But I am unable to fi

Answer 1

In order to navigate a user using your app from the Splash screen to the Login screen, you need to either use the NavigatorIOS component (which only works on iOS) or use a navigation library for React Native.

Popular navigation libraries include:

• React Navigation
• React Native Navigation

An example of navigating from Splash to Login screen using my preferred react-native-navigation:

this.props.navigation.push({
   screen: 'MyApp.LoginActivity'
});

In order to use the above however, you will first have to install react-native-navigation and then register each of your screen.

The documentation for each of the above library are fairly straight forward and will most definitely help you navigate between screens.

This guide in the official docs should help you out.

Answer 2

I will give you the code of a sample app.It contains just three screens just figure out from the code, How you can navigate correctly from one screen to another. The App.js contains the stack-navigator.To which all the other screens are imported.Study about stack navigator first.

https://drive.google.com/open?id=1VdqBtawsx_Z0c3b7CUDv_d8lfcSlDvZo (above is a google drive link to sample app)

• it contains three screens splashscreen,profilescreen,profiledetailscreen

• its a newest version of react-native app like after npm start you will have to start a emulator separately then click 'a' to launch the app inside the emulator.

• or read the bar code generated inside the terminal which appears after npm start from the app named Expo to launch it in the device.

Answer 3

If you are using EXPO Splash Screen is already included. You no need to Add any code for it.If you want to make changes to it you can do it in app.json

"splash": {
      "image": "./App/Images/My_Splash.png",
      "resizeMode": "cover",
      "backgroundColor": "#000000"
    },

For Navigation :React Navigation

Expo: Expo Splash Screen

Answer 4

Did you try this library? https://github.com/bamlab/generator-rn-toolbox It will create both splash and app icon for your app.