Actions.refresh renderRightButton has no effect

[jamesholcomb]

Version

Tell us which versions you are using:

• react-native-router-flux v4.0.1 (v3 is not supported)
• react-native v0.56.0

Expected behaviour

The navbar refreshes with the new right button component

Actual behaviour

No effect

Steps to reproduce

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

  static onEnter = () => {
    const { wrappedInstance } = Actions.refs.profile

    // this works
    Actions.refresh({
      rightTitle: "Logout",
      onRight: wrappedInstance.onLogout
    })

   // this has no effect
   Actions.refresh({
      renderRightButton: () => <MoreButton onPress={() => alert('hi')} />
   })
  }

[jamesholcomb]

Here is how I worked around it

        <Scene
          back
          key={routes.PROFILE}
          component={ProfileScene}
          renderRightButton={
            <MoreButton
              onPress={() => Actions.refs.profile.wrappedInstance.onMorePress()}
            />
          }
          title="Profile"
        />

[daviscabral]

Thank you for the update about the workaround. This seems to be sort of a duplicate of #3188. I'll keep it marked as bug and work on both in the same PR.

[aksonov]

@jamesholcomb It looks like a hack and probably just not supported by React Navigation 2.x (its SET_PARAMS action). Instead you should define one renderRightButton that changes its content depending from navigation state. Actions.refresh should be used just to update navigational state (i.e. pass values not functions)

[jamesholcomb]

Actions.refresh should be used just to update navigational state (i.e. pass values not functions)

I am attempting to upgrade a 3.X project to 4.0. Actions.refresh is used throughout the app to wire up navbar buttons to their scene handlers based on data/conditions that are determined within the scene.

The example does not seem to demonstrate how to go about this and the migration guide does not mention it.

Can you elaborate or point to an example?

[avivajohnson]

Actions.refresh is used throughout the app to wire up navbar buttons to their scene handlers based on data/conditions that are determined within the scene.

I would also be interested in seeing an example of how to accomplish this with 4.0.

[waqas19921]

For react-navigation version 3.X use following example May be it also works with 4.x

class Companies extends Component {

    componentDidMount(){
        Actions.refresh({
          right: () => (
              <MaterialIcons
                name={'mail'}
                size={48}
                color={'black'} />
          )
        })
     } 

    render(){
      ...
    }
}