title: React Native - how to catch touch events behind an absolute position component
body: <p>I'm trying to have a popup dialog (created as a component with position: 'absolute') and to close it when user clicks outside of the popup.</p>
  
  <p>I'm new to React Native so other things I did might be wrong, forgive me for that :)</p>
  
  <p>This is a screenshot of the popup when it is open
  <a href="https://i.stack.imgur.com/RMIPi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RMIPi.png" alt="enter image description here"></a></p>
  
  <p>This is some of the code:</p>
  
  <p>From the Popup component:</p>
  
  <pre><code>render() {
      if (!this.props.open) {
        return &lt;View /&gt;
      }
      return (
        &lt;View style={styles.container}&gt;
          &lt;View style={styles.popupStyle}&gt;
              &lt;View style={{flex:1, justifyContent: 'center', marginRight: 10}}&gt;
                  &lt;View style={styles.amountEnterStyle}&gt;
                    &lt;TextInput
                      keyboardType={'numeric'}
                      underlineColorAndroid='transparent'
                      autoCorrect={false}
                      style={styles.textInputStyle}
                      value={this.state.amount}
                      onChangeText={this._onAmountEnter.bind(this)} /&gt;
                    &lt;Text style={styles.currencyTextStyle}&gt;NIS&lt;/Text&gt;
                  &lt;/View&gt;
                  &lt;View style={styles.separatorStyle} /&gt;
                      &lt;View style={styles.categorySectionStyle}&gt;
                        {this._renderCategoryDropdown()}
                      &lt;/View&gt;
                &lt;/View&gt;
              &lt;View style={{justifyContent: 'center'}}&gt;
                &lt;TouchableWithoutFeedback
                  onPress={this._onAddPaymentClicked.bind(this)} &gt;
                  &lt;View style={{width: 110, height:100, backgroundColor: "#ff0000"}} /&gt;
                &lt;/TouchableWithoutFeedback&gt;
              &lt;/View&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      );
  
  const styles = StyleSheet.create({
      container: {
        position: 'absolute',
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
        width: undefined,
        height: undefined,
        justifyContent: 'center',
        alignItems: 'center',
      },
      amountEnterStyle: {
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: 'row'
      },
      textInputStyle: {
        width: 100,
        fontSize: 50,
        fontWeight: 'bold',
        height: 65,
        flex: 1,
        marginTop: -20,
        paddingBottom: 0,
        marginBottom: 0,
        marginLeft:10,
        textAlignVertical: 'center'
      },
      currencyTextStyle: {
        fontSize: 50,
        color: '#c0c0c0',
        marginTop: -20,
        textAlignVertical: 'center'
      },
      separatorStyle: {
        height: 2,
        marginTop: 0,
        backgroundColor: '#c0c0c0',
      },
      categorySectionStyle: {
          justifyContent: 'flex-start',
          flexDirection: 'row',
          alignItems: 'flex-start',
          marginTop: 8
      },
      categoryColorDotStyle: {
        width: 20,
        height: 20,
        borderRadius: 100/2,
        marginLeft: 10,
        marginTop: 5,
      },
      categoryTextStyle: {
        fontSize: 24,
        marginHorizontal: 4,
        color: '#c0c0c0',
        marginLeft: 10,
        paddingRight: 10,
        marginTop: -3
      },
      popupStyle: {
        width: Dimensions.get('window').width - 60,
        flexDirection: 'row',
        justifyContent: 'space-between',
        height: 150,
        paddingRight:10,
        paddingLeft:10,
        borderRadius: 2,
        margin: 20,
        padding: 10,
        opacity: 1,
        borderRadius: 10,
        backgroundColor: '#ffffff'
     },
     dropdownSeparator: {
      height: 1,
      backgroundColor: 'cornflowerblue'
    },
  </code></pre>
  
  <p>And this is the hosting component:</p>
  
  <pre><code>render() {
      var totalIncome = this.props.balance.totalIncome;
      var totalExpanses = this.props.balance.totalExpanses;
      return (
        &lt;View style={{flex:1, justifyContent: 'space-between'}}&gt;
          &lt;Image pointerEvents='none' source={require('../../res/background.png')} style={styles.container} /&gt;
          &lt;MainScreenHeader onSettingPress={this._onBalanceSettingsPress.bind(this)}/&gt;
          &lt;MainBalanceCounter totalCount={totalIncome} currentCount={totalIncome-totalExpanses} /&gt;
          &lt;View style={{justifyContent: 'center', alignItems: 'center', marginBottom: 150}}&gt;
            &lt;AddPaymentButton onPress={this._onAddPaymentPress.bind(this)} /&gt;
            &lt;PaymentPopup
                open={this.state.paymentPopupOpen}
                onAddPaymentClicked={this._onPaymentPopupAddClicked.bind(this)} /&gt;
          &lt;/View&gt;
  
        &lt;/View&gt;
      );
    }
  
  
  const styles = StyleSheet.create({
    container: {
      position: 'absolute',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      width: undefined,
      height: undefined,
      backgroundColor:'transparent',
      justifyContent: 'center',
      alignItems: 'center',
    },
    innerContainer: {
      justifyContent: 'space-around',
      alignItems: 'center',
      flex: 1,
      backgroundColor: 'transparent'
    },
  });
  </code></pre>
  
  <p>I was trying man things to have a view that will catch clicks that happens outside of the popup, but no success.</p>
  
  <p>Any help will be much appreciated,</p>
  
  <p>Thanks,
  Giora.</p>