Menu
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>
698
position in React Native is similar to regular CSS, but everything is set to relative by default, so absolute positioning is always relative to the parent. If you want to position a child using specific numbers of logical pixels relative to its parent, set the child to have absolute position.
activeOpacity Determines what the opacity of the wrapped view should be when touch is active. Defaults to 0.2 .
hitSlop This defines how far your touch can start away from the button. This is added to pressRetentionOffset when moving off of the button. The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.
zIndex is the Expo and React Native analog of CSS's z-index property which lets the developer control the order in which components are displayed over one another.
The best workaround so far is to
import { TouchableOpacity } from 'react-native-gesture-handler';
Solution was found here.
62
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
