Getting smart with React Navigation

Getting smart with React Navigation

One of the most difficult thing to start with React Native App is choosing a router that perfectly fits our application 😛 . Yes there are a lot of routers and we tried many as well - at the end we came to the conclusion that ReactNavigation by React community is better than every other router.

It is smooth and fluid. This ReactNavigation router is easy to use and provides good expirence. This provides component build for both iOS and Android which also provides a native feel. No router provides such a native feel. And this built-in component is highly customizable. As we can create our navigator with ReactNavigation, this router is highly is extensible.

Types of Navigators React Navigation

There are three types of navigator in ReactNavigation. Each one does their own function. All three Navigators are important to an application

  1. Stack Navigator - Stack Navigator provides transition between screen were each screen is placed over Stack.
  2. Tab Navigator - Tab Navigator provides Tab navigation to Application.
  3. Drawer Navigator - Drawer Navigation provides Sidebar navigation to application.

Here beauty is you can integrate any navigator with heavy customization and it works flawlessly.

How to use

Application route must be a Stack navigator where you can use any navigator inside stack navigator. StackNavigatorConfig,

StackNavigator(RouteConfigs, StackNavigatorConfig)

where RouteConfigs is for mapping route name to a route config where this route name tells the navigator which one to present. StackNavigatorConfig provides options to route configs - where you can pass default params for all screens, initial route, provide paths that set route configs.

import { StackNavigator } from 'react-navigation';
import Login from './Login';
import Home from './Home';
import Profile from './Profile';


Const App:StackNavigator(
  {
    Login: {
      screen: Login,
      path: 'login'
    },
    Home: {
      screen: Home,
      path: 'home'
    },
    Profile: {
      screen: Profile,
      path: 'profile'
    },
  },{
    initialRouteName: 'Login',
    initialRouteParams: {login: true},
    headerMode: 'none'
  }
);


const prefix:Platform.OS == 'android' ? 'AppName://AppName/' : 'AppName://';
export default App:() => <App uriPrefix={prefix} />;

Here the path inside the route defines deep-linking your application. You need to configure default URL scheme for both Android and IOS. I purposely use headerMode none. If you want to use header it has lot of params for customization.

Basic usages in Stack navigators Stack Navigator defenition:

Navigation.navigate(RouteName, RouteParams)

For example

this.props.navigation.navigate('Home', { username: 'MS Dhoni' })

You can access the params in from another screen by

 var username:this.props.navigation.state.params.username;

You can also pass a function as parameter this will be useful if you want change the content in the previous page.

//Home page
changeName(name) {


}


goToProfile() {
  this.props.navigation.navigate('Profile',{changeName: this.changeName.bind(this)})
}
//Profile page
nameChanged() {
  var userName: "MSD";//user changing his name shuld be reflected in previous screen


  this.props.navigation.goBack();
  this.props.navigation.state.params.changeName(userName);
}

What if you want reset a screen over another screen

this.props.navigation.reset('Home', { username: 'MS Dhoni' })

Here reset is used instead of navigate. Resetting a screen over another screen will reset current screen to the top of stack.

What if you want go back 2 or 3 previous screens behind

this.props.navigation.pop(n)

where n is the number of screens;

Basic usages in Tab navigators

This navigator provides Tab like navigations.

Tab Navigator Defenition:

StackNavigator(RouteConfigs, StackNavigatorConfig)

Here the RouteConfigs is same as the Stack Navigator and StackNavigatorConfig is for customizing TabBar.

for Example

import Career from './Career';
import Statistics from './Statistics';
import Acheivements from './Acheivements';


export default Profile:TabNavigator(
  {
    Career: {
      screen: Career,
    },
    Statistics: {
      screen: Statistics,
    },
    Acheivements: {
      screen: Acheivements,
    },
  },{
    initialRouteName: 'Career',
    tabBarPosition: 'bottom',
    animationEnabled: true,
    tabBarOptions: {
      activeTintColor: 'blue',
      inactiveTintColor: '#fff',
      showIcon: true,
      showLabel: true,
      style: {
        // customize style
      },
      labelStyle: {
        // customize label style
      },
      tabStyle: {
        //customize tab style
      },
      iconStyle: {
        //customize label icon  style
      }
    },
  }
);

Here you can customize respective tab at the respective styles and in respective tabbarOptions. You can also customize selected screens in tabBar at respective classes.

//Career page
static navigationOptions:{
  tabBarLabel: 'career',
  header: null,
  gesturesEnabled: true,
  tabBarIcon: ({ tintColor }) => (
    <Image
      source={require('user/careerImage.png')}
      style={[{tintColor: tintColor}]}
    />
  ),
};

Basic usages in Drawer Navigators

This Navigator provides sidebar to the stack navigator

Drawer Navigator Defenition:

DrawerNavigator(RouteConfigs, DrawerNavigatorConfig)

Here the RouteConfigs is same as the Stack Navigator and DrawerNavigatorConfig is for customizing Drawer’s behaviour.

import SideBar from './SideBar';


Class ProfileComponent extends Component {
  render() {
    return(
      <View>
      </View>
    )
  }
}


export default Profile:DrawerNavigator({
  Profile: {
    screen: ProfileComponent
  },
},
{
  contentComponent: ({ navigation }) => (
    <SideBar navigation={navigation} />
  ),
}
);

Here the content component is used for providing custom side bar. Drawers can be drawn if you swipe from left for screens provided inside RouteConfigs.

If you to open drawer manually

this.props.navigation.navigate('DrawerOpen')

If you to close drawer manually

this.props.navigation.navigate('DrawerClose')

You can integrate any navigator inside any navigator for better usability.

I’d be happy to discuss any clarifications or queries you might have on Discourse.