RootContainer.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { addNavigationHelpers } from 'react-navigation';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
// import DeviceInfo from 'react-native-device-info';
import Orientation from 'react-native-orientation';
import { ActionCreators } from '../redux/actions';
import AppNavigation from './AppNavigation';
import InitializingScreen from './InitializingScreen';

class RootContainer extends Component {
  constructor(props) {
    super(props);

    this.state = {
      initialized: false,
    };
  }

  componentWillMount() {
    this._initialize().then(() => this.setState({ initialized: true }));
  }

  componentDidMount() {
    Orientation.lockToPortrait();
    // Orientation.lockToLandscape();
    // Orientation.unlockAllOrientations();
    Orientation.addOrientationListener(this._orientationDidChange);
  }

  componentWillUnmount() {
    Orientation.getOrientation((err, orientation) => console.log(`Current Device Orientation: ${orientation}`));
    Orientation.removeOrientationListener(this._orientationDidChange);
  }

  _initialize = () => {
    const {
      refreshAccessToken,
      getMyAccount,
      navigateTo,
      auth = {},
    } = this.props;

    const { credential = {}, isSignedIn = false } = auth;
    const { username, password, deviceId } = credential;

    if (isSignedIn) {
      return refreshAccessToken(username, password, deviceId)
        .then(getMyAccount)
        .then(() => navigateTo('Employee'))
        .catch(error => { }); // ignore the error
    }

    return Promise.resolve();
  }

  _orientationDidChange = orientation => {
    if (orientation === 'LANDSCAPE') {
      // do something with landscape layout
    } else {
      // do something with portrait layout
    }
  }

  render() {
    const { dispatch, nav, } = this.props;
    const { initialized } = this.state;
    return initialized ?
      <AppNavigation navigation={addNavigationHelpers({ dispatch, state: nav })} /> :
      <InitializingScreen />;
  }
}

RootContainer.propTypes = {
  dispatch: PropTypes.func,
  refreshAccessToken: PropTypes.func,
  getMyAccount: PropTypes.func,
  navigateTo: PropTypes.func,
  nav: PropTypes.objectOf(PropTypes.any),
  auth: PropTypes.objectOf(PropTypes.any),
};

RootContainer.defaultProps = {
  dispatch: () => {},
  refreshAccessToken: () => {},
  getMyAccount: () => {},
  navigateTo: () => {},
  nav: {},
  auth: {},
};

function mapStateToProps({ nav, auth }) {
  return {
    nav,
    auth
  };
}

function mapDispatchToProps(dispatch) {
  const {
    refreshAccessToken,
    getMyAccount,
    navigateTo
  } = bindActionCreators(ActionCreators, dispatch);
  return {
    dispatch,
    refreshAccessToken,
    getMyAccount,
    navigateTo
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(RootContainer);