Stacknavigator with redux without navigation prop in redux

1682 views react-native
10

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 />
        </Provider>
    );
  }
}

but when i tried to use this approach i got the

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

error.

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

8

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 {
  render(){
    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?

JD

Please login first before posting an answer.