So I have some input fields, and as I fill text in one field, and click on another, the keyboard hides and I have to click on the field again to make the keyboard show again.
Is there a way to fix this?
Thanks
In scroll view you should add keyboardShouldPersistTaps property. Try with handled or 'always' values. Here is the link of react native documentation
<ScrollView keyboardShouldPersistTaps='handled'>
//TextInputs ...
</ScrollView>
Related
I am using "react-native": "0.70.4", with the #react-navigation/material-top-tabs to make a custom bottomsheet with top tabs inside. When clicking the TextInput in tab nr 2 it dismiss the keyboard, but if i click again it does not happen. I tried multiple ways, it happens when there is 3 or more tabs. It works as intended in the other tabs.
Example of the bottomsheet and tabs. If I click the "søk" (TextInput) in tab "test2". It would open and close the keyboard the first time I click it.
this after the second time I click the TextInput.
I am thinking of using android:windowSoftInputMode="adjustNothing"
but this doesnt let me use an useffect/keyboard lisnter
looks like there is not enough space to open the keyboard in the BottomSheet menu, should you use const snapPoints = useMemo(() => ["30%", "50%"], []); for snapPoints?
I had to change android:windowSoftInputMode="adjustResize" with adjustPan, change my layout to use flex instead of height and change tabBarHideOnKeyboard: true to false.
It makes me have to change quite a bit of code. But atleast the bug is gone.
I made a custom tab component with scrollView. the issue is with react-native-pager-view.
unable to resize or move things so that it can reach all components when using pager-view.
In my react native app, I have a header with a search option and a body with content which is a flatlist and a footer. The flatlist is shrinking when the keyboard is active and my footer is showing above the keyboard.
I don't want to shrink flatlist while the keyboard is active or don't want to show the footer while the keyboard is active. how I can achieve that?
You can use KeyboardAvoidingView from react-native.
Please check your android manifest it should have
android:windowSoftInputMode="adjustPan"
something like this(please check this)
I have a TextInput on an Overlay Component in my app. When the keyboard is opened, half the screen gets covered, including the TextInput. I did try the KeyboardAvoidingView component, but couldn't get the TextInput to be fully visible. I need some suggestion on how to move the components inside the Overlay, when the keyboard is enabled in react-native
it wld have been easier to answer if u had posted code, but still
keyboardAvoidview solve the common problem of views that need to move out of the way of the virtual keyboard. It can automatically adjust either its position or bottom padding based on the position of the keyboard
just add this under your largest view
<KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
all ur ui inside this...
</KeyboardAvoidingView>
There is a prop called keyboardVerticalOffset,
that is the distance between the top of the user screen and the react native view.
<KeyboardAvoidingView style={styles.container} behavior="padding" enabled keyboardVerticalOffset={offsetValue}>
... your UI ...
</KeyboardAvoidingView>;
Value for keyboardVerticalOffset may be non-zero in some use cases. but for your case try to add some value.
If you want to know more about handling keyboard in react native check this
Though the keyboard popup for the first time, when I navigate to the same interface text input field is focused but the keyboard is not popup in React Native Application.
I used autoFocus={ true } but I can't see the keyboard. How to resolve this.
You can use 'push' instead of 'navigate'. When navigating to the same interface componentWillMount/componentDidMount is not loading again. That may be the issue. Try with this.
Refer react navigation documentation.
React Navigation Documentation
If you are using ScrollView, add keyboardShouldPersistTaps="always"
<ScrollView keyboardShouldPersistTaps="always">
------
</ScrollView>
In a react-native form, when switching from one TextInput to the next one, the second grabs focus for an instant and then suddenly RN dismisses the keyboard.
I have onSubmitEditing coded to move to next input, but the user needs to click on enter in the keyboard, I can also override onEndEditing however that forces you to move to the next input and maybe you didn't touch that one.
I found out that the problem is related to having TextInputs within a ScrollView, focus between inputs in this component doesn't work as expected.
keyboardShouldPersistTaps={true} is deprecated so need to use keyboardShouldPersistTaps="always"