• Router
• Scene
• Tabs
• Stack
• Tabbed Scene
• Drawer
• Modal
• Lightbox
• Actions
• NavigationStore
• ActionConst

The basic routing component for this router, all <Scene> components require a key prop that must be unique. A parent <Scene> must have a component as a prop as it will act as a grouping component for its children.

All properties of type React.Component will receive the same properties available on the Scene.

Can use all props listed above in <Scene> as <Tabs> is syntatic sugar for <Scene tabs={true}>.

To implement a custom tab bar, import your component and assign it to the tabBarComponent prop in <Tabs>.

// ... import components
<Tabs
  key="tabBar"
  tabBarComponent={CustomTabBar}
>
  <Scene key="tab1" component={TabOne} title="Tab1"/>
  <Scene key="tab2" component={TabTwo} title="Tab2"/>
</Tabs>

Sample code for a custom tab bar component that will navigate to scene when tab is clicked:

import React from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import { Actions } from 'react-native-router-flux';

export default class CustomTabBar extends React.Component {
  render() {
    const { state } = this.props.navigation;
    const activeTabIndex = state.index;

    return (
      <View>
        {
          state.routes.map(element => (
            <TouchableOpacity key={element.key} onPress={() => Actions[element.key]()}>
              <Text>{element.key.toUpperCase()}</Text>
            </TouchableOpacity>
          ))
        }
      </View>
    );
  }
}

Can use all props listed above in <Scene> as <LegacyTabs> is syntatic sugar for <Scene tabs={true} legacy={true}>.

A component to group Scenes together for its own stack based navigation. Using this will create a separate navigator for this stack, so expect two navbars to appear unless you add hideNavBar.

A Scene that is a direct child of Tabs and can use all props listed above in Scene,

Can use all prop as listed in Scene as <Drawer>, syntatic sugar for <Scene drawer={true}>

To implement a modal, you must use <Modal> as the root scene in your Router. The Modal will render the first scene (should be your true root scene) normally, and all following To display a modal use <Modal> as root renderer, so it will render the first element as normal scene and all others as popups (when they are pushed).

Example: In the example below, the root Scene is nested within a <Modal>, since it is the first nested Scene, it will render normally. If one were to push to statusModal, errorModal or loginModal, they will render as a Modal and by default will pull up from the bottom of the screen. It is important to note that currently the Modal does not allow for transparent backgrounds.

//... import components
<Router>
  <Modal>
    <Scene key="root">
      <Scene key="screen1" initial={true} component={Screen1} />
      <Scene key="screen2" component={Screen2} />
    </Scene>
    <Scene key="statusModal" component={StatusModal} />
    <Scene key="errorModal" component={ErrorModal} />
    <Scene key="loginModal" component={LoginModal} />
  </Modal>
</Router>

Lightbox is a component used to render a component on top of the current Scene. Unlike modal, it will allow for resizing and transparency of the background.

Example: In the example below, the root Scene is nested within a <Lightbox>, since it is the first nested Scene, it will render normally. If one were to push to loginLightbox, they will render as a Lightbox and by default will lay on top of the current Scene allowing for transparent backrounds.

//... import components
<Router>
  <Lightbox>
    <Scene key="root">
      <Scene key="screen1" initial={true} component={Screen1} />
      <Scene key="screen2" component={Screen2} />
    </Scene>

    {/* Lightbox components will lay over the screen, allowing transparency*/}
    <Scene key="loginLightbox" component={loginLightbox} />
  </Lightbox>
</Router>

This Object is the main utility is to provide navigation features to your application. Assuming your Router and Scenes are configured properly, use the properties listed below to navigate between scenes. Some offer the added functionality to pass React props to the navigated scene.

These can be used directly, for example, Actions.pop() will dispatch correspond action written in the source code, or, you can set those constants in scene type, when you do Actions.main(), it will dispatch action according to your scene type or the default one.

If you're having problem accessing Actions.ref.your_component_ref, try checking if it is undefined first before accessing it's values, so it can access the reference after the component is mounted. An example:

onEnter={() => {
if(Actions.refs.your_component_ref !== undefined) { 
  //now you can access it's properties without trouble
  Actios.refs.your_component_ref.selector.props.someCoolFunction();
  }
}}

NavigationStore is the class that Actions is an instance of. In other words, Actions is the singleton instance of NavigationStore — but if you prefer, you can instantiate a NavigationStore on your own and pass it to Router explicitly.

Type constants to determine Scene transitions, These are PREFERRED over typing their values manually as these are subject to change as the project is updated.

• Consider a web app and mobile app pairing for a social network, which might have a url https://thesocialnetwork.com/profile/1234/.
• If we were building both a web app and a mobile app, we'd like to be able to express that uri scheme across platforms with the path /profile/:id/.
• On the web, we might want React-Router to to open up our <Profile /> component with the props { id: 1234 }.
• On mobile, if we've correctly set up our Android/iOS environment to launch our application and open our RNRF <Router />, then we also want to navigate to our mobile <Profile /> scene with the params { id: 1234 }

<Router uriPrefix={'thesocialnetwork.com'}>
  <Scene key="root">
     <Scene key={'home'} component={Home} />
     <Scene key={'profile'} path={"/profile/:id/"} component={Profile} />
     <Scene key={'profileForm'} path={"/edit/profile/:id/"} component={ProfileForm} />
  </Scene>
</Router>

If a user clicks on http://thesocialnetwork.com/profile/1234/ on their device, they'll open the <Router /> and then call Actions.profile({ id: 1234 })