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.
