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 🙂

Code

<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>
    <TouchableOpacity onPress={() => this.getDocuments('normal')} style={[styles.highNormalLowDocListHeaderStateTextContainer, normalSelected.borderStyle]}>
        <Text style={[styles.highNormalLowDocListHeaderStateText, normalSelected.textStyle]}>NORMAL</Text>
    </TouchableOpacity>
    <TouchableOpacity onPress={() => this.getDocuments('low')} style={[styles.highNormalLowDocListHeaderStateTextContainer, lowSelected.borderStyle]}>
        <Text style {[styles.highNormalLowDocListHeaderStateText, lowSelected.textStyle]}>LOW</Text>
    </TouchableOpacity>
</View>

Screenshot

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)

eg:

buttonContainers:
  {
    zIndex: 1,
    alignSelf: 'flex-end',
    position: 'absolute',
    top:5,
    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

Example:

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

###

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 *