redirectOnAuthState.js

import React, { Component } from 'react';
import { NavigationActions } from 'react-navigation';
import { reaction } from 'mobx';
import { inject, observer } from 'mobx-react';

const navigateWithReset = (navigation, targetRoute) => {
  const resetAction = NavigationActions.reset({
    index: 0,
    actions: [NavigationActions.navigate({ routeName: targetRoute })],
  });

  navigation.dispatch(resetAction);
};

const redirectOnAuthState = (
  state,
  targetRoute,
  resetNavigationStack,
) => (WrappedComponent) => {
  class AuthorizedRedirectWrapper extends Component {
    componentDidMount() {
      this.checkAuthorization(this.props.userStore.authorized);

      this.authChangeReactionDisposer = reaction(
        () => this.props.userStore.authorized,
        this.checkAuthorization.bind(this),
      );
    }

    checkAuthorization(authorized) {
      if (state === 'authorized' ? authorized : !authorized) {
        if (resetNavigationStack) {
          navigateWithReset(this.props.navigation, targetRoute);
        } else {
          this.props.navigation.navigate(targetRoute);
        }
      }
    }

    render() {
      // filter unrelated props
      const { userStore, ...props } = this.props;

      return <WrappedComponent {...props} />;
    }
  }

  return inject('userStore')(observer(AuthorizedRedirectWrapper));
};

export default redirectOnAuthState;