react-navigation-mobx-helpers

React-Navigation bindings for MobX.

Installation

npm install react-navigation-mobx-helpers --save

Usage

import React from 'react';
import { Provider, inject, observer } from 'mobx-react';
import { StackNavigator } from 'react-navigation';
import NavigationStore from 'react-navigation-mobx-helpers';

const RootNavigator = StackNavigator(RouteConfigs);

const rootNavigation = new NavigationStore();

class Root extends React.Component {
  render() {
    return (
      <Provider rootNavigation={rootNavigation}>
        <App />
      </Provider>
    );
  }
}

@inject('rootNavigation')
@observer
class App extends React.Component {
  render() {
    const { rootNavigation } = this.props;
    return <RootNavigator ref={rootNavigation.createRef} />;
  }
}

API

Action Parameter Description
createRef ref: React.Component Save an instance of navigation to store
dispatch action: NavigationAction Send an action to router
getParam paramName: string, fallback?: NavigationParams Get a specific param with fallback
setParams newParams: NavigationParams Make changes to route's params
navigate { routeName: string, params?: NavigationParams, action?: NavigationAction, key?: string } OR routeName: string, params?: NavigationParams, action?: NavigationAction Go to another screen, figures out the action it needs to take to do it
push routeName: string, params?: NavigationParams, action?: NavigationAction Navigate forward to new route in stack
replace routeName: string, params?: NavigationParams, action?: NavigationAction Replace the current route with a new one
goBack routeKey?: string \| null Close active screen and move back in the stack
pop n?: number, params?: { immediate?: boolean } Go back in the stack
popToTop params?: { immediate?: boolean } Go to the top of the stack

GitHub