Actions.key({ propNameExample: dataExample }) not passing data via props

[alittletf]

Version I am on:

• react-native-router-flux v4.0.6
• react v16.6.3
• react-native v0.58.5
• redux - 4.0.1
• react-redux - 6.0.1

Expected behaviour

passing data as props through 'Actions.MyScene({ data: myData })' comes through to my other page and accessible via this.props.data;

Actual behaviour

data comes back as undefined.

Router.js code

`<Tabs key="TabBar" tabBarPosition="bottom" tabBarComponent={TabBarIOS}

            <Scene
                key='Home'
                component={MainFeed}
                title='Home'
                hideNavBar={true}

            />

            <Scene
                key="Passes"
                hideNavBar={true}
            >
                <Scene
                    key="QRCodes"
                    component={QRCodes}
                    title="Promoter Passes"
                    hideNavBar={true}
                    initial
                />
                <Scene
                    key="FullPassWithCode"
                    component={FullPassWithCode}
                    hideNavBar={true}
                />
            </Scene>

            <Scene
                key='Inbox'
                component={Inbox}
                title='Inbox'
                hideNavBar={true}
            />

            <Scene
                key='Reviews'
                component={Reviews}
                title='Reviews'
                hideNavBar={true}
            />

            <Scene
                key="PubProf"
                hideNavBar={true}
            >
                <Scene
                    key="Profile"
                    component={Profile}
                    title="Profile"
                    hideNavBar={true}
                    initial
                />
                <Scene
                    key='PublicProfile'
                    component={PublicProfile}
                    title='Public Profile'
                    hideNavBar={true}
                />

                <Scene
                    key='ViralImage'
                    component={ViralImage}
                    title='ViralImage'
                    hideNavBar={true}
                />
            </Scene>
        </Tabs>`

When im on my MainFeed component, I am calling the below. I successfully navigate to that screen but no props pass through.

Actions.Passes({ data: data });

I do not get any errors. All i get is in my QRCodes file is this.props.data is undefined.

Steps to reproduce

Not sure what to put here as all ive done was update my packages above

Any help would be greatly appreciated.

EDIT: It appears that passing data between scenes in the same stack works but passing data to scenes not in the same stack doesnt work. I tried to send the data the parent scene which i thought would then pass the data to the initial scene but that is where things are broken

[ankitsihora]

I have used redux provider with store and it works for me.

[alittletf]

@ahanriat can you elaborate on what HOC means?

[mazenchami]

@alittletf I was able to accomplish this by doing this:

(...)
const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        data:  ownProps.data,
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(SCENE);

Hope this helps!