How to Add button on Titlebar

[boyinfotronics]

I need to button on title bar
how can i add button on title bar
Is there on stack > navigationoption ?

[toushilou]

static navigationOptions = { headerRight: <Button title="Info" />, ...

should work, refer https://reactnavigation.org/docs/intro/headers

[leanminmachine]

How to make the button clickable though?

I have similar problems. Tried #145 but passing in params into my navigationOptions header makes the headerRight totally disappear. I took away the params and the button appears but I can't pass my params inside to make it clickable to go to another screen on a stack navigator

Router.js (maybe there's a better way of doing this..)

export const EditProfileFlow = StackNavigator({
  Profile: {screen: ProfileScreen},
  Settings: {screen: SettingScreen},
  EditProfile: {screen: EditProfileScreen},
});

Currently my screen looks something like this (ProfileScreen.js):
`

    static navigationOptions = {

    title: 'Profile',
    header: ({params}) => {
      right:
      <Button
      title = "Test"
      onPress = {() => this.params.handleSave() } />
    }
}

saveDetails() {
  alert('Save Details');
}

componentDidMount () {
  this.props.navigation.setParams({handleSave: this.saveDetails.bind()});
}

`

[matthamil]

@leanminmachine I'm able to achieve this by doing:

  static navigationOptions = ({ navigation }) => {
    const { params = {} } = navigation.state;

    return {
      headerRight: (<HeaderRight handleSubmit={params.handleSubmit} title="SAVE"/>) // custom component
    };
  };

  submitStatus = () => {
    // logic for right button on click
  }

  componentDidMount() {
    this.props.navigation.setParams({ handleSubmit: this.submitStatus });
  }

[leanminmachine]

@matthamil still doesn't work. What are you using for your custom component? A regular Button didn't work ie. still doesn't appear. I remembered that my version of react-navigation was 1.0.0 beta 7 and I tried changing headerRight to header: right: but still, nothing. Even returning regular Text doesn't work.

Edit: for me, seems like passing in any kind of param into navigationOptions would make whatever I try to return not return , not even button, but title as well. :/ does it have to do with my version of react-navigation ...

static navigationOptions = ({navigation}) => {

      const {params = {}} = navigation.state;

      return {
        headerRight: (
          <Button
          title = "Test"
          onPress = {() => this.params.handleSave()}/>
        ) }
      }


    saveDetails = () => {
      alert('Save Details');
    }

    componentDidMount () {
      this.props.navigation.setParams({handleSave: this.saveDetails});
    }

[matthamil]

@leanminmachine There have been breaking changes between the minor beta versions. Try checking the changelog or update react navigation to see if that helps.

My custom headerRight component is a TouchableHighlight that I have created that expects a few props.

[leanminmachine]

@matthamil Yeap I checked the changelog and did try updating to the latest version, but there were too many breaking changes for me to debug due to the jump from beta 7 :(

Anyway OP I tried this #299, suggestion worked for me if you would want your button to navigate to another screen on your Stack Navigator (which was what I managed to do). Still have no idea why the other suggestions of using ComponentWillMount to set parameters dont work for me, I just get null or the title/ headerright completely not being able to render.

[BillHuangg]

@leanminmachine , I saw your demo code above, everything is right but the onPress function of rightbutton, it should be:
`
static navigationOptions = ({navigation}) => {

  const {params} = navigation.state;

  return {
    headerRight: (
      <Button
      title = "Test"
      onPress = {() => params.handleSave && params.handleSave()}/>
    ) }
  }


saveDetails = () => {
  alert('Save Details');
}

componentDidMount () {
  this.props.navigation.setParams({handleSave: () => this.saveDetails()});
}

`

[matthamil]

@boyinfotronics Closing this issue for now. The solutions provided should resolve this issue.

[huanghaiyang]

no headerLeft , example:
add a menu icon on the left

[mahesh963]

Hi, guys i want to navigate my screen to another screen when clicking on the right header button.
Can any one please suggest me how to do this.
static navigationOptions = { title:'Map', headerTintColor: 'white', headerStyle: { backgroundColor: '#f55e69', borderWidth: 1, borderColor: '#f55e66' }, headerTitleStyle: { color: 'white' }, headerRight: <Button title="Details" onPress={() => alert('clicked')}/> }
In that onPress function i want to navigate from current screen(file) to another screen(file)

[aryoputrap]

static navigationOptions = { headerRight: <Button title="Info" />, ...

should work, refer https://reactnavigation.org/docs/intro/headers

thiss nice info