I have 3 simple react components-
First the actual view(let us name this screen A)-
return(
<ImageBackground
...
>
<ScrollView>
<ChildButton
onPress={this.someFunction.bind(this)}
/>
</ScrollView>
</ImageBackground>
)
Then there is the ChildButton component---
return(
<ChildButton>
<Button
style={...someStyleObject}
onPress={this.props.onPress}
>
</Button>
</ChildButton>
)
and then there is Button component ---
return (
<TouchableOpacity
onPress={this.props.onPress}
>
{this.props.children}
</TouchableOpacity>
)
The main problem here is my onPress is not getting called from screen A, only on Android. It is working fine on iOS. What are the possible causes here?
Note: I've put consoles inside ChildButton and Button component and they are not getting printed.
Touchables The "Touchable" components provide the capability to capture tapping gestures, and can display feedback when a gesture is recognized. These components do not provide any default styling, however, so you will need to do a bit of work to get them looking nicely in your app.
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.
Pressable is a Core Component wrapper that can detect various stages of press interactions on any of its defined children.
To simply disable the button, we can use the disabled prop in our button element and set its value to true . If we want to disable our button after clicking on it, We can disable it by using react's state.
I ran into this issue when I accidentally imported TouchableOpacity
from "react-native-gesture-handler" instead of from "react-native". If this is the case for you, change so TouchableOpacity
is imported from "react-native" and remove the import from "react-native-gesture-handler" and it should work!
I also ran into this issue when I inherited a RN project in progress. I didn't realize we had this "react-native-gesture-handler" package installed and accidentally let VS Code auto import it.
Always check your imports! :)
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