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>
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>
I need to fix the input in the bottom of the screen, so that keyboard pushes this input (similar to instagram comments).
Here's an example():
https://snack.expo.io/LPRwoGpik
It's working fine, but if I put the FlatList inside the ScrollView the bottom input is dissapearing.
What's the right way to solve this problem?
try this
<View style={{flex: 1,}} >
<ScrollView>
{content}
</ScrollView>
<TextInput style={{position: "absolute", bottom :0}}/>
</View>
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.
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
I have TextInput at the bottom of the screen. When TextInput is focused then keyboard appears and due to this all the flex view gets shrink to the available screen. I want to achieve that page layout should not change and input should be visible to user.
<View style={MainView}>
<View style={subMain1}>
<View style={{flex:1,backgroundColor:'#add264'}}></View>
<View style={{flex:1,backgroundColor:'#b7d778'}}></View>
<View style={{flex:1,backgroundColor:'#c2dd8b'}}></View>
</View>
<View style={subMain2}>
<View style={{flex:1,backgroundColor:'#cce39f'}}></View>
<View style={{flex:1,backgroundColor:'#d6e9b3'}}></View>
<View style={{flex:1,backgroundColor:'#69ee9a'}}>
<TextInput placeholder="input field"/>
</View>
</View>
</View>
const Styles = {
MainView:{
flex:1,
backgroundColor:'green'
},
subMain1:{
flex:1,
backgroundColor:'blue'
},
subMain2:{
flex:1,
backgroundColor:'orange'
}
}
I just found an answer to this.
I just have to use fixed height for my main container and inside that I can use flex layout. And If keyboard is hiding the content then we can use Scrollview that will allow scrollable interface when user clicks on input.
This helped me hope it can help others. :)
I'm not quite sure I understand what the issue you're running into, but I recently struggled with keyboard avoiding views in my app - for some reason, the native component just wasn't working.
Check this package out - it did the trick for me, and offers some cool customization capabilities:
https://github.com/APSL/react-native-keyboard-aware-scroll-view
Use 'react-native-keyboard-aware-scroll-view' and keep this as parent view and put all view inside that view. This node module creates scrollview and it listens to keyboard show event and automatically scrolls your screen so user can see the input box without getting it hidden behind the soft keyboard.