React Native android: An absolute positioned, touchable element outside of the bounds of its parent is not clickable

Question

I have a TouchableOpacity inside of a view. The view is small (height: 60) and the TouchableOpacity lies outside the bounds of its parent (position: absolute, top: 70). When the child is inside of the parent, i.e. top: 30, it's clickable, but when it's outside, it's not. And only the regions inside of the parent view are clickable (touch events pass through the regions out of bounds). Does anyone know of a way to register TouchableOpacity clicks even when it's outside the bounds of its parent?

Note that this works on iOS. It seems to only be a bug on android.

<View style={{height: 60, width: '100%', zIndex: 1}}> <TouchableOpacity onPress={() => console.log('pressed')} style={{position: 'absolute', zIndex: 2, backgroundColor: 'yellow', width: 100, height: 50, top: 70}} /> </View>

have you tried setting elevation:1? Android generally ignores zIndex — Mike M
– Mike M, Commented Nov 12, 2019 at 20:02
@MikeM Thanks for the suggestion! I just tried it, but still not working :/ — Travis Ho
– Travis Ho, Commented Nov 12, 2019 at 21:47
Did you find a solution to this? I'm having a similar problem — mayankmehtani
– mayankmehtani, Commented Jan 10, 2020 at 12:15

Aliaksei Litsvin · Accepted Answer · 2021-12-15 16:41:27Z

1

The best workaround so far is to

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

Solution was found here.

answered Dec 15, 2021 at 16:41

Aliaksei Litsvin

1,30112 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Native android: An absolute positioned, touchable element outside of the bounds of its parent is not clickable

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related