TouchableOpacity unclickable while TextInput has focus - react-native

I have implemented a search bar including a TextInput and a search button. The idea is basically to type what you wish to search for and hit the search button. My problem is that the button is unclickable while the TextInput has focus. Meaning I have to click twice to search, once for the TextInput to lose focus and once to hit the search button.
Here's my code:
<View style={styles.searchView}>
<View style={styles.textInputView}>
<View>
<TextInput style={styles.textInput}
placeholder="Sök användare"
multiline={false}
autoFocus={true}
autoCapitalize="words"
underlineColorAndroid="transparent" />
</View>
</View>
<TouchableOpacity>
<View style={styles.searchButton}>
<Image style = {styles.searchThumbnail}
source = {require('../images/navigatorThumbnails/search.png')}/>
</View>
</TouchableOpacity>
</View>
Is there any way to make the TouchableOpacity clickable while the TextInput has focus?

There is a property called keyboardShouldPersistTaps on Scrollviews (and also ListViews).
For React-Native version >= 0.41
The documentation says:
Determines when the keyboard should stay visible after a tap.
'never' (the default), 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 a children, (or captured by an ancestor).
Set it to always or handled to have the expected behaviour.
Outdated version for React-Native < 0.41
The documentation says:
When false, tapping outside of the focused text input when the keyboard is up dismisses the keyboard. When true, the scroll view will not catch taps, and the keyboard will not dismiss automatically. The default value is false.
Set it to true to have the expected behaviour. You might have to set this prop at different places in your component tree.

Related

React native touchable not working with keyboard

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>

React Native allow Touchable components to respond to onPress when wrapped in TouchabledWithoutFeedback

I want to allow the user to touch anywhere on the screen to dismiss the keyboard, but still allow interaction with Buttons. My code looks something like:
<TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
<View>
<Button onPress={...} />
</View>
</TouchableWithoutFeedback>
Now, when I press on the button, the keyboard dimisses, but the button's onPress event doesn't fire. Is there a way to allow touchable components to respond while being wrapped in TouchableWithoutFeedback or a better way to dismiss the keyboard when touching the screen?

multiline text input with newline and keyboard dismiss key buttons

So I've been struggling with this on iOS: I want a multiline text input that allows adding a new line:
// Now there's a "return" button, that adds a new line, perfect!
<TextInput
multiline
numberOfLines={2}
/>
And at the same time I want a multiline text input with a return key, that dismisses the keyboard (so the user can continue scrolling down the screen to the submit CTA):
// Now there's a "done" button, that dismisses the keyboard, yay!
<TextInput
blurOnSubmit
multiline
numberOfLines={2}
returnKeyType="done"
/>
However, I can't find a way how to combine these two. With other keyboard types (such as number) there is returnKey above the keyboard itself.
Is there a way to have multiline text input with both - new line button and keyboard dismiss key? Thanks!
Edit:
Expo snack: https://snack.expo.io/#mattz/77a2d1
In case anyone is still looking for the answer, I'm posting it here
You could add a wrapper (TouchableOpacity or Pressable) similar to the solution given by James, for the TextInput and dismiss the keyboard with an outside click.
import { TouchableOpacity, TextInput, Keyboard } from 'react-native';
<TouchableOpacity onPress={Keyboard.dismiss}>
<View>
<TextInput
blurOnSubmit
multiline
numberOfLines={2}
returnKeyType="done"
....
/>
</View>
</TouchableOpacity>
You can create an InputAccessoryView with a "Done" Pressable that runs Keyboard.dismiss in it's onPress handler.

React Native - Edit hitslop of clear button in TextInput

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>

Button can't be clicked while keyboard is visible - react native

I have an textInput and a button. While the textInput is focused, the keyboard comes up but if you tap the button with keyboard visible, first the keyboard disappears and then only you can tap button. Why is it? How can I make it work so that the button can be tapped with keyboard visible? The apps developed in android studio (android native) can get the click listener with keyboard visible. But in react native, it is not working. If you tap anywhere but button, then the keyboard should disappear, isn't it? But if you tap on the button with keyboard visible, the btn should receive the listener. I'm testing it in android devices.
P.S you can try it here: https://snack.expo.io/#codebyte99/addcomponents
<TextInput
placeholder={'Type smth'}
style={[{ borderBottomColor: 'gray', borderBottomWidth: 1 }]}
/>
<TouchableOpacity onPress={() => { this._onPressOut(); }}>
<Text>click here</Text>
</TouchableOpacity>
The scrollview contains a prop keyboardShouldPersistTaps which handles the keyboard tap behaviour inside a scrollview.
For your case give it as <ScrollView keyboardShouldPersistTaps='handled'>
Here is a expo link scrollview with keyboard
As an addition to #thakur-karthik answer:
It's very important to note that in the scrollview scenario, some oddity occurs when you have a scrollview in a react-native modal.
Just adding keyboardShouldPersistTaps={'always'} on the scrollview in the modal alone will not work.
If you have scrollviews in any ancestors, they must also have keyboardShouldPersistTaps={'always'} declared on their components
FYI: If you're using react-native-keyboard-aware-scroll-view, you need to do it like this:
<KeyboardAwareScrollView keyboardShouldPersistTaps="always">
ScrollView or Flatlist
The scrollview and Flatlist contain a prop keyboardShouldPersistTaps which handles the keyboard tap behavior inside a Scrollview when the keyboard is visible.
keyboardShouldPersistTaps= 'handled'
In case keyboardShouldPersistTaps is not working you can add the style to the FlatList or scroll, work for me, Becouse keyboardShouldPersistTaps was not working properly
{zIndex:1000}