title: How to hide the sidebar when we touch anywhere on the screen in react native
body: <p>I have created a custom sidebar because it was needed for a client request i am able to toggle the side bar on press of a button but, "I need to close the sidebar when i press anywhere on the screen"</p>
  
  <p>I tried to use drawer from react-navigation but was not able to achieve what i wanted.</p>
  
  <pre><code>let width = Dimensions.get('window').width
  let height = Dimensions.get('window').height
  
  class Sample1 extends React.Component { 
      constructor(){
          super()
          this.state = {
              toggleDrawer: false
          }
      }
  
      toggle = () =&gt; {
          this.setState(() =&gt; ({
              toggleDrawer: !this.state.toggleDrawer
          }))
      }
  
      touchAnywhere = () =&gt; {
          this.setState(() =&gt; ({
              toggleDrawer: false
          }))
      }
  
      render () {
          return (
              &lt;View onPress={this.touchAnywhere}&gt;
                  &lt;TouchableOpacity onPress={this.toggle}&gt;
                      &lt;Image
                          source={require('../../images/drawer-150x150.png')}
                      style={{ width: 25, height: 25, marginLeft: "80%" }}
                  /&gt;
              &lt;/TouchableOpacity&gt;
  
              { 
                  this.state.toggleDrawer &amp;&amp; (
                      &lt;View style={styles.menu}&gt;
                          &lt;SideBar 
                          /&gt;
                      &lt;/View&gt;
                  )
              }
          &lt;/View&gt;
      )
    }
  }
  
  const styles = StyleSheet.create({
      menu: {
        flex: 1,
        backgroundColor: 'yellow',
        position : 'absolute',
        left: 0,
        top: 0,
        width : width * 0.8, 
        height : height,
        paddingTop : 10,
        paddingLeft : 10,
        paddingRight : 10,
        paddingBottom : 10
    },
  })
  </code></pre>