React-native-router-flux: Stack of same scene not working anymore after update from 4.0.0-beta-28 to 4.0.1

Created on 13 Aug 2018  路  10Comments  路  Source: aksonov/react-native-router-flux

Version

Tell us which versions you are using:

  • react-native-router-flux v4.0.1
  • react-native v0.55.4

Expected behaviour

Having some scenes like:

<Scene key="articles">
    <Scene
      key="home"
      component={ChannelsScreen}
      sceneStyle={styles.screen}
      renderRightButton={<ProfileIcon />}
      onRight={() => {}}
    />

    <Scene
      key="article"
      component={ArticleContainer}
      title={I18n.t('back').toUpperCase()}
      sceneStyle={styles.screen}
      leftButtonIconStyle={styles.goBackImageStyle}
      hideDrawerButton
      tintColor={styleConstants.colorBlack}
      onLeft={() => Actions.pop()}
      leftButtonImage={backButtonLeftArrowImage}
      renderRightButton={() => <View />}
    />
 </Scene>

when calling Actions.push('article', newParams }); multiple times, a new article screen should be opened on top of the oldest one increasing the stack items.

Actual behaviour

old article screen is replaced with a new one

This used to work in 4.0.0-beta-28

I tried to put Scene key article inside a stack or even transform articles one from scene to Stack but that doesn't seem to work.

Is there any possibility in 4.0.1 to create a stack of same scenes with different info?

Steps to reproduce

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

bug

Most helpful comment

There is a new version now that fix this. To get it right, with reset, use Actions.reset or set type={ActionConst.RESET} in the scene you want to behave like that.

Again, I am not able to publish any version, so you will have to use master to test it there.

Please reopen this if the fix haven't worked.

All 10 comments

The same thing here!

Version
Tell us which versions you are using:

react-native-router-flux 4.0.1
react-native 0.56.0

Same here

react-native-router-flux 4.0.0-beta-40
react-native 0.51.0

It behaves as if calling Actions.refresh and just re-renders the same screen with new props.

This is probably because of the 'less pushy' breaking change in react-navigation V2
https://reactnavigation.org/blog/#navigateroutename-in-stacknavigator-is-less-pushy

But react-navigation still exposes older push actions. Here the change seems to be in Actions.push, and I could not find any alternative to it that uses old push behaviour.
https://github.com/aksonov/react-native-router-flux/commit/d61960c6bf0139150a327a161b3d9374c6d6772f#diff-2c2bc1d792d94da8f451749a3b894588R840

I think Actions.push should default to older push behaviour and maybe we can have an Actions.navigate for the new behaviour.

Workaround (change the push method in navigationStore.js

  push = (routeName, data) => {
    const params = filterParam(data);
    this.dispatch({ type: StackActions.PUSH, routeName, params });
  };

Hope this help.

Thank you @tikkichan4, the fix was added on #3190 and it will be released as 4.0.2.

Just checking why we have changed it back (during the upgrade to 2.0 it was StackNavigation.push during some time.

@aksonov is on vacation - so the 4.0.2 version will need wait him to be released. But while that, you can try it using yarn add aksonov/react-native-router-flux.

Please, try that and let me know if it have fixed your issue.

Not sure it's my issue is related with this,
but I have similar issue. props doesn't pass into component with Actions

This worked in 4.0.0-beta.32 and doesn't work after I update to 4.0.1

For example
call Actions.profile({ reset: true });
and this.props.reset in profile component is never true

I tried with 4.0.2 already but it doesn't work neither.

There is a new version now that fix this. To get it right, with reset, use Actions.reset or set type={ActionConst.RESET} in the scene you want to behave like that.

Again, I am not able to publish any version, so you will have to use master to test it there.

Please reopen this if the fix haven't worked.

The fix is working in that it will now push the same scene more than once; however, pushing with different props is NOT working. Pushing the same scene on the stack will cause that scene to always use the props of the very first scene instance.

Is there a workaround for this? @daviscabral

same here!

ActionConst.RESET solves the problem.
thank you @daviscabral

Was this page helpful?
0 / 5 - 0 ratings