title: How to capture all clicks outside of a React Native component?
body: <p>I am trying to figure out how I can capture all click events to determine if they were clicked outside of my SearchBar drop down menu.  If so then the drop down menu will close.  I have a way of detecting all click events (TouchableWithoutFeedback) but I am not able to figure out a way to compare or determine if it was outside of my component or not.  Anyone know how to do this in React Native??</p>
  
  <pre><code>class Products extends Component {
  
      constructor(props) {
          super(props);
  
          this.hideSearchBar = this.hideSearchBar.bind(this);
      }
  
      hideSearchBar(e) {
          console.log('e: ', e.nativeEvent.target)
          // Determine if the click event was outside of the SearchBar component
      }
  
      render() {
          const {isLoading, products} = this.props.products;
  
          return (
              &lt;TouchableWithoutFeedback onPress={(e) =&gt; this.hideSearchBar(e)} style={{zIndex: 0}}&gt;
                  &lt;View style={styles.wrapper}&gt;
                      &lt;Header/&gt;
                      &lt;View style={styles.bodyWrapper}&gt;
                          &lt;ScrollView style={styles.scrollView}&gt;
                              &lt;ProductsContainer data={{productsList: { results: products }}}/&gt;
                          &lt;/ScrollView&gt;
                          &lt;SearchBar ref={node =&gt; this.node = node} style={styles.searchBar}/&gt;
                      &lt;/View&gt;
                      &lt;Footer/&gt;
                  &lt;/View&gt;
              &lt;/TouchableWithoutFeedback&gt;
          );
      }
  }
  </code></pre>