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}
Related
I have a FlatList in React Native with fullscreen image and video items (with pagingEnabled). I want to have a short descriptive touchable text floating on top of the FlatList, to open up a view with some information about the image/video when pressed.
To make the user experience nice, I'd like to be able to scroll the FlatList through the touchable text as well. I.e. if the user happen to start their scrolling motion on top of the text, the FlatList would scroll but if it is a simple press event I'd like to open the view with details about the image/video.
No mater what I try I end up with either the text being able to react to the press OR the FlatList being able to scroll. I have tried different configurations with a custom PanResponder and pointerEvents but seem to always end up with a state were one thing does not work. Do you guys have any smart ideas? I am probably just stuck in the wrong train of thought.
This is a simplified view of my component structure:
<View>
<View style={{ position: 'absolute', bottom: 100, zIndex: 10 }}>
<TouchableOpacity onPress={() => console.log('press')}>
<Text>Some Descriptive Text</Text>
</TouchableOpacity>
</View>
<FlatList pagingEnabled horizontal {...otherFlatListProps} />
</View>
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?
In my app I used ScrollView and on my Android Phone(Redmi Note 7) it works as it should, I can scroll only when keybord is open and elemnts are under the keybord. But on the IOS device (IPhone 5S) screen can be scrolled even when keyboard isnt opened.I even dont know what is the reason.
Isn't your elements in ScrollView are longer than the screen height size?
You can check the element is over the screen by clicking Cmd+D Show Inspector and clicking bottom of the view.
Set your scrollview style to flex:1 then it should work.
We have essay way just use KeyboardAvoidingView on render ex:
I hope works well.docs
<ScrollView style={{flex:1}}>
<KeyboardAvoidingView behavior="padding">
{content}
</KeyboardAvoidingView>
</ScrollView>
I have a code like this:
<View>
<View></View>
<ScrollView>
<View>
<TextInput/>
</View>
</ScrollView>
<View></View>
</View>
How can I handle it to response correctly to keyboard?
Both android and ios???
i have 2 permenant views top and bottom of the screen, this views pushed up on keyboard show
Your question is really unclear, but what I think you need is KeyboardAvoidingView.
It's a built-in React Native component that resizes based on the keyboard height.
To make sure the keyboard is not overlapping any important bits of your layout such as your text Input wrap your whole screen in KeyboardAvoidingView
https://facebook.github.io/react-native/docs/keyboardavoidingview
Solved!!
I solved it by handling the display of elements (views) on keyboard show and hide by keyboard in react native docs
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.