Header Icon Button

[jonathanroze]

Hey,

I need to put an Icon in the left corner of my Header but, how can i link onPress with a method of my Component ?

I've tried a lot of code but nothing work!

So, if you have already did that, if you have some code piece 👍

Thanks :)

[matthamil]

Can you post what you've tried?

You can use headerLeft https://reactnavigation.org/docs/navigators/stack#headerLeft to render a custom component.

static navigationOptions = ({ navigation }) => ({
  headerLeft: <MyCustomComponent>
});

[lucianomlima]

@matthamil Seizing this issue, when I set a custom button in the headerLeft in a StackNavigator, the back button is no longer displayed.

How can I add a button in headerLeft and keep the back button when a new view is pushed?
Same question: #1417

[vonovak]

closing since the original question is a duplicate of #145

[lylest]

how to add onpress event to that this was added to headerLeft?

[lylest]

static navigationOptions = ({ navigation }) => ({
  headerLeft: <MyCustomComponent>
});

how to add functionality to it

[matthamil]

@lylest , check out this page in the docs: https://reactnavigation.org/docs/en/header-buttons.html#adding-a-button-to-the-header.

Here's an example of adding an onPress to a header button:

class YourScreenComponent extends React.Component {
  static navigationOptions = ({ navigation }) => {
    return {
      headerLeft: (
        <Button
          onPress={navigation.getParam('onPressHeaderButton')}
        />
      ),
    };
  };

  componentDidMount() {
    this.props.navigation.setParams({ onPressHeaderButton: this.showAlert });
  }

  showAlert = () => {
    Alert.alert('Huzzah!', 'You pressed a button in the header!')
  };

  render() {
  // ...
}