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.

Solution 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:

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:

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:

use onPressIn instead of onPress

That made the area clickable!