react-native-navigation redux middleware example

actions.js

import { createAction } from 'redux-actions';
import {
  NAVIGATION_PUSH,
  NAVIGATION_POP,
  NAVIGATION_RESET_TO,
  NAVIGATION_POP_TO_ROOT
} from './actions';

export const push = createAction(NAVIGATION_PUSH);
export const pop = createAction(NAVIGATION_POP);
export const resetTo = createAction(NAVIGATION_RESET_TO);
export const popToRoot = createAction(NAVIGATION_POP_TO_ROOT);

navigation.js

import {
  NAVIGATION_PUSH,
  NAVIGATION_POP,
  NAVIGATION_RESET_TO,
  NAVIGATION_POP_TO_ROOT
} from './actions';

let currentNavigator = null;

export function setNavigator(navigator) {
  currentNavigator = navigator;
}

function push(action) {
  currentNavigator.push(action.payload);
}

function pop(action) {
  currentNavigator.pop(action.payload);
}

function resetTo(action) {
  currentNavigator.resetTo(action.payload);
}

function popToRoot() {
  currentNavigator.popToRoot();
}

export default function navigationMiddleware(store) {
  return next => action => {
    switch (action.type) {
      case NAVIGATION_PUSH:
        push(action);
        break;

      case NAVIGATION_POP:
        pop(action);
        break;

      case NAVIGATION_RESET_TO:
        resetTo(action);
        break;

      case NAVIGATION_POP_TO_ROOT:
        popToRoot();
        break;
    }

    next(action);
  }
}

rootScreen.js

import React, { Component } from 'react';
import hoistStatics from 'hoist-non-react-statics';

import { setNavigator } from './navigation';
import getDisplayName from './getDisplayName'; // Copied from react-redux source

/**
 * This HOC is meant to decorate any screen component that is at the
 * root of the navigation stack. It uses its constructor to set the global
 * navigation object. Having a global navigation object that lives in a
 * redux middleware allows us to control navigation by dispatching redux
 * actions.
 */
export default function rootScreen(WrappedComponent) {
  class RootScreen extends Component {
    constructor(props) {
      super(props);
      const { navigator } = props;
      setNavigator(navigator);
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  }

  const hoisted = hoistStatics(RootScreen, WrappedComponent);
  hoisted.displayName = 'RootScreen(' + getDisplayName(WrappedComponent) + ')';
  return hoisted;
}

screens.js

import { Navigation } from 'react-native-navigation';

import SomeScreen from './SomeScreen';
import rootScreen from './rootScreen';

export function registerScreens(store, Provider) {
  Navigation.registerComponent(
    'prefix.SomeScreen',
    () => rootScreen(SomeScreen),
    store,
    Provider
  );
}