title: Touchable presses not firing in absolute positioned container with zIndex (for a dropdown)
body: <p>I have been trying to tweak the styles and elements render order so that Android and iOS behave the same. Did a lot of research and the current answers don't seem to solve the issue. </p>
  
  <ul>
  <li><strong>Product</strong>: I am writing a cross platform dropdown component</li>
  <li><strong>Issue/Behavior</strong>: On iOS the presses fire correctly, however on android they fall off.</li>
  <li><strong>Example</strong>: <a href="https://codepen.io/anon/pen/WWopew" rel="noreferrer">Here is a codepen showing what it should do</a> <strong>Please fork it if you want to make changes on the codepen</strong> </li>
  </ul>
  
  <p>The issue is <strong>this exact code works on iOS but not on an Android device</strong>. </p>
  
  <pre><code>class Dropdown extends React.Component {
    constructor() {
      super()
      this.state = {
        open: false,
        selected: undefined,
      }
    }
  
    handleSelectPress = () =&gt; {
      this.setState({open: !this.state.open});
    }
    handleOptionPress = (item) =&gt; {
      this.setState({selected: item, open: !this.state.open});
      this.props.onSelectOption(item);
    }
    render () {
      const { selected = {}, open } = this.state
      const { placeholder = '', options = [] } = this.props
  
      return (
        &lt;Select
          onPress={this.handleSelectPress}
          value={selected.name || placeholder}
          open={open}
          options={options}
          onOptionPress={this.handleOptionPress} /&gt;
      )
    }
  }
  
  const shadowStyles = {
    ios: {
      shadowOpacity: 0.3,
      shadowRadius: 3,
      shadowOffset: {
          height: 1,
          width: 1,
      },
    },
    android: {
      elevation: 5,
    },
  }
  
  class Select extends React.PureComponent {
    render () {
      const { value, open, options, onOptionPress } = this.props
      const shadowStyle = shadowStyles[Platform.OS]
      return (
        &lt;View style={[shadowStyle, styles.wrap]}&gt;
          &lt;TouchableWithoutFeedback onPress={this.props.onPress}&gt;
            &lt;View style={styles.selectContainer}&gt;
              &lt;Text&gt;{value}&lt;/Text&gt;
            &lt;/View&gt;
          &lt;/TouchableWithoutFeedback&gt;
          {open &amp;&amp; &lt;View style={styles.menu}&gt;
            { options.map( (item, idx) =&gt; &lt;Option value={item} key={idx} onPress={onOptionPress} /&gt;)}
          &lt;/View&gt;}
        &lt;/View&gt;
  
      )
    }
  }
  
  class Option extends React.PureComponent {
    handlePress = () =&gt; {
      this.props.onPress(this.props.value)
    }
    render () {
      const { value } = this.props
      return (
        &lt;TouchableOpacity onPress={this.handlePress}&gt;
          &lt;View style={styles.optionContainer}&gt;
            &lt;Text&gt;{value.name}&lt;/Text&gt;
          &lt;/View&gt;
        &lt;/TouchableOpacity&gt;
      )
    }
  }
  
  class App extends React.Component {
    render() {
      return (
        &lt;View style={styles.root}&gt;
          &lt;Dropdown
            placeholder="--- SELECT ---"
            options={
              [
                { name: "Press me!", id: "1" },
                { name: "No Me!", id: "2" },
                { name: "Cmon guys, here!", id: "3" },
              ]
            }
            onSelectOption={ (item) =&gt; console.log(`item pressed! ${item}`)}
          /&gt;
        &lt;/View&gt;
      )
    }
  }
  
  const styles = StyleSheet.create({
      root: {
        width: 360,
        height: 640,
        backgroundColor: '#292c2e'
      },
      wrap: {
        position: 'relative',
        zIndex: 10,
        backgroundColor: 'rgb(73,75,77)'
      },
      selectContainer: {
        padding: 16,
      },
      menu: {
        backgroundColor: 'rgb(73,75,77)',
        position: 'absolute',
        top: '100%',
        left: 0,
        right: 0,
        maxHeight: 300
      },
      optionContainer: {
        padding: 16
      }
  
    });
  </code></pre>
  
  <p><strong>React Native version - 0.59.3</strong></p>
  
  <p>Few things to note:</p>
  
  <ul>
  <li>I'm not looking for a package that already does this.</li>
  <li>I'm using <code>zIndex</code> so that the menu element is rendered on top of other elements (rendered after the dropdown component). </li>
  <li>I tried using <code>TouchableHighlight</code>, <code>TouchableOpacity</code>, <code>TouchableWithoutFeedback</code> and for android only <code>TouchableNativeFeedback</code></li>
  <li>I tried changing the "menu" element between a <code>View</code> and a <code>ScrollView</code> (initially was scroll)</li>
  <li>I played around with elevation and z-index on the option / touchables</li>
  <li>The touch on the <code>Select</code> that toggles the <code>open</code> flag works properly on both Android and iOS so I'm pretty sure its narrowed down to an absolute positioned parent.</li>
  <li>I'm planning on adding animations, polishing the styles... etc (acutally using styled-components in the project). But first need it to function :D</li>
  </ul>