CODEWITHSUNDEEP
androidiosreact-nativenavigationreact-native-router-flux
user3804063
user3804063

Reputation: 849

React-native-router-flux Update rightButtonImage dynamically

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?

Upvotes: 3

Views: 489

Answers (1)

Mohammad Abbas
Mohammad Abbas

Reputation: 574

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
  });
}

Upvotes: 1

Related Questions