React-native-router-flux: How to pass props to a tab children

[kyhnlbyrk]

Version

Tell us which versions you are using:

• react-native-router-flux v4.0.0 (beta 22)
• react-native v0.50.4

Hi, I have a tab hierarchy like this :
<Scene key = "tabBar" tabs lazy tabBarPosition={'bottom'} labelStyle={styles.labelStyle} tabBarStyle={styles.tabBar} onRight={null} rightButtonImage={null} > <Scene key= "ActivityNotesWrapper" hideNavBar title= "Notes" initial > <Scene key="notes" title="Activity Notes" component={ActivityNotes} onRight={ ()=> Actions.pop() } rightButtonImage={require('./src/components/img/plus.png')} hideNavBar={false} navigationBarStyle={{ ...Platform.select({ android: { marginTop: Constants.statusBarHeight }, }), }} back onBack={() => Actions.pop()} > </Scene> </Scene> <Scene key= "ActivityDetailsWrapper" hideNavBar title= "Details" > <Scene key="activitiyDetail" title={'Activity Detail'} hideNavBar={false} component={ActivityDetailScreen} navigationBarStyle={{ ...Platform.select({ android: { marginTop: Constants.statusBarHeight }, }), }} back leftTitle="Back" onBack={() => Actions.popTo('activitiesDrawer')} > </Scene> </Scene> <Scene key="ActivityAssigneesWrapper" hideNavBar title="Assignees" > <Scene key="ActivityAssignees" title={'Activity Assignees'} hideNavBar={false} component={ActivityAssignees} navigationBarStyle={{ ...Platform.select({ android: { marginTop: Constants.statusBarHeight }, }), }} onRight={ ()=> Actions.pop() } rightButtonImage={require('./src/components/img/plus.png')} back onBack={() => Actions.popTo('activitiesDrawer')} > </Scene> </Scene> </Scene>

I.E I want to open ActivityDetailsWrapper first. I call
Actions.jump('ActivityDetailWapper', {someProps}), but when I do this, and when I tried to change tab after this, "someProps" are not going to other tab scene. How can I do this ?

[Blapi]

Try to access to tabBar instead of ActivityDetailWrapper and then, when you pass the props to tabBar, you will have the props in your 3 scenes.

[Blapi]

Check #2703

[kyhnlbyrk]

Its already in that way, but I have to do conditional tab change. I.E if(condition) -> open ActivityDetailWrapper else open tab2

[Blapi]

Show me your navigation code please, and format it well for GitHub, not like your first example unreadable.

I ran test with the Example project and I have no worries having someProps in all the tabScenes

[kyhnlbyrk]

key = "tabBar"
tabs
lazy
tabBarPosition={'bottom'}
labelStyle={styles.labelStyle}
tabBarStyle={styles.tabBar}
onRight={null}
rightButtonImage={null}
>
key= "ActivityNotesWrapper"
hideNavBar
title= "Notes"
initial >
key="notes"
title="Activity Notes"
component={ActivityNotes}
onRight={ ()=> Actions.pop() }
rightButtonImage={require('./src/components/img/plus.png')}
hideNavBar={false}
navigationBarStyle={{
...Platform.select({
android: { marginTop: Constants.statusBarHeight },
}),
}}
back
onBack={() => Actions.pop()} >


key= "ActivityDetailsWrapper"
hideNavBar
title= "Details">
key="activitiyDetail"
title={'Activity Detail'}
hideNavBar={false}
component={ActivityDetailScreen}
navigationBarStyle={{
...Platform.select({
android: { marginTop: Constants.statusBarHeight },
}),
}}
back
leftTitle="Back"
onBack={() => Actions.popTo('activitiesDrawer')}>


key="ActivityAssigneesWrapper"
hideNavBar
title="Assignees">
key="ActivityAssignees"
title={'Activity Assignees'}
hideNavBar={false}
component={ActivityAssignees}
navigationBarStyle={{
...Platform.select({
android: { marginTop: Constants.statusBarHeight },
}),
}}
onRight={ ()=> Actions.pop() }
rightButtonImage={require('./src/components/img/plus.png')}
back
onBack={() => Actions.popTo('activitiesDrawer')}>

The problem is when I use Actions.jump, and then change the tab, the props is not there.

[Blapi]

I meant your code where you do the Actions.jump, what are you doing there ?

[kyhnlbyrk]

if (response.activity.hasNotes === 0) {
    parentActivities = ''; //Preview parent activity
    childActivities =  '';
    Actions.tabBar({
     text: text,
     activity: activity,
     user: user,
     sort: sort,
     childActivities: response.activity.activities,
     parentActivities: response.activity,
   });

 } else {
   Actions.tabBar({
     text: text,
     activity: activity,
     user: user,
     sort: sort,
     childActivities: response.activity.activities,
     parentActivities: response.activity,
   });
 }

Okay here. Now it goes tabBar, but when I write

Actions.jump('activityDetail', ({ someProps });

somePropbs do not send to the other tabs.

[Blapi]

If this is OK with your first example, why try with the other one ??

[kyhnlbyrk]

As I said, I need open the tabs conditionally.. if response.activity.hasNotes equals 0, then I need to go activityDetail. if not I need to go tabBar..

[Blapi]

If it's a matter of going to a specific scene, either you use initial on your Scene, either in ComponentWillMount of your Scene, you check the condition and switch to the other Scene like

  componentWillMount() {
    this.props.hasToSwitchScene ? Actions.otherTab() : console.log('All good there')
  }

But use Actions.tabbar({ yourProps }) first

[kyhnlbyrk]

Ok, I will try thank you !