React-native-router-flux Update rightButtonImage dynamically

Question

I have my scene defined inside Router tab as follows:

<Scene 
         key="latest"
         title="LATEST"
         titleStyle={{flex:0}}
         component={Latest}
         onRight={()=>{}} 
         rightButtonImage={NOTIFICATION_ICON}
         onLeft={()=>{}}
         leftButtonImage={NAV_SEARCH_ICON}
/>

With the above code , I can make navigation action from my Latest screen with the following code:

  componentDidMount() {
          this.props.navigation.setParams({
               'onRight': this.showNotifications,
               'onLeft': this.showSearch,
         })
  }

So, to update the rightButtonImage from Latest screen , I tried to add rightButtonImage inside the setParams() method as:

 this.props.navigation.setParams({
      'onRight': this.showNotifications,
      'onLeft': this.showSearch,
      'rightButtonImage': {NOTIFICATION_ICON_ON}
    })

So, basically I want to change my notification bell icon , whenever the new notification arrives . But , by adding 'rightButtonImage' in setParams() doesn't work.

Can anybody please help?

Answer 1

Try suing Actions.refresh

componentDidMount() {
  Actions.refresh({
    rightButtonImage : NOTIFICATION_ICON_ON // this should be an Image
  });
}

Or you can use renderRightButton in Actions.refresh

componentDidMount() {
  Actions.refresh({
    renderRightButton : XXXX // this should be an React.Component
  });
}