react-native: React Native Android: An absolute positioned, TouchableOpacity outside of the bounds of its parent is not clickable

How can we organize the 2 years anniversary party of this issue, guys? Who brings beer?

Best workaround so far, for me, it was react-native-gesture-handler. Just import TouchableOpacity from gesture handler and replace RN Touchables, if Touchables disappear use containerStyle prop instead of style prop.

Render the absolute positioned touchable component as the last child worked for me. Also, I’ve enveloped the entire component into a fragment. Example:

const Screen = () => (
  <>
    <ScreenContent />
    <TouchableOpacity style={{position: 'absolute'}} />
  </>

)

A temporary workaround is to import TouchableOpacity from react-native-gesture-handler. That’s how I got it working after a wasted day of messing with position: 'absolute'.

please merge, this issue is driving me nuts

Its a shame that one of the most important design feature doesn’t work properly with touchables in overflown area, the issue and the related PR is lingering on for over an year, I hope someone gives it another look and solve the biggest hassle for design implementation, if its working fine in iOS it should replicate the behavior in android too.

We really need this issue to be fixed.

Custom Dropdown inside header is not clickable Pressable or Text inside the dropdown is not clickable

CustomDropdown Component

if (toggle) { return ( <View style={styles.modal}> <FlatList style={{ zIndex: 1 }} data={lists} renderItem={(data: any) => ( <Pressable style={{ backgroundColor: “red”, marginVertical: 2, zIndex: 10 }} onPress={() => console.log(“hello clicked me”)} > <Text>{data.item.name}</Text> </Pressable> )} keyExtractor={(item) => “” + item.value} /> </View> ); }

Screen Component where dropdown is rendered

<Stack.Screen name=“Home” component={HomeRoutes} options={({ route }) => ({ headerRight: () => ( <> <Icon onPress={() => setToggle(!toggle)} name=“ellipsis-vertical” size={28} color=“#7E7E7E” /> <CustomDropdown toggle={toggle} lists={[ { name: “Invite Friend”, value: “invitefriend” }, { name: “Help”, value: “help” }, { name: “About”, value: “Deleted” }, { name: “Terms & Conditions”, value: “termandcondition” }, { name: "Privacy Policy ", value: “privacy” }, ]} listPressd={ListPressed} />

						</>
					),
					headerTitle: getHeaderTItle(route),
				})}
			/>
			<Stack.Screen
				name="createProfile"
				component={EditProfile}
				options={({ navigation }) => ({
					headerLeft: () => (
						<Icon
							onPress={() => navigation.goBack(null)}
							style={{ marginLeft: 10 }}
							name="arrow-back"
							size={28}
							color="#7E7E7E"
						/>
					),
				})}
			/>

const [toggle, setToggle] = useState(false);
const [toggleData, setToggleData] = useState("");
const ListPressed = (data: IlistPressed) => {
	console.log("dell", data);
	setToggle(false);
	setToggleData(data.item.value);
};

Styles

const styles = StyleSheet.create({ modal: { zIndex: 1, position: “absolute”, right: 0, top: 25, backgroundColor: “#ffff”, width: 100, borderRadius: 5, paddingVertical: 10, paddingLeft: 10, shadowOffset: { width: 0, height: 2, }, shadowOpacity: 0.25, shadowRadius: 3.84,

	elevation: 5,
},

});

0.63’s Pressable have same problem

This is still reproducible on version 0.61.5. any fixes?

I’m still seeing this bug in 0.61.5 on Android. A fix would be amazing.

This is a shame honestly. I love RN but I am surprised how long this issue has gone. We celebrated one year anniversary of this issue. 😅

👀

A simple fix for this is to position your absolute positioned components at the root of your page

I’m having the same problem, but I’ve come across #26374 which I think should fix it if/when it’s merged?

Any update? Touch is passing throught absolute View…

A temporary workaround is to import TouchableOpacity from react-native-gesture-handler. That’s how I got it working after a wasted day of messing with position: 'absolute'.

same issue react-native 0.63.4 in android if i use touchableOpacity from ‘react-native-gesture-handler’, This seems to be bubbling between the touch layers.

https://github.com/software-mansion/react-native-gesture-handler/issues/784

fundamental problem solving seems to be needed on the RN side.

@ZioVio sounds that this problem was solved in 0.66 version, look: https://github.com/facebook/react-native/commit/e35a963bfb93bbbdd92f4dd74d14e2ad6df5e14a

Meanwhile the version 0.65 is being launched to add more and more bugs… it’s so sad that a beautiful tech like React Native is taking this direction, the fundamentals don’t work as expected and no one gives a shit.

Same issue here with Pressable

Why is it waiting for so long here? It’s basic funcionality!

I found a workable hack, use the BaseButton from react-native-gesture-handler almost exclusively. It manages presses on the correct visible layer and it prevents taps to bubble through and activate several at once (if the ones underneath are also BaseButton)

Theres a massive effort going on the have eyes on all these fixes: https://github.com/facebook/react-native/projects/17#card-65759870 to track the statuses

@PrimulaX It works, thanks!

How can we organize the 2 years anniversary party of this issue, guys? Who brings beer?

Will there be cake?

This issue prevents the use of the custom header feature on react-navigation with headers set to position: absolute. As you can’t add the element last because the layouting is done internally, it just does not work. The only way to do this is turning off the react-navigation custom header feature and create a header locally in every screen implementation.

Render the absolute positioned touchable component as the last child worked for me. Also, I’ve enveloped the entire component into a fragment. Example:

const Screen = () => (
  <>
    <ScreenContent />
    <TouchableOpacity style={{position: 'absolute'}} />
  </>

)

Saved my Day 👯‍♂️

@PrimulaX thanks! also works with TouchableWithoutFeedback

BaseButton hack isn’t working for me. The problem still exists in React Native 0.64.

Having the same issue with Pressables. The proposed workarounds didn’t work for me. What else can I do?

@sriram-kailasam Not working

I tried using the same.