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.
Related
I am using bare react-native CLI.
My modal has a text input field inside. In the modal, when I open the keyboard, the buttons next to the text input are not working. They close the keyboard when tapped instead of working.
I tried it using the native modal module (with KeyboardAvoidingView) and using the react-native-modal
Image
// with react-native-modal
<View style={styles.PostCommentArea}>
<View style={styles.PostBody}>
<Image
source={{ uri: UserDetails.profile_image }}
style={styles.UserImg}
/>
<InputField
ref={InputRef}
style={styles.InputField}
length={0.65}
hv={0.055}
placeholder="Add Comment..."
onSubmitEditing={postComment}
/>
<TouchableHighlight style={styles.PostBtn} onPress={postComment}>
{PostingComment ? (
<>
<Indicator size="small" color={Colors.WHITE} />
</>
) : (
<IconOutline
name="arrow-up"
size={height * 0.027}
color={Colors.WHITE}
/>
)}
</TouchableHighlight>
</View>
</View>
One way of fixing this is wrapping the component in a ScrollView and using the keyboardShouldPersistTaps prop.
'never' tapping outside of the focused text input when the keyboard is
up dismisses the keyboard. When this happens, children won't receive
the tap.
'always', the keyboard will not dismiss automatically, and
the scroll view will not catch taps, but children of the scroll view
can catch taps.
'handled', the keyboard will not dismiss automatically
when the tap was handled by children of the scroll view (or captured
by an ancestor).
<ScrollView keyboardShouldPersistTaps={'handled'}>
...
</ScrollView>
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 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
When the user presses the Return key in a multiline TextInput, a new line is created and the keyboard continues to be visible. How should the keyboard be dismissed for multiline TextInput in React native?
I did some research. I found that clicking on the View outside the TextInput does not blur the TextInput, which is causing the keyboard to remain visible.
<View style={styles.container}>
<TextInput
placeholder="To"
style={styles.input}
value={this.state.to}
onChangeText={(to) => this.setState({to})}
/>
<TextInput
placeholder="Text"
style={styles.textarea}
multiline={true}
numberOfLines={4}
value={this.state.text}
onChangeText={(text) => this.setState({text})}
/>
</View>
For ScrollView, there is a prop - keyboardShouldPersistTaps which causes the TextInput to blur. Is there any equivalent of that for View? I want the multiline TextInput to blur so that the keyboard gets dismissed.
TextInput has a blurOnSubmit prop; when set to true, the return key dismisses the keyboard.
However currently the prop does not work on Android. I've posted an issue on the subject:
https://github.com/facebook/react-native/issues/8778
Hope it helps other , as wasted time on reading many github threads and issues..
By doing below code , you keyboard show return key you wanted for example "done", "go" and also dismiss the keyboard when you press return key in my case done key while using multi line seamlessly.
import {Textinput, ScrollView, Keyboard} from 'react-native';
// ...code
<TextInput
keyboardType="default"
returnKeyType="done"
multiline={true}
blurOnSubmit={true}
onSubmitEditing={()=>{Keyboard.dismiss()}}
/>
This is a simplified version of austin's very helpful answer above.
If you convert the View you have for your screen/component into a TouchableOpacity with activeOpacity={1} (this prevents any fading or opacity effects), you can then pass it:
onPress={() => Keyboard.dismiss()}
Make sure you've imported TouchableOpacity and Keyboard from 'react-native' and you're good.
Banged my head against this for a few hours and after fiddling around and some dumb luck finally figured out how to make a multiline TextInput dismiss by just touching outside the text box. Little Example for ya'll hope that someone else finds this useful because the docs do not make it all apparent that you can get multilines to dismiss easily...
import React, { Component} from 'react'`
import {
keyboardAvoidingView,
Keyboard,
StatusBar,
StyleSheet,
TextInput,
View,
} from 'react-native';
class App extends Component {
constructor(props){
super(props)
this.state ={
behavior: 'position',
}
this._keyboardDismiss = this._keyboardDismiss.bind(this);
}
componentWillMount() {
this.keyboardDidHideListener =
Keyboard
.addListener('keyboardDidHide',this._keyboardDidHide);
}
componentWillUnmount(){
this.keyboardDidHideListener.remove();
}
_keyboardDidHide() {
Keyboard.dismiss();
}
render() {
return (
<KeyboardAvoidingView
style{{flex:1}}
behavior={this.state.behavior}
>
<TouchableOpacity
onPress={this._keyboardDidHide}
>
<View>
<TextInput
style={
color: '#000',
paddingLeft: 15,
paddingTop: 10,
fontSize: 18,t}
multiline={true}
textStyle={{ fontSize: '20', fontFamily: 'Montserrat-Medium' }}
placeholder="Share your Success..."
value={this.state.text}
underlineColorAndroid="transparent"
returnKeyType={'default'}
/>
</View>
</TouchableOpacity>
</KeyboardAvoidingView>
);
}
}
To complete my comment about returnKeyType, you also need to set blurOnSubmit={true} which will trigger onSubmitEditing event handler too when Done is pressed.
See example https://rnplay.org/apps/0HIrmw for details.
as long as there is only one done button, we still need to decide what this return/done button does. In this case I will propose adding another dismiss button to the keyboard by using InputAccessoryView. Following code is copied from https://dev.to/vladimirvovk/react-native-ios-keyboard-with-a-custom-button-15h0
<TextInput
...
inputAccessoryViewID="Next"
/>
<TextInput
...
ref={nextFieldRef}
inputAccessoryViewID="Done"
/>
<InputAccessoryView nativeID="Next">
<View style={styles.accessory}>
<Button
onPress={() => nextFieldRef.current.focus()}
title="Next"
/>
</View>
</InputAccessoryView>
If anyone is still having trouble with this, specifically around keeping the return key for adding new lines and dismissing the keyboard when clicking outside of the input, the regular view component does not blur the TextField when you click outside of the component. However if you use a ScrollView instead of a regular View it will trigger the onBlur effect when you click anywhere on the screen and the below code will dismiss the keyboard and keep the return key for adding new lines. You can set scrollEnabled={false} on the scroll view if you don't want scrolling and it will still trigger the events
<TextField
value={value}
placeholder="Description..."
multiline
numberOfLines={20}
keyboardType="default"
onBlur={() => {
Keyboard.dismiss();
}}
/>
Keyboard.dismiss() solved the issue for me.
<TextInput
keyboardType="default"
returnKeyType="done"
multiline={true}
blurOnSubmit={true}
onSubmitEditing={()=>{Keyboard.dismiss()}}
/>
I open a Modal where there is a TextInput on top. My TextInput component has the autoFocus set to true. I can say my TextInput is focused about 6 times on 10 (open/close Modal). When it's not focused and if I try to tap (even several times) on TextInput, it doesn't want to focus.
I made another test, I set the autoFocus to false. When I open my Modal then I immediately tap the TextInput to get the focus, sometimes I have to tap twice before I get the focus on. So, it's like something didn't finish its loading before I could tap and get the focus. If I do the same test but I wait maybe 2 seconds before I do a first tap, I always get the focus.
So did you know if there is a conflict between Modal / TextInput / Keyboard?
Here is my code, in case:
return (
<View style={styles.container}>
<TouchableOpacity
style={styles.addressButton}
onPress={() => {
this.props.feedList([]);
this.props.onPressBackButton();
}}
>
<Linearicon name="arrow-left" size={30} color="white" />
</TouchableOpacity>
<View
style={styles.searchBox}
>
<Linearicon style={styles.searchIcon} name="magnifier" size={16} color="#999999" />
<TextInput
style={[styles.searchBoxText, styles.searchBoxTextInput]}
placeholder="Recherchez une adresse..."
autoFocus={false}
placeholderTextColor='#999999'
autoCorrect={false}
onChangeText={(text) => this.onChangeText(text)}
value={this.state.address}
/>
</View>
</View>
)
I also ran into a similar kind of problem. My TextInput has autoFocus in a modal. The TextInput focus worked, but the keyboard sometimes opened and sometimes it did not open. It appears to be a race condition, where autoFocus assigns focus before the modal is visible. The solution was to use onShow attribute in Modal.
<Modal onShow={() => {this.textInput.focus();}} >
<TextInput ref={input => {this.textInput = input;}} />
</Modal>
setting the height for TextInput works.
example
<TextInput style={{textAlign:'center', fontSize:18, height:50,paddingBottom:35}} autoFocus={false} placeholder="Enter Name" placeholderTextColor="grey"/>
I also had the same issue like sometimes it was not get focus while reopen the modal. I agree with the #Saravanan's comment with just one addition by calling blur method before focus to textinput. That worked for me.
<Modal onShow={() => {
this.textInput.blur();
this.textInput.focus();
}}>
<TextInput ref={input => {this.textInput = input;}} />
</Modal>
I had the same issue, autoFocus prop seems kinda buggy when TextInput is inside modal, try this:
export default function Component() {
const inputRef = React.useRef(null);
return (
<Modal isVisible={true} onShow={() => inputRef.current.focus()} >
<TextInput ref={inputRef} />
</Modal>
}
I have the same issue. Whenever TextInput is in a Modal the autofocus is super buggy. Probably a bug. Using RN 0.27.2.