react-native-router-flux

You can create 'sub-scene' actions by nesting Scene elements as children of a 'base' scene that does not have a component prop. Calling the action for a child scene will update the base scene's state. This is a lightweight alternative to Redux for managing UI states like 'edit mode'.

<Scene key="myAccount" component={MyAccount} title="My Account">
    <Scene key="viewAccount" />
    <Scene key="editAccount" editMode rightTitle="Save" onRight={()=>Actions.saveAccount()} leftTitle="Cancel" onLeft={()=>Actions.viewAccount()} />
    <Scene key="saveAccount" save />
</Scene>

To use react-native-router-flux, you must first install its required native dependencies, then add the package itself to your project.

# 1. Install native dependencies
npm install react-native-screens || yarn add react-native-screens
npm install react-native-gesture-handler || yarn add react-native-gesture-handler
npm install react-native-reanimated || yarn add react-native-reanimated
npm install react-native-safe-area-context || yarn add react-native-safe-area-context
npm install @react-native-community/masked-view || yarn add @react-native-community/masked-view

# 2. Install react-native-router-flux
yarn add react-native-router-flux

To navigate from a deeply nested route to a route located in a completely different parent hierarchy, you must call the navigation actions for every parent in the target path sequentially.

For example, if you are at SubRoute3Screen and want to reach SubRoute7Screen which is nested under route2 -> subRoute5 -> subRoute7, you must call:

import { Actions as NavigationActions } from 'react-native-router-flux'

// ... inside your component
NavigationActions.route2();
NavigationActions.subRoute5();
NavigationActions.subRoute7();

If you are using nested routers (e.g., a tab bar where each tab has its own Router), modal screens must be defined in the root router to ensure they cover the entire UI (including the tab bar). To achieve this, define the modal route in the root router and set the wrapRouter={true} property on the <Route>.

<Router>
  <Schema name="modal" sceneConfig={Navigator.SceneConfigs.FloatFromBottom}/>
  <Route name="myModal" component={myModal} title="Modal" schema="modal" wrapRouter={true} />
  <Route name="tabbar">
    <Router footer={TabBar}>
      <Route name="tab1" schema="tab" title="Tab 1" component={Tab1}/>
    </Router>
  </Route>
</Router>

You can map URI paths to specific scenes in your Router using the path prop on <Scene> and the uriPrefix prop on <Router>. This allows you to handle deep links by calling the corresponding Actions method with parameters extracted from the URL.

Example Configuration:

<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 opens http://thesocialnetwork.com/profile/1234/, you can navigate to that state programmatically using: Actions.profile({ id: 1234 })

To implement a sidebar or drawer, you must create a custom drawer component that passes router props to its children using React.cloneElement. Then, nest a new <Router> inside your drawer component within your main router configuration.

1. Create the Drawer Component Ensure the drawer component clones its children and injects the route prop:

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

2. Configure the Router Nest the drawer and its internal routes within a parent <Route>:

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

To implement modals, use <Modal> as the root component in your <Router>. The first <Scene> nested within <Modal> will render as a normal scene (the root), while subsequent scenes pushed to the stack will render as popups (typically pulling up from the bottom).

Note: Currently, <Modal> does not support transparent backgrounds.

<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>

In react-native-router-flux v4, you define your application's routing structure by nesting Scene components inside a Router component. Each Scene requires a unique key and a component prop. You can also provide a title for the scene.

class App extends React.Component {
  render() {
    return (
      <Router>
        <Scene key="root">
          <Scene key="login" component={Login} title="Login"/>
          <Scene key="register" component={Register} title="Register"/>
          <Scene key="home" component={Home}/>
        </Scene>
      </Router>
    );
  }
}