CODEWITHSUNDEEP
reactjsreact-nativereact-routerreact-native-navigation
Endar
Endar

Reputation: 73

React-native Navigation

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?

Upvotes: 1

Views: 856

Answers (1)

Ulises Giacoman
Ulises Giacoman

Reputation: 532

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

Upvotes: 2

Related Questions