I can't integrate my react-navigation app with Redux

Question

I have done everything to try to integreate react-navigation v2 and redux like in the instructions of the docs and the example app at https://github.com/react-navigation/react-navigation/tree/master/examples/ReduxExample, but the app still doesn't work.

Here is my code:

my reducer at navReducer.js:

import { combineReducers } from 'redux';
import { NavigationActions } from 'react-navigation';

import { RootNavigator } from '../Navigator/navigator';

// Start with two routes: The Main screen, with the Login screen on top.

function nav(state = 'initialNavState', action) {
  let nextState;
  switch (action.type) {
    default:
      nextState = RootNavigator.router.getStateForAction(action, state);
      break;
  }

  // Simply return the original `state` if `nextState` is null or undefined.
  return nextState || state;
}

const AppReducer = combineReducers({
  nav,
});

export default AppReducer;

My navigator with redux integrate at navigtor.js:

// import React from 'react';
// import PropTypes from 'prop-types';
import { connect } from 'react-redux';
// import { createStackNavigator } from 'react-navigation';
import {
  reduxifyNavigator,
  createReactNavigationReduxMiddleware,
} from 'react-navigation-redux-helpers';


import AnotherScreen from '../Screens/AnotherScreen';
import HomeScreen from '../Screens/HomeScreen';
import LoginScreen from '../Screens/LoginScreen';
import MainScreen from '../Screens/Main';

import Icon from 'react-native-vector-icons/Ionicons';

import { createBottomTabNavigator } from 'react-navigation';

const middleware = createReactNavigationReduxMiddleware(
  'root',
  state => state.nav
);

const RootNavigator = createBottomTabNavigator({
   Login: {
   	screen: LoginScreen,
   	navigationOptions: {
   		tabBarLabel: 'Login',
   		tabBarIcon: ({ tintColor })=>(
   			<Icon name='md-log-in' size={30}/>
   		)
   	}
   },
   Home: {
   	screen: HomeScreen,
   	navigationOptions: {
   		tabBarLabel: 'Home',
   		tabBarIcon: ({ tintColor })=>(
   			<Icon name='md-home' size={30}/>
   		)
   	}
   },
   Main: {
   	screen: MainScreen,
   	navigationOptions: {
   		tabBarLabel: 'Application',
   		tabBarIcon: ({ tintColor })=>(
   			<Icon name='md-android' size={30}/>
   		)
   	}
   },
   Another: {
   	screen: AnotherScreen,
   	navigationOptions: {
   		tabBarLabel: 'Another',
   		tabBarIcon: ({ tintColor })=>(
   			<Icon name='md-apps' size={30}/>
   		)
   	}
   }
},{
	initialRouteName: 'Login',
    tabBarOptions: {
  		activeTintColor: '#e91e63',
  		labelStyle: {
    		fontSize: 30,
  		},
  		style: {
   			backgroundColor: 'blue',
  		},
	}
})


const AppWithNavigationState = reduxifyNavigator(RootNavigator, 'root');

const mapStateToProps = state => ({
  state: state.nav,
});

const AppNavigator = connect(mapStateToProps)(AppWithNavigationState);
export { RootNavigator, AppNavigator, middleware };

and my App.js:

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';

import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';

import NavReducer from './app/Reducers/navReducer';
import { AppNavigator, middleware } from './app/Navigator/navigator';

const store = createStore(NavReducer, applyMiddleware(middleware));

export default class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <AppNavigator />
      </Provider>
    );
  }
}

but every time I reload it log error:

C:\newApp\awesomePro…ptionsManager.js:65 ReferenceError: React is not defined

This error is located at:
    in TabBarIcon (at BottomTabBar.js:84)
    in RCTView (at View.js:71)
    in View (at BottomTabBar.js:19)
    in TouchableWithoutFeedback (at BottomTabBar.js:18)
    in TouchableWithoutFeedbackWrapper (at BottomTabBar.js:141)
    in RCTView (at View.js:71)
    in View (at createAnimatedComponent.js:147)
    in AnimatedComponent (at index.js:128)
    in SafeView (at withOrientation.js:50)
    in withOrientation (at BottomTabBar.js:128)
    in TabBarBottom (at withDimensions.js:32)
    in withDimensions(TabBarBottom) (at createBottomTabNavigator.js:60)
    in RCTView (at View.js:71)
    in View (at createBottomTabNavigator.js:76)
    in TabNavigationView (at createTabNavigator.js:127)
    in NavigationView (at createNavigator.js:57)
    in Navigator (at createNavigationContainer.js:368)
    in NavigationContainer (at reduxify-navigator.js:63)
    in NavigatorReduxWrapper (created by Connect(NavigatorReduxWrapper))
    in Connect(NavigatorReduxWrapper) (at App.js:134)
    in Provider (at App.js:133)
    in App (at renderApplication.js:35)
    in RCTView (at View.js:71)
    in View (at AppContainer.js:102)
    in RCTView (at View.js:71)
    in View (at AppContainer.js:122)
    in AppContainer (at renderApplication.js:34)

The store is created successfully, I think the only thing wrong is the AppNavigator, but I don't know what to change.

DennisFrea DennisFrea · Accepted Answer · 2018-08-03T02:42:37

You commented the import React from 'react'; on your navigtor.js so it throws React is not defined.

import React from 'react';
// import PropTypes from 'prop-types';
import { connect } from 'react-redux';
// import { createStackNavigator } from 'react-navigation';
import {
  reduxifyNavigator,
  createReactNavigationReduxMiddleware,
} from 'react-navigation-redux-helpers';


import AnotherScreen from '../Screens/AnotherScreen';
import HomeScreen from '../Screens/HomeScreen';
import LoginScreen from '../Screens/LoginScreen';
import MainScreen from '../Screens/Main';

import Icon from 'react-native-vector-icons/Ionicons';

import { createBottomTabNavigator } from 'react-navigation';

const middleware = createReactNavigationReduxMiddleware(
  'root',
  state => state.nav
);

const RootNavigator = createBottomTabNavigator({
   Login: {
    screen: LoginScreen,
    navigationOptions: {
        tabBarLabel: 'Login',
        tabBarIcon: ({ tintColor })=>(
            <Icon name='md-log-in' size={30}/>
        )
    }
   },
   Home: {
    screen: HomeScreen,
    navigationOptions: {
        tabBarLabel: 'Home',
        tabBarIcon: ({ tintColor })=>(
            <Icon name='md-home' size={30}/>
        )
    }
   },
   Main: {
    screen: MainScreen,
    navigationOptions: {
        tabBarLabel: 'Application',
        tabBarIcon: ({ tintColor })=>(
            <Icon name='md-android' size={30}/>
        )
    }
   },
   Another: {
    screen: AnotherScreen,
    navigationOptions: {
        tabBarLabel: 'Another',
        tabBarIcon: ({ tintColor })=>(
            <Icon name='md-apps' size={30}/>
        )
    }
   }
},{
    initialRouteName: 'Login',
    tabBarOptions: {
        activeTintColor: '#e91e63',
        labelStyle: {
            fontSize: 30,
        },
        style: {
            backgroundColor: 'blue',
        },
    }
})


const AppWithNavigationState = reduxifyNavigator(RootNavigator, 'root');

const mapStateToProps = state => ({
  state: state.nav,
});

const AppNavigator = connect(mapStateToProps)(AppWithNavigationState);
export { RootNavigator, AppNavigator, middleware };

I can't integrate my react-navigation app with Redux

1 Answers