TouchableOpacity not working inside an absolute positioned View
<p>I have an absolute-positioned View that holds three TouchableOpacity components, and the three fail to respond they are just not working at all. What is going wrong here?</p>
<p><strong>Code</strong></p>
<pre><code>&lt;View style={[styles.highNormalLowDocListHeaderStateContainer, {width: this.windowWidth, height: this.headerSmallHeight, position: 'absolute', left: 0, top: floatedHeaderTitleTop, elevation: 2}]}&gt;
    &lt;TouchableOpacity onPress={() =&gt; this.getDocuments('high')} style={[styles.highNormalLowDocListHeaderStateTextContainer, highSelected.borderStyle]}&gt;
        &lt;Text style={[styles.highNormalLowDocListHeaderStateText, highSelected.textStyle]}&gt;HIGH&lt;/Text&gt;
    &lt;/TouchableOpacity&gt;
    &lt;TouchableOpacity onPress={() =&gt; this.getDocuments('normal')} style={[styles.highNormalLowDocListHeaderStateTextContainer, normalSelected.borderStyle]}&gt;
        &lt;Text style={[styles.highNormalLowDocListHeaderStateText, normalSelected.textStyle]}&gt;NORMAL&lt;/Text&gt;
    &lt;/TouchableOpacity&gt;
    &lt;TouchableOpacity onPress={() =&gt; this.getDocuments('low')} style={[styles.highNormalLowDocListHeaderStateTextContainer, lowSelected.borderStyle]}&gt;
        &lt;Text style {[styles.highNormalLowDocListHeaderStateText, lowSelected.textStyle]}&gt;LOW&lt;/Text&gt;
    &lt;/TouchableOpacity&gt;
&lt;/View&gt;
</code></pre>
<h3>Screenshot</h3>
<p><a href="https://i.stack.imgur.com/kLCUU.png" rel="noreferrer"><img src="https://i.stack.imgur.com/kLCUU.png" alt="enter image description here" /></a></p>