I am very new with react native. I am using a header from react-native-elements in my app. This is my code

<Header
  leftComponent={{ icon: 'menu', color: '#fff' }}
  centerComponent={{ text: 'MY TITLE', style: { color: '#fff' } }} 
  rightComponent={{ icon: 'home', color: '#fff' }}
/>

I was not able to found any example on how to detect the clicks on the icons and if possible show an extra view. My goal is to achieve something like this : Do you have any example or sample code?

I am very new with react native. I am using a header from react-native-elements in my app. This is my code

<Header
  leftComponent={{ icon: 'menu', color: '#fff' }}
  centerComponent={{ text: 'MY TITLE', style: { color: '#fff' } }} 
  rightComponent={{ icon: 'home', color: '#fff' }}
/>

I was not able to found any example on how to detect the clicks on the icons and if possible show an extra view. My goal is to achieve something like this : Do you have any example or sample code?

• javascript
• reactjs
• react-native

Share Improve this question Follow asked Oct 13, 2017 at 8:44 j.doej.doe 4,88966 gold badges2424 silver badges3131 bronze badges 2

• In the link you passed, it seems you can pass react ponent (leftComponent={<MyCustomLeftComponent />}), so you can handle the click on the ponent you will pass, can't you? – sjahan Commented Oct 13, 2017 at 8:47
• I guess you can pass onClick to the ponent. Something like this, leftComponent={{ icon: 'menu', color: '#fff', onClick={//your function} }} – Arslan Tariq Commented Oct 13, 2017 at 8:51

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

Write : insted of = , onPress will work

  <Header 
     leftComponent={ {text:'ok',color: '#fff', onPress: () => this.myFunction()}}
     centerComponent={{ text: 'MY TITLE', style: { color: '#fff' } }}
  />

or you can pass your own ponent like

 leftComponent={<MyCustomLeftComponent />}

You have to use onPress instead of onClick.

 <Header
    leftComponent={{ icon: 'menu', color: '#fff' }}
    centerComponent={{ text: 'MY TITLE', style: { color: '#fff' } }} 
    rightComponent={{ icon: 'home', color: '#fff' onPress={() => this.yourFunction} }}
 />