React-native-router-flux: Passing props to nested tab scenes

[baonguyen2604]

Version

Tell us which versions you are using:

• react-native-router-flux v4.0.0-beta26
• react-native v0.50.3

Expected behaviour

When navigated from a login screen to a nested scene with tabs, all children tab scenes should have a prop passed to the parent scene by Actions

Actual behaviour

The prop cannot be passed to the parent scene. It will work as expected if I pass it to a child scene using Actions, but I want the prop to be available to all children tab scenes

Steps to reproduce

For non-obvious bugs, please fork this component, modify Example project to reproduce your issue and include link here.

1. Sign in with any username and password
2. navigate to create trip tap
3. hit create trip, alert(this.props.user_id) is undefined

My declarations of the Scenes hierarchy

         <Scene key = "main" tabs = {true} hideNavBar = {true} >
            <Scene key = "feedTab" hideNavBar = {true} title = " " iconName = "Feed" icon = {TabIcon} >
              <Scene key ="home" component = {Feed} title = "Home"/>
            </Scene>

            <Scene key = "createTripTab" hideNavBar = {true} title = " " iconName = "Create Trip" icon = {TabIcon}>
              <Scene key = "createTrip" component = {CreateTrip} title = "Create Trip" />
            </Scene>

            <Scene key = "findHostTab" hideNavBar = {true} title = " " iconName = "Find Host" icon = {TabIcon} >
              <Scene key = "findHost" component = {FindHost} title = "Find Host" />
            </Scene>

            <Scene key = "profileTab" hideNavBar = {true} title = " " iconName = "Profile" icon = {TabIcon} >
              <Scene key = "profile" component = {Profile} title = "Profile" />
            </Scene>

          </Scene>

Actions.main({user_id: json.user_id}) doesnt work while Actions.createTripTab({user_id: json.user_id}) works

[EiderDiaz]

same issue here, @baonguyen2604 did you find any solution or a workaround?

[direwolf424]

same issue here.

[pakkibokati2012]

I also encountered this issue. I recommend using Actions.jump('main', {user_id: json.user_id}).

[aksonov]

Please check Example project and TabView.js with Actions.tab_5_1({ data: 'test!' })

[kuriel-trivu]

Please at least add a link

https://github.com/aksonov/react-native-router-flux/blob/master/examples/react-native/components/TabView.js

[anuj002]

Yes! I found the problem in 'Tab'.
Tabs are 'wrapped' by default - i.e. all children are wrapped by Stack with own nav bar. You may disable wrapping by using wrap={false} for Tabs and check passing props again.

<Scene key="Scene" tabs={true} wrap={false}> <Scene key="someTab" component={SomeTab} title="SomeTab" icon={TabIcon}/> <Scene key="Modal" component={Modal} title="Modal" hideNavBar direction="vertical"/> </Scene>

Here props are find when passing from someTab to Modal via Actions.Modal({someProp: theProp})

[John-88]

Thanks @anuj002, I was looking for a solution for hours!