mobx-navigation (react-native)

simplified the integration of mobx on top of react-navigation.

• Support android hardware back button automatically
• Using render prop for more customization in the future

Installation

yarn add mobx-navigation

make sure you have mobx, mobx-react and react-navigation installed.

Usage

There is a MobxNavigationStore which keeps track of navigation state and there is MobxNavigation which is a render prop react component.

first you defined your routes in react-navigation style and save it in routes.js file

// @flow

import React, { Component } from 'react'
import { View, Text } from 'react-native'
import { StackNavigator } from 'react-navigation'

class IndexScreen extends Component<{}, {}> {
  render() {
    return (
      <View>
        <Text>Index Screen</Text>
      </View>
    )
  }
}

class MainScreen extends Component<{}, {}> {
  render() {
    return (
      <View>
        <Text>Main Screen</Text>
      </View>
    )
  }
}

const MainRouter = StackNavigator({
  index: {
    screen: IndexScreen
  },
  main: {
    screen: MainScreen
  }
})

export default MainRouter

then wire everything in your main component

// @flow

import React, { Component } from 'react'
import { NavigationActions } from 'react-navigation'

import { MobxNavigation, MobxNavigationStore } from 'mobx-navigation'

import MainRouter from './routes'

// instantiating your mobx navigation store
// and pass the react-navigation routes and your default route.
const mobxNavigationStore = new MobxNavigationStore(MainRouter, 'index')

export default class App extends Component<{}, {}> {
  gotoMain = () => {
    mobxNavigationStore.dispatch(
      NavigationActions.navigate({
        routeName: 'main'
      })
    )
  }

  componentDidMount() {
    setTimeout(this.gotoMain, 3000)
  }

  render() {
    return (
      <MobxNavigation store={mobxNavigationStore}>
        {navigation => <MainRouter navigation={navigation} />}
      </MobxNavigation>
    )
  }
}

Credit

thank Paul Xue for your great article.