React-native-router-flux: Actions.refresh issue .. not updating scene.

[owenhope]

Hi, I am attempting to update my scene to add renderRightButton via Actions.refresh however I cannot seem to get it to work.

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

Even if I try this:

componentDidMount = () => {
    Actions.refresh({rightTitle: 'TEST'});
}

I cannot even change the Title of the scene, let alone renderRightButton.

I have tried:

componentDidMount = () => {
    Actions.refresh({renderRightButton: this.renderRightButton()});
  }

and

renderRightButton = (props) => {
    return (
      <TouchableOpacity
        style={{ paddingRight: 10, paddingLeft: 20 }}
        onPress={() => Actions.refs.home.wrappedInstance.getNextGames()}>
        <Ionicons name="ios-arrow-forward" size={25} {...DefaultProps.icons} />
      </TouchableOpacity>
    );
  }

The only way I can make it work is if I declare it with the static function...

static renderRightButton = (props) => {
    return (
      <TouchableOpacity
        style={{ paddingRight: 10, paddingLeft: 20 }}
        onPress={() => Actions.refs.home.wrappedInstance.getNextGames()}>
        <Ionicons name="ios-arrow-forward" size={25} {...DefaultProps.icons} />
      </TouchableOpacity>
    );
  }

However using the static function make its more difficult to control the functionality (I need to disable the button if there are no next games etc..

My navigation is set up as follows:

<Stack hideNavBar>
    <Tabs
      key="tabbar"
      swipeEnabled
      type="replace"
      showLabel={true}
      {...DefaultProps.tabProps} >

      <Stack
        key="gameday"
        icon={() => <SimpleLineIcons name="rocket" size={20} {...DefaultProps.icons} />}
        {...DefaultProps.navbarProps}>
        <Scene
          key="home"
          component={GameDayContainer}
          initial
          />
      </Stack>

The "home" scene is the one I am trying to refresh.

Any help would be much appreciated.

[adelowo]

I can confirm this bug exists on 4.0.6 ..

Friendly ping @aksonov .

[adelowo]

I have downgraded to 4.0.0-beta.31. Actions.refresh works with that version though.

I will most likely be migrating to react-native-nagivation later on in the week.

[nani92]

Hi! :) Had same issue. When I've downgraded to version mentioned by @adelowo it worked perfect. But using older version was not good solution for our project.
Finally I managed to refresh rightTitle with this code:
Actions.replace(Actions.currentScene, {rightTitle: 'CONTINUE'})
Hope it helps! :)

[adelowo]

@nani92, an older version isn't good for me either but I needed to submit the app to the app store yesterday :) .

I will try your fix later on in the week. If it works, fine. If it doesn’t I will go on with using another navigation library.

[owenhope]

Thanks @adelowo ... I am hoping we can get this resolved @aksonov please!

[aksonov]

You have to wrap refresh with setTimeout if you use it from componentDidMount

[eduardo-schork]

You have to wrap refresh with setTimeout if you use it from componentDidMount

this solution doesn't work for me

so, this is my solution to render my right button:

class Companies extends Component {

    componentDidMount(){
        this.props.navigation.setParams({
          right: () => (
              <MaterialIcons
                name={'mail'}
                size={48}
                color={'black'} />
          )
        })
     } 

    render(){
      ...
    }
}