Search code examples
react-nativereact-native-router-flux

react-native-router-flux pass props to scenes


I have a set of scenes components that are connected through redux. I am trying to pass the props to the underling components to have access to my actions.

const scenes = Actions.create(
    <Scene key="root" hideNavBar={true} tabs={false} >
        <Scene key="tabbar" tabs={false} hideNavBar={true}>
            <Scene key='main' component={main} title="Main" initial/>
        </Scene>
     </Scene>
)

const RouterWithRedux = connect()(Router)

class AppContainer extends Component {
render() {
        return <RouterWithRedux {...this.props} scenes={scenes}/>
    }
}

function mapDispatchToProps(dispatch){
    return bindActionCreators(ActionCreators, dispatch)
}

export default connect(() => {return {}}, mapDispatchToProps)(AppContainer)

The behaviour that i am currently having is that props in my scenes are null.

<Button onPress={() => {
                    console.log(this.props.addToInventory)//undefined
                }}><Text>Add</Text></Button>

Any idea what i am doing wrong? changes from v3? how can the props be passed down in v4?


Solution

  • so there seems to be a change from v3 on how Actions.create works and does not connect as before the child components to redux. The next solution worked for me.

    class AppContainer extends Component {
        render() {
                return <Router {...this.props}>
                            <Scene key="root" hideNavBar={true} tabs={false} >
                                <Scene key="tabbar" tabs={false} hideNavBar={true}>
                                    <Scene key='main' component={main} title="Main" initial/>
                                </Scene>
                            </Scene>
                        </Router>
            }
        }
    
    function mapDispatchToProps(dispatch){
        return bindActionCreators(ActionCreators, dispatch)
    }
    
    export default connect(() => {return {}}, mapDispatchToProps)(AppContainer)