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 |