I want keyboard not to show up at all when i touch my text input.If i use 'Keyboard.dismiss' i loose the focus on my text input i am using custom keyboard which itself is part of my screen so i don't want any keyboard to show up at all without loosing the focus on my text input, any solution please.I have tried using libraries but facing same problems again and again what should i do. Here the code i Am using
<TextInput onFocus={Keyboard.dismiss}>
Use <TextInput showSoftInputOnFocus={false} />
It will hide the keyboard when you focus on the text input.
ReactNative TextInput has showSoftInputOnFocus prop, which is due to docs should hide keyboard. But seems like it doesn't work.
I found this solution, works for me:
<>
<TouchableWithoutFeedback onPress={this.toggleVisible}>
<View>
<View pointerEvents="none">
<Input
value={String(value)}
placeholder={placeholder}
/>
</View>
</View>
</TouchableWithoutFeedback>
<DateTimePicker
isVisible={this.state.visible}
onConfirm={onChange}
onCancel={this.toggleVisible}
/>
Correct way is to encapsulate View with keyboard is calling Keyboard.dismiss()
you should use TouchableWithoutFeedback so that on clicking it should disable
the keyboard
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<TextInput keyboardType='numeric'/>
</TouchableWithoutFeedback>
Try this may be it can solve the problem
Related
I'm currently working on a React Native App, where the user can type some text input and click "ok" to confirm. Next question appears. But at the moment i have to double click the button. First time the keyboard closes and second time the button is pressed. Same thing for iOS and android.
I already tried keyboardShoulPersitsTaps='always'and also handled, but nothing works.
I also tried to make every view above a scroll view and added this prop, but still no luck...
Can anyone help?
You are nesting a ScrollView with a KeyboardAwareScrollView.
You need to set the keyboardShouldPersistTaps prop on the parent view as well. Consider the following code snippet from your snack.
<KeyboardAwareScrollView keyboardShouldPersistTaps='handled'>
<SafeAreaView style={styles.container}>
<ScrollView ref={scrollViewRef} onContentSizeChange={() => scrollViewRef.current.scrollToEnd({ animated: true })} keyboardShouldPersistTaps='handled'>
{steps.map(item => { return (<SingleAlgorithmStep key={item["Question"]} step={item} stepsDone={steps} clickedButtons={clickedButtons} algorithmJson={currentAlgorithmJson} actualizeSteps={(item) => updateSteps(item)} actualizeButtons={(item) => updateClickedButton(item)} />) })}
</ScrollView>
</SafeAreaView>
</KeyboardAwareScrollView>
This fixed the issue on my device.
You are using the incorrect property name, keyboardShouldPersistTabs, instead of keyboardShouldPersistTaps.
<ScrollView
keyboardShouldPersistTaps="handled"
>
....
</ScrollView>
React Native's TextInput has a clearButtonMode property which would display a small x button on the right of the input area in iOS through which text can be cleared.
I am having issues with the hit slop of that button. I believe it is too small and easy to miss. I have to press multiple times in order to hit the right spot in order to activate it.
Is there a way to customize this clear button => change its hitSlop, color, etc?
What you could do, is to wrap your TextInput element with view and Animated.View, so you can add your own Clear Button with TouchableOpacity for example, and select an icon, colors, size, etc.
So, basically, it would be something like this:
<Animated.View style={...}>
<TextInput value={...} style={...} onChangeText={...} />
<TouchableOpacity>
{/* HERE GOES YOUR CLEAR BUTTON, FOR EXAMPLE: */}
<MaterialIcons size={24} color={'black'} name={'close'} />
</TouchableOpacity>
</Animated.View>
Is There Any Props To Disable Keyboard Avoiding View To TextInputs
Example:
<KeyboardAvoidingView behaviour="padding">
<TextInput />
</KeyboardAvoidingView>
<KeyboardAvoidingView behaviour="padding">
<TextInput />
</KeyboardAvoidingView>
Now I When I Focus On The First Text Input , I Don't Want Keyboard Avoiding View To Activate Since It Is The First Form Field And Is Visible.
I Only Want KeyboardAvoidingView To Activate When I Press On The Second Form Field Since The Keyboard Blocks It.
I'm New To This Please Help Me Out
Thank You
You can try this.
<KeyboardAvoidingView behaviour="padding" enabled={false}>
<TextInput />
</KeyboardAvoidingView>
I am using react native to implement a community feed. In each post in the feed, I can comment as seen below.
However, the issue is after I enter a comment and want to press on the submit icon on the right, the keyboard will dismiss first before I can tap on the icon to submit the text.
QUESTION:
How can I immediately submit my text after pressing the submit icon without tapping twice (once to dismiss the keyboard, and second to submit)
Here's a snippet of my implementation:
//Code for comments section/box
<View style={styles.commentSectionContainer}>
<View style={[textInputStyle.dark, textInputStyle.compact]}>
<LocalizedTextInput
multiline={false}
autoCorrect={true}
onChangeText={onCommentTextChange}
placeholder="placeholder/writeComment"
style={[textInputStyle.default, {fontSize: 13}]}
underlineColorAndroid="transparent"
value={textComment}
onSubmitEditing={() => {
if (textComment) {
onSubmitComment();
}
}}
returnKeyType="send"
/>
<View style={styles.iconSubmitContainer}>
<IconButton style={styles.commentSubmit} iconName="send" isDisabled={textComment === ''} onPress={onSubmitComment} hitSlop={hitSlop} />
</View>
</View>
</View>
Localized Text Input is using the following textinput
<View style={{flex: 1}}>
<TextInput
multiline={multiline}
style={[defaultStyle, {flex: 1}]}
underlineColorAndroid="transparent"
autoCorrect={true}
{...otherProps}
/>
</View>
The posts are all wrapped in a scrollView.
I tried to use "keyboardShouldPersistTaps" and keyboardDismissMode="Drag-on" but it doesn't produce the expected experience.. The user should be able to dismiss the keyboard by tapping anywhere outside the textinput box instead of requiring to scroll.
If your parent is a ScrollView component, then passing the prop keyboardShouldPersistTaps="always" should do the trick. See the official documentation here.
As Ankit suggested the prop needs to be passed to the scroll view but if that isn't giving you the desired results TextInput has a blur() method that you can call using a ref of that TextInput. Maybe that would help.
How to keep keyboard opened when i have TextInput and Touchable near input that sends message. So i want to send message without double tap on touchable. First to hide keyboard, second to send message. How to do that?
Use keyboardShouldPersistTaps to handle this.
Example:-
<ScrollView
keyboardDismissMode="on-drag"
keyboardShouldPersistTaps={'always'} >
</ScrollView>
Deprecated Properties:-
false, deprecated, use 'never' instead
true, deprecated, use 'always' instead
source
Check out keyboardShouldPersistTaps.
The following keeps the keyboard open when content is tapped but closes the keyboard when dragged.
<ScrollView keyboardShouldPersistTaps="always" keyboardDismissMode="on-drag">
{/* Content containing interactive elements such as <Touchable /> */}
</ScrollView>
Note
Any parent ScrollViews/VirtualizedLists/Flatlists/SectionLists will also need to set keyboardShouldPersistTaps="always"
Here are some gory details if you're interested.
Have a look at the keyboardShouldPersistTaps property of ScrollView. Setting it to "handled" should do what you are looking for.
just only wrap you submit button with scrollview and then make sure u need to add two props keyboardShouldPersistTaps="always" and keyboardDismissMode="on-drag"
like this ...
<TextInput/>
<ScrollView
contentContainerStyle={{
width: SIZES.width / 6,
height: 60,
}}
keyboardShouldPersistTaps="always"
keyboardDismissMode="on-drag">
<TouchableOpacity onPress={}>
</TouchableOpacity>
</ScrollView>