React-native-router-flux: Action.refresh no longer works starting on v4.0.0-beta.40

[hugoh59]

Version

Any react-native-router-flux version including and higher than 4.0.0-beta.40

Expected behaviour

componentWillMount() { Actions.refresh({onRight: () => this.onButtonPress(), rightTitle: I18n.t("profile.save")}) }
refreshes the onRight title and action

Actual behaviour

Instead, it does not do anything when it used to work in previous versions.

Steps to reproduce

1. Create a project with the latest version
2. Add onRight action in Router component
3. Update the action with the onRefresh event and see that it does not work

[Q8hma]

any help here please ??

I used last v4.0.6 and same refresh not work

thnx

[Mifayo]

any updates ??

[raffij]

Looks like it applies the refresh props to the current scene, rather than the new scene.

[hugoh59]

@aksonov do you know if this is linked to RNRF or to updates in newer version or React Nativation?

[aksonov]

@hugoh59 You have to wrap refresh with setTimeout.
Yes, it is connected - react navigation 2.x changed a lot

[strindhaug]

Just how long timeout is needed for it to work?
I've tried this with no success

      <Scene
        key="manualSteps"
        component={relayRenderer(ManualSteps)}
        queries={viewerQueries}
        title="Change steps (Initial)"
        hideTabBar
        clone
        backButtonImage={quitButton}
        //renderRightButton={renderDummySaveButton}
        direction="vertical"
      />

I've tried with or without an initial rightbutton dummy, it makes no difference.

In ManualSteps:

  componentDidMount() {
    setTimeout(() => {
      Actions.refresh({
        title: 'Change steps (Mounted)',
        onBack: this.onCancelPress,
        renderRightButton: this.renderRightNavBarButton,
      });
    }, 1000);
  }

The title actually _does change_ after 1 second but the rightButton is unchanged.
It seems like refresh simply ignores all props that contain style or components. But I can't see anything that appears to filter it out in the source code...

[strindhaug]

Ahh, it seems that:

• renderLeftButton is ignored if left or leftButton is non falsy,
• renderRightButton is ignored if right or rightButton is non falsy,
• navigationBarStyle is ignored if headerStyle is non-falsy, etc...

because of these:

https://github.com/aksonov/react-native-router-flux/blob/20050c4c2ef0abf4d507c200e5a6a66bf2c62541/src/navigationStore.js#L209-L214

Presumably some of the values earlier in these OR-chains is always non-falsy causing it to ignore the params from refresh().

So for instance to change the navigationBarStyle using refresh you should refresh with the undocumented prop headerStyle as well (I would set both in case this bug is fixed later).
I've only tried navigationBarStyle so far but I assume this would work for some of the others.

[hugoh59]

I managed to fix this issue simply by upgrading to the latest version of React Native, which was a tedious process by the way but quite worth it.

[C0dekid]

Still not working for me!

When using this

Actions.refresh({ title: "New title" });

The title should change, but it does nothing!

"react-native": "0.58.6"
"react-native-router-flux": "^4.0.6"

Also it ignores the swipeEnabled property, the transition/animation also being ignored.

[KaoPengHsiang]

@C0dekid Maybe you can try this?

refreshTitle= () => {
    Actions.refresh({ title: "New title", key: Math.random() }); //sometimes refresh didn't work, add a random seems be better
  };
<Scene
    key="page"
    component={page}
    title="New page"               
    back={true}  //must have
    onBack={this.refreshTitle}
 />

[jhonattansolartearanda]

Just how long timeout is needed for it to work?
I've tried this with no success

      <Scene
        key="manualSteps"
        component={relayRenderer(ManualSteps)}
        queries={viewerQueries}
        title="Change steps (Initial)"
        hideTabBar
        clone
        backButtonImage={quitButton}
        //renderRightButton={renderDummySaveButton}
        direction="vertical"
      />

I've tried with or without an initial rightbutton dummy, it makes no difference.

In ManualSteps:

  componentDidMount() {
    setTimeout(() => {
      Actions.refresh({
        title: 'Change steps (Mounted)',
        onBack: this.onCancelPress,
        renderRightButton: this.renderRightNavBarButton,
      });
    }, 1000);
  }

The title actually _does change_ after 1 second but the rightButton is unchanged.
It seems like refresh simply ignores all props that contain style or components. But I can't see anything that appears to filter it out in the source code...

could you solve it?