React Navigation bindings for MobX

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