Can't pass props to scene from Action.key(props). Think this way should work too.

[vygandas]

Hello,
I can't send props to another scene. Was looking into the docs but can't find that could help.

Version

Tell us which versions you are using:

• react-native-router-flux 4.0.1
• react-native 0.55.4

Expected behaviour

Action.scene_key(props) shout pass props to the component

Actual behaviour

No props in the component. I see only Router specific props printed out:

Steps to reproduce

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

App.tsx

<...>
<Router>
    <Stack hideNavBar>
        <Tabs key="root" showLabel={false} swipeEnabled={true} lazy={true}>
            <Scene key="feed" component={FeedScreen} iconName="ios-people" icon={TabIcon} navBar={FeedNavBar} />
            <Scene {...this.props} key="selfie" component={SelfieScreen} iconName="ios-camera" icon={TabIcon} iconSize={30} />
            <Scene {...this.props} key="chats" component={ChatsScreen} iconName="ios-chatboxes" icon={TabIcon} title="Conversations" />
        </Tabs>
        <Scene key="settings" component={SettingsScreen} iconName="ios-settings" icon={TabIcon} modal={true} hideNavBar={false} title="Settings" />
        <Scene {...this.props} key="messages" component={MessagesScreen} iconName="ios-settings" icon={TabIcon} modal={true} hideNavBar={false} />
    </Stack>
</Router>
<...>

FeedItemBox on click action

<...>
Actions.selfie({
    target: 'chat',
    taget_user_id: this.props.item.uid,
    target_user_name: this.props.item.name,
});
<...>

Selfie component that should get props

<...>
render() {
    console.error(this.props);
    return (
        <View style={styles.container}>
            <Text>
                {this.props.target === 'feed' && 'Post your selfie!'}
                {this.props.target === 'chat' && `Say hello to ${this.props.target_user_name} with your selfie!`}
            </Text>
                
            <....>

        </View>
    );
}
<...>

[daviscabral]

Where is how is Actions.selfie being called? (EDIT: I read that is in the click action from item, but can you show how you are placing it there?)

I noticed that with the last release, a lot of issues might be happening due the wrong version match between a lot of dependencies.

Could you check if your version is compatible?

react-native	react
0.46.x	16.0.0-alpha.12
0.47.x	16.0.0-alpha.12
0.48.x	16.0.0-alpha.12
0.49.x	16.0.0-beta.5
0.50.x	16.0.0
0.51.x	16.0.0
0.52.x	16.2.0
0.54.x	16.3.0-alpha.1
0.55.x	16.3.1
0.56.x	16.4.1

Also, check the breaking changes related to the version you are using and the most recent - that might shed a light here:
https://github.com/react-native-community/react-native-releases/blob/master/CHANGELOG.md

[vygandas]

React version I've used is 16.3.1. All app was created by create-react-native-app, so it should be ok I guess.

Actions.selfie is called from child component. Chain would bee something like:
FeedScreen (custom component) -> FlatList (RN component) -> RenderedItem (custom component). And it's used in onPress.

Looked into a changes but do not see what would relate to this issue.

[daviscabral]

Cool - thank you for pointing all this out. I will take a look - but it seems this might be a duplicate - maybe #3049 or #3221. Both are in the queue to be checked. I can't really use client paid time to fix that now - but on my next free time I will def check this out first.

[daviscabral]

It seems for react-navigation@2 some extra work is going to be needed.

RN issues related to this:
react-navigation/react-navigation#2770
react-navigation/react-navigation#1171
react-navigation/react-navigation.github.io#191

Libs that might help here:
https://github.com/ReactTraining/react-broadcast

RN Docs:
https://reactnavigation.org/docs/en/navigation-prop.html#addlistener-subscribe-to-updates-to-navigation-lifecycle
https://reactnavigation.org/docs/en/with-navigation-focus.html

[vygandas]

Great, thanks for info.

I've also found that I'm able to pass params to scene that is not nested deeper e.g. under Tabs. My case scene like settings is receiving props.

[daviscabral]

Just a note about the info, I used the issue as bookmark - and also to encourage someone else to work on it - if available. There is a PR with initial work on that - but I am not sure when I will have the time to finish it.

[vygandas]

Yea, I understand. Maybe I have time someday, not sure. Currently have a lot of work...
Btw another notice that when navigating, after component is rendered it doesn't fire onEnter or shouldComponentUpdate anymore.

[daviscabral]

Thanks for reporting this as well. That's because when navigating it does not mount/unmouont the component. That's also being tackled in the PR I am taking a look. In order to concentrate all this information in the same place - I am closing this and encouraging you to continue contributing in #3206 - that's the main issue to handle this issue related with the lifecycle (that seems to be the culprit of the props problems for everyone).

[aksonov]

[email protected] doesn't pass props to all children components anymore. 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.

[tanapaydin]

I've the same problem. Not with Tab but with Drawer. Using wrap={false} solved the issue, however this time a side effect occurred. When swiping from left on iOS, it's behaving as a back button (rendering to the previous page), which I don't want to happen. I want the drawer to be shown when swiping from left.

As a solution, I'll probably write to Redux state, and read those prop values from the state when the new page is loaded.