I have a TextInput that is multiline that can bleed past the entire height of the screen. It takes up the whole screen. Whenever there is text that takes up the whole screen, I can't scroll down or up. Whenever I tap to scroll down or up, it focuses on the text input where I tapped.
The scrolling up or down feature of the ScrollView it is inside of no longer works.
How can I keep a scrolling feature when the TextInput takes up the whole screen?
Here's my code:
<KeyboardAvoidingView
style={styles.screen}
behavior={Platform.OS === "ios" ? "padding" : "height"}
>
<View style={styles.body}>
<ScrollView contentContainerStyle={styles.scrollViewCont} keyboardShouldPersistTaps={'always'}>
<TextInput
style={styles.noteTitle}
placeholder={'Note Title'}
value={noteTitle}
onChangeText={setNoteTitle}
multiline={true}
/>
<TextInput
style={styles.noteText}
placeholder={'Note Text'}
value={noteText}
onChangeText={setNoteText}
multiline={true}
/>
</ScrollView>
</View>
{showFooter ? <GlobalFooter AppState={AppState} navigation={navigation} /> : null}
</KeyboardAvoidingView>
I had to give the TextInput a set height. Once I gave the TextInput a height, it became scrollable even when I was focused on it.
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 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'm trying to create an iMessage like sticky text input where the ScrollView content moves up when the keyboard is shown and down when the keyboard is dragged closed. In the React Native repository on Github, there is an example InputAccessoryViewExample.js that is almost exactly what I want, except when the keyboard is shown, ScrollView's content (the messages) are covered by the keyboard.
I've tried a few permutations of the following with no success.
<>
<KeyboardAvoidingView style={{flex: 1}} behavior="padding">
<ScrollView style={{flex: 1}} keyboardDismissMode="interactive">
{Array(15)
.fill()
.map((_, i) => <Message key={i} />)}
</ScrollView>
</KeyboardAvoidingView>
<InputAccessoryView backgroundColor="#fffffff7">
<TextInputBar />
</InputAccessoryView>
</>
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 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.