React-native Navigation

Question

I have created 2 Screens Screen1.js and Screen2.js Screen1.js will be splashscreen while Screen2.js will be loginscreen. What i want to do is to open Screen2.js 5 seconds after Screen1.js is render. I tried to import {Navigation} from 'react-native' but it is not anymore on this library. Any idea how can i do it?

Answer 1

If you'd like to use navigation in react-native , the project developers recommend you use react-navigation . I've used it, and it works just fine. Say for example you'd like a tab bar application. You can import TabNavigator from react-navigation and use it:

import { TabNavigator } from 'react-navigation'
...

const MyApp = TabNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  Notifications: {
    screen: MyNotificationsScreen,
  },
}, {
  tabBarOptions: {
    activeTintColor: '#e91e63',
  },
});

More examples and docs: https://reactnavigation.org/docs/navigators/tab

UPDATE:

As there is update of react-navigation library which is v4. In v4 you can create a tab in different ways like BottomTabNavigator, MaterialBottomTabNavigator and MaterialTopTabNavigator. So in react-navigation v4 the above code looks like this:

import { createBottomTabNavigator } from 'react-navigation-tabs';
...

const MyApp = createBottomTabNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  Notifications: {
    screen: MyNotificationsScreen,
  },
}, {
  tabBarOptions: {
    activeTintColor: '#e91e63',
  },
});

For more details docs: https://reactnavigation.org/docs/en/tab-based-navigation.html