Navigation in React Native

React Native Navigation Android

React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React.

What I am going to show in this article is how easy it is to create a simple navigation flow in React Native.

Requirements

Please, install:
Brew

Xcode 7.0 or higher

Node.js

Highly Recommended

Watchman: tool by Facebook for watching changes in the filesystem. It is recommended you install it for better performance.

brew install watchman

Flow: for static typechecking of your React Native code (when using Flow as part of your codebase).

brew install flow

Sublime Text Editor:

Download Sublime Text 3

Getting Started

If you already have Brew and Node.js installed, you just need to install the React Native command line tools:

npm install -g react-native-cli

Now let’s create a new project:

react-native init ReactNativeNavigationExample
cd ReactNativeNavigationExample
react-native run-ios

React Native iOS Simulator

Could not connect to development server? Check this: ERROR watchman–no-pretty get-sockname returned with exit code null and/or Can’t link pcre thru brew in Mac os yosemite

In this tutorial we’ll be building a simple React Native Navigation example. Now that you successfully started the project, let’s modify it, open index.ios.js in your text editor of choice (e.g. Sublime Text).

index.ios.js

class ReactNativeNavigationExample extends Component {    
    render() {        
        return (        
            <View style={styles.container}>            
            <Text style={styles.welcome}>                
            Hello world!            
            </Text>        
            </View>        
        );     
}}

Hit ⌘-R in your iOS simulator to reload the app and see your change!

React Native iOS Hello World!

SceneConfig

First things first, add the Navigator and the TouchableOpacity import to the top of the file:

import { AppRegistry, StyleSheet, Text, View, Navigator,    TouchableOpacity } from 'react-native';

The NavigatorSceneConfigs Object lets you customize your scene navigation. Now add the SceneConfig:

var SCREEN_WIDTH = require('Dimensions').get('window').width;
var BaseConfig = Navigator.SceneConfigs.FloatFromRight;
var CustomLeftToRightGesture = Object.assign({}, 
    BaseConfig.gestures.pop, {    
    // Make it snap back really quickly after canceling pop                                snapVelocity: 8,    
    // Make it so we can drag anywhere on the screen    edgeHitWidth: SCREEN_WIDTH,});
    var CustomSceneConfig = Object.assign({}, BaseConfig, {    
    // A very tighly wound spring will make this transition fast    springTension: 100,    
springFriction: 1,    
// Use our custom gesture defined above    
gestures: { pop: CustomLeftToRightGesture, }}); 
Pages

We’re going to add two Pages to our Navigation Flow.

var PageOne = React.createClass({
 _handlePress() { this.props.navigator.push({ id: 2, });
 },
 render() { return ( < View style = {
 [styles.container, {
 backgroundColor: 'green'
 }]
 } > 
< Text style = {
 styles.welcome
 } > Greetings! < /Text> 
<TouchableOpacity onPress={this._handlePress}> 
<View style={{paddingVertical: 10, paddingHorizontal: 20, backgroundColor: 'black'}}> <Text style={styles.welcome}>Go to page two</Text > < /View> </TouchableOpacity > < /View> ) },});

var PageTwo = React.createClass({ _handlePress() { this.props.navigator.pop(); }, render() { return ( 
<View style={[styles.container, {backgroundColor: 'purple'}]}> 
<Text style={styles.welcome}>This is page two!</Text > 
< TouchableOpacity onPress = {
 this._handlePress
 } > < View style = {
 {
 paddingVertical: 10,
 paddingHorizontal: 20,
 backgroundColor: 'black'
 }
 } > 
< Text style = {
 styles.welcome
 } > Go back < /Text> </View > < /TouchableOpacity> </View > )
 },
});

Now modify the ReactNativeNavigationExample object render function so that we have 2 pages:

class ReactNativeNavigationExample extends Component {
 _renderScene(route, navigator) {
 if (route.id === 1) { return <PageOne navigator = { navigator } /> } 
 else if (route.id === 2) { return <PageTwo navigator={navigator} / > }
 }
 _configureScene(route) {
 return CustomSceneConfig;
 }
 render() {
 return ( < Navigator initialRoute = {
 {
 id: 1,
 }
 }
 renderScene = {
 this._renderScene
 }
 configureScene = {
 this._configureScene
 }
 /> ); }}

And add some color:

const styles = StyleSheet.create({
 container: {
 flex: 1,
 justifyContent: 'center',
 alignItems: 'center',
 backgroundColor: '#F5FCFF',
 },
 welcome: {
 fontSize: 20,
 textAlign: 'center',
 margin: 10,
 color: 'white',
 }
});

That’s it!

React Native Navigation Example - Page 1

React Native Navigation Example - Page 2

Demo code

Download the demo code from github:
React Native Navigation Example

References

React Native Github

React Native Docs

React Native Navbar

React Native Navigation Demo

React Native Transparent Bar

React Native Custom Navigation

Keep up with my guides and how-tos like this by liking my Facebook Page. If you have any questions about working with React Native, please join the discussion below!