title: React Native Absolute Positioned Component elements onPress events not working
body: <p>I created a custom dropdown component which has a transparent Scrollview with ToucableOpacity elements. However the onPress on them are not working, even though, zIndex is making them appear on top of everything else.</p>
  
  <p>In the main screen, I created two elements, 1 header containing the Dropdown and 2nd one is the body which contains the rest. Its code is given below:</p>
  
  <pre><code>     &lt;View style={styles.body, {zIndex:0}}&gt;
              &lt;View style={[styles.header,{zIndex:1}]}&gt;
                  &lt;Text style={styles.header_text}&gt;Search In &lt;/Text&gt;
                  &lt;Dropdown items={CATEGORIES}/&gt;
              &lt;/View&gt;
              &lt;View style={[styles.main,{zIndex:-1}]}&gt;
                  &lt;Text style={{backgroundColor:'blue'}}&gt;I am the body&lt;/Text&gt;
              &lt;/View&gt;
       &lt;View&gt;
  </code></pre>
  
  <p>I have included the render event markup of the Dropdown element. Its code is given below:</p>
  
  <pre><code>       &lt;View style={styles.container}&gt;
              &lt;TouchableOpacity style={styles.main_container} onPress={this.animate}&gt;
                  &lt;Text style={styles.text}&gt;{this.state.selectedCategoryText}&lt;/Text&gt;
                  &lt;Text&gt;-V-&lt;/Text&gt;
              &lt;/TouchableOpacity&gt;
              &lt;View style={{zIndex:3}}&gt;
                  &lt;Animated.View style={[styles.animated_container,{opacity: this.opacity, zIndex:4}]}&gt;
                      &lt;ScrollView style={{height:60,zIndex:4}}&gt;
                          { this.data.map( (item, i)=&gt;
                               &lt;TouchableOpacity 
                                  style={{zIndex:5}}
                                  disabled={this.state.disabled} 
                                  key={i} 
                                  onPress={()=&gt;this.selectItem(i)}&gt;
                                      &lt;Text &gt;{item} {i}&lt;/Text&gt;
                                &lt;/TouchableOpacity&gt;
                               )}
                      &lt;/ScrollView&gt;
  
                  &lt;/Animated.View&gt;
              &lt;/View&gt;
          &lt;/View&gt;
  </code></pre>
  
  <p>Styles for Dropdown are:</p>
  
  <pre><code>    container:{
         zIndex:2
      },
      main_container:{
         flexDirection: 'row',zIndex:2
     },
     text:{
        fontFamily: fontStyles.PoppinsRegular,
        fontSize: moderateScale(14)
     },
     animated_container:{
        backgroundColor: colors.secondaryWhiteColor,
        position: 'absolute',
        top: '100%',
        width: '100%',
        zIndex:3
    }
  </code></pre>
  
  <p>Screenshot is given as. zIndex makes the elements appear on top but i cannot trigger onPress on Toucable opacities.</p>
  
  <p><a href="https://i.stack.imgur.com/rIN0Y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rIN0Y.png" alt="enter image description here"></a></p>