Cannot pass props through Actions.<scenekey>({<propKey>: <propValue>})

[ghost]

Version

Tell us which versions you are using:

• react-native-router-flux v4.0.0-beta.31
• react-native v0.55.4

After porting my application's code from v3 to v4.0.0-beta.31, I am not able to pass props to next scene using the following syntax.

The app is created using react-native-cli

Expected behaviour

Actions.<scenekey>({<propKey>: <propValue>}) should pass props to next scene

Actual behaviour

props are not available using the same syntax.

Actions.<scenekey>({<propKey>: <propValue>})

Steps to reproduce

1. Use Actions.<scenekey>({<propKey>: <propValue>})
2. Check props in constructor or render
3. Validate properties are not available

[delia-m]

If you have container to pass props to component,
you need to check props in render() of container and pass them to components

[ghost]

@delia-m , I am not using a container to pass props. The component is directly assigned to the scene.

[ghost]

@aksonov Can you help me out ?

[aksonov]

Please check Example project, it passes props correctly, so there is something wrong with your scene setup.

[ghost]

I have already gone through every usage of Actions in the Example project, however @aksonov, I am not able to send any piece of data to the other scene.

[Blapi]

Show your Router code please, and show an example of how you pass your data.

As aksonov said, everything is detailed in the Example project, you obviously did something wrong because passing props works fine.

[ghost]

This is an excerpt from Router

        <Router>
                <Scene key="root">
                    <Scene key="splashScreen"
                        component={SplashScreen}
                        type={ActionConst.RESET}
                        initial
                        hideNavBar
                    />

                    <Scene
                        key="loginScreen"
                        component={LoginScreen}
                        type={ActionConst.RESET}
                        hideNavBar
                        />

                    <Drawer key="drawer" hideNavBar={true} type={ActionConst.RESET} contentComponent={NavigationDrawer}  open={false} drawerWidth={drawerWidth}>
                        <Scene key="wrapper">
                            <Scene
                                key="dashboardScreen"
                                title={Constant.strings.kDashboard}
                                hideNavBar={true}
                                component={DashboardScreen}
                                type={ActionConst.REPLACE}
                                initial
                            />
                            <Scene key="teamNav" navigationBarStyle={styles.navBar} titleStyle={styles.navBarTitle} type={ActionConst.REPLACE}>
                                <Scene
                                    key="teamOverview"
                                    title={"Team Overview"}
                                    hideNavBar={true}
                                    type={ActionConst.PUSH}
                                    component={TeamOverviewDetailScreen}
                                />
                                <Scene
                                    key="teamDetail"
                                    title={"Team Detail"}
                                    hideNavBar={true}
                                    type={ActionConst.PUSH}
                                    component={TeamDetailScreen}
                                    />
                            </Scene>
                        </Scene>
                    </Drawer>
                </Scene>
            </Router>

When I am on Team Overview screen and I try to move to Team Detail Screen with some data,
i.e.;

Actions.teamDetail({team: teamObject})

I successfully navigate to the screen, but no data is sent.

In earlier version (v3) I was able to receive this data, on detail screen.

[ghost]

@Blapi Please check my earlier comment

[ghost]

Hi Everyone, I made another attempt to migrate my project again from scratch, and now everything works. I am not sure about what I did wrong earlier. But I am closing this issue for as it is hard to maintain issues for @aksonov.

[ferdelcorro]

I have the same issue that @prashoor-dev , this example is beautiful.
v4.0.1

[pedrosimao]

I also have the same issue. Any ideas on why I don't get my props?

[gottliebtj]

Your root should be a stack

[japser36]

@aksonov Same issue. RNRF v4.0.6, RN v0.59.8

EDIT2 I fixed my issue with the redux not working, that was something else and just me being silly. However, the props still don't get passed along via RNRF. The work around is to call an action to save the needed props to redux and then use that state to get the props in the component you need. That should work until this issue is resolved.

My Router code:

<Router navigationBarStyle={styles.barStyle}>
    <Stack key="root" hideNavBar>
      <Scene key="login" component={LoginScreen} initial />
      <Scene type="reset" key="main" hideNavBar>
        <Drawer
          hideNavBar
          hideDrawerButton
          key="drawerMenu"
          contentComponent={SideMenu}
          drawerWidth={250}
          drawerPosition="left"
        >
          <Scene
            hideNavBar
            key="inbox"
            title="Inbox"
            component={InboxScreen}
            initial
          />
          <Scene
            hideNavBar
            key="conversation"
            title="Inbox"
            component={ConversationScreen}
          />
        </Drawer>
      </Scene>
    </Stack>
  </Router>

When I'm in the 'inbox' scene, (verified by Actions.currentScene === '_inbox') and call the following,

Actions.conversation({ cv: this.props.conversation });

There is no attribute 'cv' at all in the ConversationScreen component. Note that my ConversationScreen is a functional component. Logging its props just gives:

{
drawerImage: 2
drawerPosition: "left"
hideDrawerButton: true
hideNavBar: true
init: true
name: "_conversation"
navigation: {pop: ƒ, popToTop: ƒ, push: ƒ, replace: ƒ, reset: ƒ, …}
navigationBarStyle: {backgroundColor: "#012060", fontSize: 20, fontWeight: "900", color: "#00E1FF", fontFamily: "LemonMilkbold", …}
screenProps: undefined
title: "Inbox"
__proto__: Object
}

I have verified that the 'this.props.conversation' object is a valid object by logging it right before the Actions.conversation call, so that is not the issue. The router drawer works fine on the inbox screen, and everything else seems to be in order save for that there is no prop passed along which breaks my app's functionality. Please re open this issue, I suspect that this is a RNRF issue as I do not see what I am doing wrong if anything. If I did something wrong, please let me know so that I can fix it. Thank you.

[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})

[sufyan297]

Thanks @anuj002 , wrap=false works :) even though i am not using Tabs.
My routes

<Router backAndroidHandler={() => this.onBackAndroid()}>
        <Stack key="root">
          <Scene key="home" component={Home} hideNavBar />
          <Scene key="drawer" drawer={true} contentComponent={Drawer} drawerPosition={'right'} drawerImage={null} hideNavBar wrap={false} >
            <Scene key="ingredient" component={IngredientsList} hideNavBar wrap={false} />
            <Scene key="cocktail" component={CocktailDetail} hideNavBar  />
            <Scene key="product" component={Product} hideNavBar />
          </Scene>
        </Stack>
</Router>

[AndroidDoctorr]

I'm using @anuj002's solution - I have Scenes inside a Drawer component, and passing props using Actions only works if I set wrap to false. The only problem is then I lose the header bar from my Drawer component - it there any way to just pass the props down through the wrapper, as would seem intuitive, or are the only solutions to use Redux or to add my own header component to unwrapped scenes and use Actions.drawerOpen()? Those both smell bad to me.

[baotoan1905]

I'm using @anuj002's solution - I have Scenes inside a Drawer component, and passing props using Actions only works if I set wrap to false. The only problem is then I lose the header bar from my Drawer component - it there any way to just pass the props down through the wrapper, as would seem intuitive, or are the only solutions to use Redux or to add my own header component to unwrapped scenes and use Actions.drawerOpen()? Those both smell bad to me.

Same issue

[nclong87]

I'm using @anuj002's solution - I have Scenes inside a Drawer component, and passing props using Actions only works if I set wrap to false. The only problem is then I lose the header bar from my Drawer component - it there any way to just pass the props down through the wrapper, as would seem intuitive, or are the only solutions to use Redux or to add my own header component to unwrapped scenes and use Actions.drawerOpen()? Those both smell bad to me.

same issue here, anyone can help?