Menu
I want to implement floating labels, for this I have a Text Component Above a TextInput. I want to ignore all the touch events on the Text so that the TextInput Under it gets all the events. Is there a way I can do this ? In CSS we used to have pointer-events none, I am not sure how to do this in react native.
807
To disable a View component in React Native, we can set the pointerEvents prop to 'none' . to set the inner view's pointerEvents prop to 'none' so that users can't interact with the content inside.
Touchable HighlightThe Button component is wrapped inside the Text component and the Text is inside the TouchableHighlight component . You can add styles to the components as per your requirements. The onPress function is added on the TouchableHighlight and on tap the alert message will be shown.
Just add the prop onStartShouldSetResponder={event => true} to the <View> you want to prevent bubbling up.
To prevent multiple button clicks in React: Set an onClick prop on the button, passing it a function. When the button gets clicked, set its disabled attribute to true .
In react-native, pointerEvents is a prop, not a style.
<View pointerEvents="none" /> Add pointerEvents: 'none' to the Text component. This allows touch events to go to the ancestors of the component, but not the component itself or its children.
React Native also supports 'box-none', which allows touch events to go to the ancestors and children of the component, and excludes only the component itself.
23
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
