'Touchablehighlight not clickable if position absolute

I have a Touchablehighlight that I need to position absolute, but it becomes unclickable after I do it.

What could cause this? It functions like it should if I dont have the position set to absolute.

react-native

Solution 1:^[1]

Solution was to change the order of the components.

What i originally had:

<TouchableHighLight><Text>Click me</Text></TouchableHighlight>
<View> .... </View>

This was the fix:

<View>...</View>
<TouchableHighLight><Text>Click me</Text></TouchableHighlight>

Solution 2:^[2]

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
  },

Solution 3:^[3]

SOLVED:

I faced this issue today. I have solved it.

Import TouchableOpacity from react-native-gesture-handler instead of react-native.

Before:

import {TouchableOpacity} from "react-native";

After:

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

Solution 4:^[4]

use onPressIn instead of onPress

That made the area clickable!

Solution 5:^[5]

I used TouchableOpacity inside an absolute view. The onPress function was not called after press it. But the opacity changed. I've tried all the above solutions, but none works.

My solutions is use onPressIn instead of onPress.

It seems like the inner action of Touchable* is weird in ReactNative when it's in an absolute view.

Solution 6:^[6]

After trying everything for two hours, the solution I found was to change my button position.

Before ...

  export default class Navbar extends Component {

  componentDidMount() {
    console.log(this.props);
  }

  render() {
    return (
      <View style={styles.content}>
        <TouchableOpacity
          onPress={this.props.openModal}
          style={styles.containerButton}
        >
          <Text>New</Text>
        </TouchableOpacity>
        <Text style={styles.textCenter}>Remember me</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  content: {
    paddingTop: 30,
    paddingBottom: 10,
    backgroundColor: '#81C04D',
    flexDirection: 'row'
  },
  containerButton: {
    position: 'absolute',
    top: 30,
    left: 8
  },
  textCenter: {
    flex: 1,
    textAlign: 'center',
    fontWeight: 'bold'
  }
});

After ...

export default class Navbar extends Component {

  componentDidMount() {
    console.log(this.props);
  }

  render() {
    return (
      <View style={styles.content}>
        <Text style={styles.textCenter}>Remember me</Text>
        <TouchableOpacity
          onPress={this.props.openModal}
          style={styles.containerButton}
        >
          <Text>New</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  content: {
    paddingTop: 30,
    paddingBottom: 10,
    backgroundColor: '#81C04D',
    flexDirection: 'row'
  },
  containerButton: {
    position: 'absolute',
    top: 30,
    left: 8
  },
  textCenter: {
    flex: 1,
    textAlign: 'center',
    fontWeight: 'bold'
  }
});

It works!!!

Solution 7:^[7]

My solutions is:

style:{
    zIndex: 1,
    position: 'absolute',
 }

Solution 8:^[8]

For me, it works like:

import { TouchableOpacity } from 'react-native';

onPress, zIndex: 1, position: 'absolute'

Solution 9:^[9]

One more solution.....

For me what worked was a combination of things....

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

and I WRAPPED my TouchableOpacity in a View.

before:

<TouchableOpacity onPress={()=> addCallback()}
    style={styles.addButtonHolder}
> 
    <PlusCircle style={styles.addButton} width={70} height={70} stroke={"white"} strokeWidth={3}/>
</TouchableOpacity>

after:

<View style={styles.addButtonHolder}>
    <TouchableOpacity onPress={()=> addCallback()}> 
        <PlusCircle style={styles.addButton} width={70} height={70} stroke={"white"} strokeWidth={3}/>
    </TouchableOpacity>
</View>

StyleSheet:

const styles = StyleSheet.create({

    addButtonHolder: {
        position: 'absolute',
        bottom: 70,
        right: 10,
        justifyContent: 'center', 
        alignItems: 'center',
        zIndex: 1,
    },
    addButton: {
        backgroundColor: '#b4cffa',
        borderRadius: 35
    }
})

Solution 10:^[10]

This worked for me

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

and changed onPress to onPressIn

<TouchableOpacity onPressIn={() => console.log('clicked')}></TouchableOpacity>

Solution 11:^[11]

use zIndex: 1 in view, it'll work.

<View style={{position : 'absolute', marginTop : 25, zIndex: 1}}>

More details can be found here :

How to use zIndex in react-native

Solution 12:^[12]

This props help to disable ScrollView to catch all touches and let child handles

 keyboardShouldPersistTaps='always'

'always', the keyboard will not dismiss automatically, and the scroll view will not catch taps, but children of the scroll view can catch taps.
'handled', the keyboard will not dismiss automatically when the tap was handled by children of the scroll view (or captured by an ancestor).

https://reactnative.dev/docs/scrollview#keyboardshouldpersisttaps

Solution 13:^[13]

When the position is absolute, TouchableHighlight or TouchableOpacity goes beneath from the surface. You have to add a higher zIndex value to the Container.

Solution 14:^[14]

My solution was to import TouchableHighlight from 'react-native'

It was originally imported from 'react-native-gesture-handler'

Solution 15:^[15]

He guy, I took a long time to find out why this happens. I tested a lot of the solution here. Two things worked for:

The first answer here
The second one is to add elevation and zIndex on the wrapper container

<View style={{  zIndex:0 }>
 ...
 <View style={{ position: 'absulote', zIndex:10 ,elevation: 10 }}>
    <TouchableHighLight><Text>Click me</Text></TouchableHighlight>
 </View>
 <View> .... </View>
 ...
</View>

If I am right, the reason for that is even that the button is shown, Android treats differently the layers of the Press events and you need to set a low level for the rest of your components. Defining a lower level for your wrapper component, all its children without this attribute will automatically inherit from the parent.

Solution 16:^[16]

My problem was quite different, a backgroundColor style property was set on the container of my button. The color didn't work. I missed to remove this useless property. Finally, this backgroundColor was making an invisible sheet above my button. Removing it make it clickable again.

I faced the problem only on Android.

Solution 17:^[17]

Add a zIndex to the component where you added position absolute. This solved the issue for me.

position: 'absolute',
zIndex: 1,

Solution 18:^[18]

I ran into a similar problem, what I did was, I enclosed the whole thing into a new View and instead of giving 'absolute' position to the TouchableOpacity, I gave it to the parent View. That made the Opacity again clickable somehow. Here is the code snippet of before and after

My Code before

<TouchableOpacity
    onPress={() => {
        console.log("hah");
    }}
    style={{
        height: 50, width: 50,
        backgroundColor: 'rgb(90,135,235)',
        borderRadius: 25, alignItems: 'center',
        justifyContent: 'center', right: 0,position:'absolute'
    }}>
    <Image source={require('../assets/images/element-acorn-white.webp')}
        style={{ height: 30, width: 30, resizeMode: 'contain' }} />
</TouchableOpacity>

After Wrapping into a View with 'absolute'

<View style={{
    alignItems: 'flex-end', position: 'absolute',
    bottom: Dimensions.get('screen').height / 5
}}>
    <TouchableOpacity
        onPress={() => {
            console.log("hah");
        }}
        style={{
            height: 50, width: 50,
            backgroundColor: 'rgb(90,135,235)',
            borderRadius: 25, alignItems: 'center',
            justifyContent: 'center', right: 0,
        }}>
        <Image source={require('../assets/images/element-acorn-white.webp')}
            style={{ height: 30, width: 30, resizeMode: 'contain' }} />
    </TouchableOpacity>
</View>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	mistenkt
Solution 2
Solution 3	Enkhtulga Gantsagaan
Solution 4	Pavlo Savchuk
Solution 5	???
Solution 6	Marco Weber
Solution 7	4b0
Solution 8	Daniel Cassiano Chaves
Solution 9	Cyphire
Solution 10	Mohammad Shahzaib
Solution 11	jpm
Solution 12	Ali Mammadli
Solution 13	Nadun Sirimevan
Solution 14	Alexander Danilov
Solution 15	Isaac Israel
Solution 16	Corentin DUPONT
Solution 17	NavneetKaur0111
Solution 18	Abubakar Mughal

'Touchablehighlight not clickable if position absolute

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]

Solution 11:[11]

Solution 12:[12]

Solution 13:[13]

Solution 14:[14]

Solution 15:[15]

Solution 16:[16]

Solution 17:[17]

Solution 18:[18]