When I use a <ScrollView> in react-native and the keyboard is open, I need use two clicks instead one to execute a button.
The first click only close the keyboard and the second click execute the action from button. The clicks are executed in the same point of the screen(over the button). I use <KeyboardAvoidView> too because.
<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
style={styles.Container}
>
<ScrollView>
<Components/>
<Components/>
<Components/>
<Components/>
<Components/>
<Button/>
</ScrollView>
</KeyboardAvoidingView>
With ScrollView
enter image description here
Without ScrollView (Desire behavior)
enter image description here
I make some tests:
When remove <ScrollView> : I use one click but not display the button on screen because I have many componentes;
Uses <keyboardAvoidingView> not alter the behavior from <ScrollView>
I try uses <KeyboardAwareScrollView> but I couldn't install it.
"react": "18.2.0",
"react-native": "0.71.2",
I believe you're looking for the keyboardShouldPersistTaps prop.
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 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.
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>
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