android – React Native – TouchableOpacity not working inside an absolute positioned View-ThrowExceptions

Exception or error:

I’ve got an absolute positioned View that holds 3 TouchableOpacity components and the 3 fail to respond they are just not working at all, what is going wrong here please help me 🙂


<View style={[styles.highNormalLowDocListHeaderStateContainer, {width: this.windowWidth, height: this.headerSmallHeight, position: 'absolute', left: 0, top: floatedHeaderTitleTop, elevation: 2}]}>
    <TouchableOpacity onPress={() => this.getDocuments('high')} style={[styles.highNormalLowDocListHeaderStateTextContainer, highSelected.borderStyle]}>
        <Text style={[styles.highNormalLowDocListHeaderStateText, highSelected.textStyle]}>HIGH</Text>
    <TouchableOpacity onPress={() => this.getDocuments('normal')} style={[styles.highNormalLowDocListHeaderStateTextContainer, normalSelected.borderStyle]}>
        <Text style={[styles.highNormalLowDocListHeaderStateText, normalSelected.textStyle]}>NORMAL</Text>
    <TouchableOpacity onPress={() => this.getDocuments('low')} style={[styles.highNormalLowDocListHeaderStateTextContainer, lowSelected.borderStyle]}>
        <Text style {[styles.highNormalLowDocListHeaderStateText, lowSelected.textStyle]}>LOW</Text>


enter image description here

How to solve:

Look at your import.
If import { TouchableOpacity } from ‘react-native-gesture-handler’; doesn’t work.
You need import this from ‘react-native’


Even though the tab bar visually appears to be above the content in the list, the touch events for the list may be receiving it before the tab bar. Add a zIndex to the tab bar to allow it to receive touch events first.


Dude just go and add zIndex : 1 to the view containing the buttons and boom you are done in most of the cases.
Also note adding elevation adds shadow to android button and sometimes elevation may also be a issue if its added to parent and not added to child then the child button may not work.(Rare Case)


    zIndex: 1,
    alignSelf: 'flex-end',
    position: 'absolute',
    right: 5,
    height: 40,
    borderWidth: 1,
    justifyContent: 'center',
    alignContent: 'center',
    width: 80


If onPress of TouchableOpacity is not working ,In that case TouchableNativeFeedback will work


{ Platform.OS === 'ios' ?
  <TouchableOpacity onPress={() => this.showPassordText()}>
    <Text style={{ color: 'red' }}>SHOW</Text>  
  <TouchableNativeFeedback onPress={() => this.showPassordText()}>
    <Text style={{ color: 'red' }}>SHOW</Text>


Often when do absolute positioning you have to put a zIndex because the absolute postponed ui view is sometimes being rendered behind another view


Importing TouchableOpacity from “react-native-gesture-handler” worked for me

import { TouchableOpacity} from 'react-native-gesture-handler'


Your absolute element is probably placed in a relative element. If you want to click it, you should remove parent relative rule.

Leave a Reply

Your email address will not be published. Required fields are marked *