Stacknavigator with redux without navigation prop in redux

1682 views react-native

i want to use react-navigation and redux in my app but i don't want to save the navigation property in the redux states. Instead i just want to navigate like before but have the redux states as well, i saw the following approach which i implemented into my App.js:

const mapStateToProps = state => state;
const mapDispatchToProps = dispatch => dispatch;

// need this Higher Order Component so you can pass properties through the root stack
const AppContainer = connect(mapStateToProps, mapDispatchToProps)(RootStack);

export default class App extends Component {
  render() {
    return (
        <Provider store={Store}>
          <AppContainer />

but when i tried to use this approach i got the

"you must pass a component to the function returned by connect. instead received"


Here is my StackNavigator:

import { createStackNavigator } from 'react-navigation'
import {HomeScreen} from '../screens/HomeScreen'
import {CardScreen} from '../screens/CardScreen'

const RootStack = createStackNavigator(
        Home: HomeScreen,
        Card: CardScreen,
        initialRouteName: 'Home',
        navigationOptions: {
            header: null, 

export default RootStack

answered question

1 Answer


RootStack is not a react component. You need to do something like this, I'd suggest moving to a separate file:

class AppContainer extends React.Component {
    return <RootStack />

export default connect(mapStateToProps, mapDispatchToProps)(AppContainer)

Now you can import AppContainer and pass it to your App component

posted this

Have an answer?


Please login first before posting an answer.