Trying to integrate Redux into React Navigation - react-native

Question

I'm trying to integrate Redux, into an existing React Native application who use React Navigation.
The dependencies in package.json file are:
"react": "^16.0.0",
"react-native": "^0.51.0",
"react-native-smart-splash-screen": "^2.3.5",
"react-navigation": "^1.0.0-rc.2",
"react-navigation-redux-helpers": "^1.0.0",
My code are:
./App.js
import React, { Component } from "react"
import { AppRegistry, StyleSheet, View } from "react-native"
import { Provider } from "react-redux"
import { createStore } from "redux"
import SplashScreen from "react-native-smart-splash-screen"
import AppReducer from "./reducers/AppReducer"
import AppWithNavigationState from "./navigators/AppNavigator"
class App extends Component {
store = createStore(AppReducer);
componentWillMount() {
SplashScreen.close({
animationType: SplashScreen.animationType.scale,
duration: 850,
delay: 500,
});
}
render() {
return (
<Provider store={store}>
<AppWithNavigationState />
</Provider>
)
}
}
AppRegistry.registerComponent("App", () => App)
export default App
./navigators/AppNavigator.js
import { addNavigationHelpers, StackNavigator } from "react-navigation"
import { connect } from "react-redux"
import StackLoading from "../screens/app/StackLoading"
import StackAuth from "../screens/auth/StackAuth"
export const AppNavigator = StackNavigator({
Login: { screen: StackAuth },
Main: { screen: StackLoading },
},
{
headerMode: 'screen',
header: null,
title: 'MyApp',
initialRouteName: 'Login',
})
const AppWithNavigationState = ({ dispatch, nav }) => (
<AppNavigator
navigation={addNavigationHelpers({ dispatch, state: nav })}
/>
);
const mapStateToProps = state => ({
nav: state.nav,
})
export default connect(mapStateToProps)(AppWithNavigationState)
./reducers/AppReducer.js
import { combineReducers } from 'redux';
import NavReducer from './NavReducer';
const AppReducer = combineReducers({
nav: NavReducer,
});
export default AppReducer;
./reducers/AppReducer.js
import { combineReducers } from 'redux';
import { NavigationActions } from 'react-navigation';
import { AppNavigator } from '../navigators/AppNavigator';
const router = AppNavigator.router;
const mainNavAction = AppNavigator.router.getActionForPathAndParams('Main')
const mainNavState = AppNavigator.router.getStateForAction(mainNavAction);
const loginNavAction = AppNavigator.router.getActionForPathAndParams('Login')
const initialNavState = AppNavigator.router.getStateForAction(loginNavAction, mainNavState)
function nav(state = initialNavState, action) {
let nextState;
switch (action.type) {
case 'Login':
nextState = AppNavigator.router.getStateForAction(
NavigationActions.back(),
state
);
break;
case 'Logout':
nextState = AppNavigator.router.getStateForAction(
NavigationActions.navigate({ routeName: 'Login' }),
state
);
break;
default:
nextState = AppNavigator.router.getStateForAction(action, state);
break;
}
// Simply return the original `state` if `nextState` is null or undefined.
return nextState || state;
}
const initialAuthState = { isLoggedIn: false };
function auth(state = initialAuthState, action) {
switch (action.type) {
case 'Login':
return { ...state, isLoggedIn: true };
case 'Logout':
return { ...state, isLoggedIn: false };
default:
return state;
}
}
const AppReducer = combineReducers({
nav,
auth,
});
export default AppReducer;
I have used various approaches following as many guides. The error that I continue to have is this:
ReactNativeJS: undefined is not an object (evaluating
'state.routes[childIndex]')
ReactNativeJS: Module AppRegistry is not a
registered callable module (calling runApplication)
Please help me :\

Answer 1

PrimaryNavigator is my top level navigator.
I am using some helper functions that disables pushing the same component multiple times to the stack which is a common problem in react-navigation.
My helper functions respectively ;
function hasProp(obj, prop) {
return Object.prototype.hasOwnProperty.call(obj, prop);
}
// Gets the current route name
function getCurrentRouteName(nav) {
if (!hasProp(nav, 'index') || !hasProp(nav, 'routes')) return nav.routeName;
return getCurrentRouteName(nav.routes[nav.index]);
}
function getActionRouteName(action) {
const hasNestedAction = Boolean(
hasProp(action, 'action') && hasProp(action, 'type') && typeof action.action !== 'undefined',
);
const nestedActionWillNavigate = Boolean(hasNestedAction && action.action.type === NavigationActions.NAVIGATE);
if (hasNestedAction && nestedActionWillNavigate) {
return getActionRouteName(action.action);
}
return action.routeName;
}
And then setting the nav reducer :
const initialState = PrimaryNavigator.router.getStateForAction(
NavigationActions.navigate({ routeName: 'StartingScreen' })
);
const navReducer = (state = initialState, action) => {
const { type } = action;
if (type === NavigationActions.NAVIGATE) {
// Return current state if no routes have changed
if (getActionRouteName(action) === getCurrentRouteName(state)) {
return state;
}
}
// Else return new navigation state or the current state
return PrimaryNavigator.router.getStateForAction(action, state) || state;
}
Finally, you can combine navReducer inside your combineReducers function.
Please let me know if my answer does not help your case

Answer 2

AppRegistry.registerComponent("App", () => App) should happen in index.ios.js or index.android.js
your index.ios.js file should look like
import App from './src/App';
import { AppRegistry } from 'react-native';
AppRegistry.registerComponent('your_app_name', () => App);