Integrate React into React with React-Navigation

redux-react-nagivation-integration.md

1. Install redux $ yarn add react-redux
2. At project root folder, create folder store then create file configureStore.js in store folder:

import { createStore } from 'redux';
 
import reducers from '../reducers'
 
export default function configureStore(initialState) {
  const store = createStore(
    reducers,
    initialState
  );
  return store
}

2. Create file store.js in store folder

import configureStore from './configureStore';
 
export default  store = configureStore();

3. Create file AppWithNavigation.js in navigation folder

import React, { Component } from 'react';
import { addNavigationHelpers } from 'react-navigation';
import { connect } from 'react-redux';
 
import Routes from '../utils/Routes';
 
import RootNavigator from './RootNavigator';
 
const App = ({ dispatch, nav }) => {
 
  return (
    <RootNavigator
      onNavigationStateChange={Routes.onNavigationStateChange}
    />
  );
};
 
const mapStateToProps = state => ({
  nav: state.nav
});
 
const AppWithNavigation = connect(mapStateToProps)(App);
 
export default AppWithNavigation;

4. At project root, create folder root, and create Root.android.js and Root.ios.js

import React, { Component } from 'react';
import { View } from 'react-native';
import SplashScreen from 'react-native-splash-screen';
import { Provider } from 'react-redux';

import AppWithNavigation from '../navigation/AppWithNavigation';
import store from '../store/store'
 
export default class Root extends Component {
  render() {
    const { isReady } = this.state;
    return (
      <Provider store={store}>
        <View style={styles.container}>
          <AppWithNavigation />
        </View>
      </Provider>
    );
  }
}
 
const styles = {
  container: {
    flex: 1,
    backgroundColor: '#fff'
  },
};

5. At project root, create folder reducers then create file nav.js in reducers folder

import { NavigationActions } from 'react-navigation';
import RootNavigator from '../navigation/RootNavigator';
 
const initialSate = RootNavigator.router.getStateForAction(NavigationActions.init());
 
export const nav = (state = initialSate, action) => {
  const nextState = RootNavigator.router.getStateForAction(action, state);
  return nextState || state;
};

6. Create index.js in reducers folder

import { combineReducers } from 'redux';
 
import {nav} from './nav';
 
export default combineReducers({
  nav,
})

7. In index.ios.js and index.android.js change content to below

import { AppRegistry } from 'react-native';

import Root from './root/Root';

AppRegistry.registerComponent('rnvpa', () => Root);