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.
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.
I had the same problem as Cryszon. On Android is seems like pointerEvents="none" doesn't work for Text components.
Wrapping the Text in a View and putting the pointerEvents="none" prop there solved it.
pointerEvents work only on View not on Text or TouchableOpacity.
If you have an issue where even 'box-none' doesn't allow touch events to go to the children, you could do something like this
let setPointerEvents = 'none';
...
<View pointerEvents={setPointerEvents}>
...
<TouchableOpacity onPress= {()=>this.set(false)}/>
</View>
<TouchableOpacity onPress= {()=>this.set(true)}/>
...
set(bool){
switch(bool){
case true:
setPointerEvents= 'auto'
break;
case false:
setPointerEvents= 'none'
break;
}
}
Kind of a hack, but it works.
Related
I am working with address select screen, and I want when I click to select the keyboard will disappear and the item I clicked will be "selected" but now when I select it just disappear the keyboard and the item I selected stays not in "selected" state but I have to click 1 more time.
enter image description here
Hope to get a solution from everyone!
Wrap your component inside ScrollView, or Use Pressable, like this:
import {Keyboard, Pressable} from 'react-native'
And after that wrap your component like this:
<Pressable style={{flex: 1}} onPress={Keyboard.dismiss}>
...rest of the components
Solution 2:
Use ScrollView: wrap your component inside ScrollView and use prop:
keyboardShouldPersistTaps
<ScrollView keyboardShouldPersistTaps="never" />
The same are already shared at this StackoverFlow
If you find this answer useful, please upvote, thanks, writing from my Android on Vacations, Happy Coding ♥️
When the keyboard is visible, I want to be able to press on one of the cells without having the keyboard hide first. Ideally it would be pressed and the keyboard hides after.
I have tried to set the address cell component's onStartShouldSetResponder to true and that had no effect.
<Pressable
onStartShouldSetResponder={() => true}
...
Is there something I am missing with how touch gestures are handled in React Native?
Adding keyboardShouldPersistTaps="always" to the FlatList component that renders the address cells seemed to solve this issue on iOS (have not tested on Android).
<FlatList
keyboardShouldPersistTaps="always"
...
/>
I am working on a react-native app using react navigation.
I want to add a partial modal that covers 30% of screen when pressing on one of the tabs in the bottom-tab, similar to the "+" tab in the YouTube app:
Youtube modal
I've tried to use react-native Modal component, but
I have problems with activating it from bottom tab
it covers whole screen
Any suggestions?
Thanks..
To answer your question 100% correct I'd need to know more details about your project but, I can try to explain how can be your logic to do this withou any libs.
You can create another component called "Start" where you're gonna put your Modal with absolute position above your navigator.
You can create a Modal that will be above your navigator:
export const Start(){
return(
<View style={{flex:1}}>
<Modal>
<View/>
</Modal>
<NavigatorComponent/>
</View>
)
}
This is going to work because when you put a component with absolute position above the other, this component stay in front of the below component. In your case, will stay in front of everything including the TabBar.
To the modal has just 30% of the height you just need to put in its styles the attribute height: '30%'.
In the initial component of your App (usually the index.js file), you just return the new Start component.
I hope you like my answer. Please, if you have more questions you can ask. Waiting for your feedback :).
I'm using Gifted Chat for react native, but I'm getting strange behavior. When keyboard is down, messages are fine. When I tap on the keyboard to have it come up, it's also fine.. but the moment I start typing, the messages jump up. The only way to get them back again is to close the keyboard. Here is how it looks:
What am I doing wrong here? Here is the code:
<KeyboardAvoidingView
style={{ flex: 1 }}
behavior="padding"
keyboardVerticalOffset={Platform.select({
ios: () => 0,
android: () => 100
})()}
>
<GiftedChat
handleChoosePhoto={handleChoosePhoto}
forceGetKeyboardHeight
showUserAvatar
renderChatFooter={renderChatFooter}
isAnimated
scrollToBottom
onInputTextChanged={e => emitTyping(user._id, otherUser, e)}
showAvatarForEveryMessage
messages={messages}
onSend={msg => onSend(msg)}
user={user}
/>
</KeyboardAvoidingView>
This component is returned as a functional component, not wrapped in anything else and not in conflict with anything else. The strange thing is that if I get rid of behavior="padding", it doesn't jump... but then the TextInput element is not visible.
I fixed this by removing forceGetKeyboardHeight
You don't need KeyboardAvoidingView in giftedChat the component handles it's own keyboard so just remove that component
I am creating a custom dropdown component in React Native. I want to close it contents, when user presses screen outside of the component on any other part of the application.
However, I cannot know if user pressed outside the component. Is there a global OnPress event that can accessed or some other way, kindly let me know.
Edited:
add a logic when you click dropdown it should create a transparent view covering wholescreen in a absolute position.
Do it Like this:
// inside render
<Fragment>
<Nested>
<DropDown/>
</Nested>
{isDrop &&
<View style={styles.container} // height:'100%', width:'100%', backgroundColor:transparent , position: 'absolute'
//Trigger for pressing outside DropDown
onResponderStart={() => { condition for dropdown}}
//Required to start interacting with touches
onStartShouldSetResponder={(e) => {return true}}/>}
</Fragment>
DropDown component and view with touch must be the same level