TouchableOpacity not working inside an absolute positioned View

AndroidReact Native

Android Problem Overview

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?


<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

Android Solutions

Solution 1 - Android

Look at your import. If import { TouchableOpacity } from 'react-native-gesture-handler'; doesn't work, you need import this from 'react-native'.

Solution 2 - Android

Just add zIndex : 1 to the view containing the buttons.

Also note: adding elevation adds shadow to android button and sometimes elevation may also be a issue if it's 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

Solution 3 - Android

Importing TouchableOpacity from "react-native-gesture-handler" worked for me

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

Solution 4 - Android

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.

Solution 5 - Android

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>

Solution 6 - Android

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

Solution 7 - Android

I fixed this issue by adding in a flex: 1 to each parent, and a height/ width to each. also try pulling out each TouchableOpacity into separate view with flex:1 and adding absolute positioning to the child (text) element. I had an animation on my button so it may be a bit different.

Solution 8 - Android

In my case the touchable items were inside a FlatList. Using FlatList from 'react-native-gesture-handler' solved this issue for me.

Solution 9 - Android

What worked for me are:

  • Making sure I use
    import { TouchableOpacity } from 'react-native';
  • Removing flex: 1 and just having this style for my parent container:
    { width: '100%', height: '100%'}

Solution 10 - Android

I tried all the other answers but could not get it to work. In my case I had a parent container that had the following styles:

.parentContainer {
    height: '100%',
    width: '100%',
    position: 'absolute',
    top: '-20%'

I realized that the children were overflowing out of the parent container and although it was not a big problem in terms of style, all the TouchableOpacity components that overflowed out of the parent container did not work (onPress event did not fire). Basically any TouchableOpacity component that ended up in the bottom 20% of the screen did not work because the parent had been moved up 20% (top: '-20%'). All I had to do was was change the height from 100% to 120% for the parent container and it started working as expected.

Solution 11 - Android

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

Solution 12 - Android

None of this answers here worked for me. I had to use import { TapGestureHandler } from 'react-native-gesture-handler'; and wrap the children elements with <TapGestureHandler onBegan={yourFunc} ></TapGestureHandler >

The benefit of this is that it doesn't affect your styles and also accomplishes the same click effect you want. Generally I prefer this.

Solution 13 - Android

by importing TouchableOpacity from "react-native-gesture-handler" worked for me instead of giving the container View z-index

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


All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionIbrahim AhmedView Question on Stackoverflow
Solution 1 - AndroidThiago LeiteView Answer on Stackoverflow
Solution 2 - AndroidRishav KumarView Answer on Stackoverflow
Solution 3 - AndroidNouarView Answer on Stackoverflow
Solution 4 - AndroidmienaikoeView Answer on Stackoverflow
Solution 5 - AndroidApurva AggarwalView Answer on Stackoverflow
Solution 6 - AndroidWalter ShubView Answer on Stackoverflow
Solution 7 - AndroidAndrewReactDev97View Answer on Stackoverflow
Solution 8 - AndroidTayyab MazharView Answer on Stackoverflow
Solution 9 - AndroidJemzzzzView Answer on Stackoverflow
Solution 10 - AndroidSultan Singh AtwalView Answer on Stackoverflow
Solution 11 - AndroidSerdar D.View Answer on Stackoverflow
Solution 12 - AndroidNewUser134View Answer on Stackoverflow
Solution 13 - Androidmaramzan811View Answer on Stackoverflow