title: React Native Navigator custom button onPress
body: <p>I'm using react-native-navigation as my navigation in an app and I have used the left / right button option (static navigatorButtons) to implement some buttons on each side of the navbar which I can use with onNavigatorEvent(event) and check which one was pressed with event.id</p>
  
  <p>Those work fine but now I have added some custom buttons in the middle using a component (Custom Bar). The issue is I have no idea how to detect onPress of those buttons. The onNavigatorEvent(event) doesn't seem to detect them and not sure how to do this.</p>
  
  <p>Basically I want to display listA if leftButton is pressed or listB if rightButton is pressed but don't know how to listen to the onPress event</p>
  
  <p>Custom Bar</p>
  
  <pre><code>import stuff needed
  
  export default class TopBar extends Component {
     constructor(props) {
        super(props);
  
        this.state = {
          leftPressed: true,
          rightPressed: false
        };
  
        this.leftButton = this.leftButton.bind(this);
        this.rightButton = this.rightButton.bind(this);
     }
  
     leftButton(){
        this.setState({
           leftPressed: true,
           rightPressed: false
        })
     }
  
     rightButton(){
        this.setState({
           leftPressed: false,
           rightPressed: true
        })
     }
  
     render() {
        return (
          &lt;View style={Styles.container}&gt;
             &lt;View style = {[Styles.wrapper, {borderTopLeftRadius: 20, borderBottomLeftRadius: 20}]}&gt;
             &lt;TouchableOpacity style={[Styles.button, {alignSelf: 'flex-start'}]} onPress={ this.leftButton }&gt;
                &lt;Text style={[Styles.text, this.state.leftPressed &amp;&amp; Styles.textSelected]}&gt;All Tasks&lt;/Text&gt;
             &lt;/TouchableOpacity&gt;
             &lt;/View&gt;
             &lt;View style = {[Styles.wrapper, {borderTopRightRadius: 20, borderBottomRightRadius: 20}]}&gt;
             &lt;TouchableOpacity style={[Styles.button, {alignSelf: 'flex-start'}]} onPress={ this.rightButton }&gt;
                &lt;Text style={[Styles.text, this.state.rightPressed &amp;&amp; Styles.textSelected]}&gt;My Tasks&lt;/Text&gt;
             &lt;/TouchableOpacity&gt;
             &lt;/View&gt;
          &lt;/View&gt;
        );
     }
  }
  </code></pre>
  
  <p>Main Screen</p>
  
  <pre><code>import other stuff needed
  import TopBar from '../_shared/components/TopBar';
  
  Navigation.registerComponent('task.TopBar', () =&gt; TopBar);
  class TaskListComponent extends BaseView {
     static navigatorButtons = {
         rightButtons: [
             {
              id: 'Filter',
              icon: require('../_shared/components/Images/tune.png'),
             },
             {
              id: 'Search',
              icon: require('../_shared/components/Images/search.png'),
             }
         ],
         leftButtons: [
             {
              id: 'Create',
              icon: require('../_shared/components/Images/plus.png'),
             },
         ]
     }
  
     constructor(props) {
         super(props);
  this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
      this.state = {
          tasklist: props.TaskList || null
      };
  
     onNavigatorEvent(event) {
         if (event.type == 'NavBarButtonPress') {
             if (event.id == 'Create') {
                 this.createTask()
             }
             if (event.id == 'Search') {
                 this.searchTask()
             }
             if (event.id == 'Filter') {
                 this.filterTask()
             }
         }
     }
  
  //code for the left/right buttons goes here
  
     componentDidMount() {
         this.props.navigator.setStyle({
             navBarCustomView: 'task.TopBar',
             navBarComponentAlignment: 'center',
         });
     }
  
     render() {
         if (TopBar leftPressed true) { //I know this is wrong just explaining the logic
             return (
                 &lt;View&gt;
                     //some stuff
                 &lt;/View&gt;
             );
         } else {
             return (
                 &lt;View&gt;
                     //other stuff
                 &lt;/View&gt;
             )
         }
     }
  }
  </code></pre>