Solvedreact native router flux Ability to provide the left/right navbar buttons from the rendered component

The current set up of the buttons is not ideal. They have to be declared and hooked up to action callback at the global level. When customisation is needed at the component level i.e. component needs to hide or show the button or enable/disable it depending on its own state things get impossible to manage with the current setup. The component cannot register a local callback on the button press either.

Maybe there could be a way to provide a custom navbar renderer?

Or am I missing something and this is already feasible ?

Thank you .

27 Answers

✔️Accepted Answer

@jrwm thanks it works

  componentDidMount() {
    Actions.refresh({renderLeftButton: this.renderLeftButton, renderRightButton: this.renderRightButton})

  renderRightButton = () => {
    return (
      <TouchableOpacity onPress={this.onAddAccount}>

  onAddAccount = () => {
    const {accountInput: account, keyInput: key} = this.state;
    this.props.dispatch(addAccount(account, key));
    Actions.auth({type: 'reset'});

Other Answers:

class MyAccount extends React.Component {
   static renderRightButton(props){
    return <Text>rightButton</Text>;

How do non static props get passed to a static method... this issue really shouldn't be closed. Components that want to modify navigation buttons are forced to reset the bar after being mounted.

Why is this closed? There doesn't seem to be a good way for the scene component to specify any data or state necessary to be passed to the right or left buttons for the navigator. Am I missing something?

you can define your button in your scene's componentDidMount

Actions.refresh({ renderRightButton: this.yourFunctionToRenderButton, onRight: this.yourButtonHandler, })

don't use static renderRightButton, and you don't need to use flux either