React Native Router (v2.x)

Router for React Native based on exNavigator

Features

• Define your screens ("routes") and animation transitions in one central location
• Use simple syntax to call transitions anywhere in your code (e.g. Actions.login)
• Eliminates the need to pass navigator objects to your screens
• Use a Schema to define common properties for a group of screens. For example, you can define a "modal" Schema for screens that animate from the bottom of the screen.
• Ability to show/hide navigation bar (see limitations)
• Support for managing a tab bar, using react-native-tabs (see demo)
• Support for nested navigators. For example, each tab can have its own navigator, nested in a root navigator. Transition actions will automatically use the top navigator.

Installation

npm i react-native-router-flux --save

Usage

1. In top-level index.js, define a Router and child Route elements for your screens.
   • If some of your screens have common attributes, consider defining a Schema element to reduce repetition
2. In any app screen:
   • import {Actions} from 'react-native-router-flux'
   • Actions.ACTION_NAME(PARAMS) will call appropriate action and params will be passed to the route

Configuration

Router:

Route:

Schema:

Example

import React, {AppRegistry, Navigator, StyleSheet, Text, View} from 'react-native'
import Launch from './components/Launch'
import Register from './components/Register'
import Login from './components/Login'
import Login2 from './components/Login2'
import {Router, Route, Schema, Animations, TabBar} from 'react-native-router-flux'
import Error from './components/Error'
import Home from './components/Home'
import TabView from './components/TabView'

class TabIcon extends React.Component {
    render(){
        return (
            <Text style={{color: this.props.selected ? 'red' :'black'}}>{this.props.title}</Text>
        );
    }
}

export default class Example extends React.Component {
    render() {
        return (
            <Router hideNavBar={true}>
                <Schema name="modal" sceneConfig={Navigator.SceneConfigs.FloatFromBottom}/>
                <Schema name="default" sceneConfig={Navigator.SceneConfigs.FloatFromRight}/>
                <Schema name="withoutAnimation"/>
                <Schema name="tab" type="switch" icon={TabIcon} />

                <Route name="launch" component={Launch} initial={true} wrapRouter={true} title="Launch"/>
                <Route name="register" component={Register} title="Register"/>
                <Route name="home" component={Home} title="Replace" type="replace"/>
                <Route name="login" schema="modal">
                    <Router>
                        <Route name="loginModal" component={Login} title="Login" schema="modal"/>
                        <Route name="loginModal2" component={Login2} title="Login2"/>
                    </Router>
                </Route>
                <Route name="error" component={Error} title="Error"  type="modal"/>
                <Route name="register2" component={Register} title="Register2"  schema="withoutAnimation"/>
                <Route name="tabbar">
                    <Router footer={TabBar} hideNavBar={true} tabBarStyle={{borderTopColor:'#00bb00',borderTopWidth:1,backgroundColor:'white'}}>
                        <Route name="tab1" schema="tab" title="Tab #1" defaultRoute='tab1_1'>
                            <Router>
                                <Route name="tab1_1" component={TabView} title="Tab #1_1" />
                                <Route name="tab1_2" component={TabView} title="Tab #1_2" />
                            </Router>
                        </Route>
                        <Route name="tab2" schema="tab" title="Tab #2" hideNavBar={true}>
                            <Router onPop={()=>{console.log("onPop is called!"); return true} }>
                                <Route name="tab2_1" component={TabView} title="Tab #2_1" />
                                <Route name="tab2_2" component={TabView} title="Tab #2_2" />
                            </Router>
                        </Route>
                        <Route name="tab3" schema="tab" title="Tab #3" component={TabView} hideTabBar={true}/>
                        <Route name="tab4" schema="tab" title="Tab #4" component={TabView} />
                        <Route name="tab5" schema="tab" title="Tab #5" component={TabView} />
                    </Router>
                </Route>
            </Router>
        );
    }
}

components/Launch.js (initial screen)

import React, {View, Text, StyleSheet, TouchableHighlight} from 'react-native'
import Button from 'react-native-button'
import {Actions} from 'react-native-router-flux'

class Launch extends React.Component {
    render(){
        return (
            <View style={styles.container}>
                <Text>Launch page</Text>
                <Button onPress={()=>Actions.login({data:"Custom data", title:'Custom title' })}>Go to Login page</Button>
                <Button onPress={Actions.register}>Go to Register page</Button>
                <Button onPress={Actions.register2}>Go to Register page without animation</Button>
                <Button onPress={Actions.error('error message')}>Show error popup</Button>
                <Button onPress={Actions.tabbar}>Go to TabBar page</Button>
            </View>
        );
    }
}

var styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'transparent',
    }
});

module.exports = Launch;

Modals

To display a modal use type="modal" for your route components. Modal type inserts its 'component' after navigator component. See the Examples folder for more details.

Note that ReactNativeRouterFlux will not provide animations for modals and you'll need to animate the modal yourself (or use a library)

Sidebar/Drawer support

You can easily configure react-native-router-flux to handle a sidebar/drawer for specific routes:
1. Create a sidebar/drawer component (you can use both react-native-drawer and react-native-side-menu) and pass its router props to its children:

<DrawerLayout>
   {React.Children.map(children, c => React.cloneElement(c, {route: this.props.route}))}
</DrawerLayout>

2. In you router component add the sidebar/drawer and nested routes following this pattern:

<Router>
  <Route name="without-drawer"/>
  <Route name="main">
   <Drawer>
      <Router>
        <Route name="with-drawer-a"/>
        <Route name="with-drawer-b"/>
      </Router>
    </Drawer>
  </Route>
</Router>

There is an example which is worked together with react-native-drawer.

Also here is another complete example of a working drawer using a common app with: - A session screen that just checks if the user is already logged-in on startup (SessionScreen) - An auth screen that handles signin/signup (AuthScreen) - Many other screens that show the true content of the app, all using the sidebar

SideDrawer.js (I'm using 'react-native-drawer')

import Drawer from 'react-native-drawer'

class SideDrawer extends React.Component {
  render() {
    return (
      <Drawer
        type="overlay"
        content={<SideDrawerContent />}
        tapToClose={true}
        openDrawerOffset={0.2} 
        panCloseMask={0.2}
        closedDrawerOffset={-3}
        styles={{ drawer: drawerStyle, main: mainStyle }}
        tweenHandler={(ratio) => ({ main: { opacity: (2 - ratio) / 2 } })}
      >
        {React.Children.map(this.props.children, c => React.cloneElement(c, {
          route: this.props.route
        }))}
      </Drawer>
    )
  }
}

Router.js ```javascript const hideNavBar = Platform.OS === 'android' const paddingTop = Platform.OS === 'android' ? 0 : 8

export default class Routes extends React.Component { render() { return (

    <Route schema='boot' component={SessionScreen} name='session' initial={true} />
    <Route schema='boot' component={AuthScreen} name='auth' />

    <Route name='main' hideNavBar={true} type='reset'>
      <SideDrawer>
        <Router
          sceneStyle={styles.scene}
          navigationBarStyle={styles.navigationBar}
          titleStyle={styles.title}
          barButtonIconStyle={styles.barButtonIcon}
          barButtonTextStyle={styles.barButtonText}
        >
          <Route schema='main' component={PlaceScreen} name='place' title='Places' />
          <Route schema='main' component={PaymentScreen} name='payment' title='Payment' header={Toolbar} />
        </Router>