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"
Related
I have a password confirmation form inside WebView and I need it to be usable with hardware keyboard.
When I connect hardware keyboard and hit Tab, once focus enters WebView component it skips first focusable element and goes to the second one. Here's simplified version of the screen.
Video. Has anyone faced this issue and how do you overcome it?
I use react-native-webview library.
As a workaround: inside the page that appears inside the WebView add following
document.body.tabIndex = 0;
This will set body as first focusable element and focus will jump over it (almost invisible).
trying to build an OTP input screen. From what I read, it can be achieved by hiding the TextInput component and displaying the inputted text in views. I have shared a basic Expo snack link. The text input is not taking the values I press on the keyboard. here is the expo link - https://snack.expo.dev/oD72PI5Xch. Can someone help me with what I am doing wrong?
Another issue I have noticed is that the keyboard doesn't show up if I press the back button and then again press the <Text> component from where I have called the onPress to call focus() on the TextInput. It will come up if I press the back button and then press the Text component only once. If I again close it using the back button, after that the keyboard stops coming up.
Below is the console log output based on the logging statements I have in the code snack (my actions are marked with >>>>>) -
1>>>>> App opens up
text input onfocus called
text input onblur called
keyboard did show
2>>>>> App stabilizes
3>>>>> I press the back button
keyboard did hide
4>>>>> I press the text component
calling focus
keyboard did show
5>>>>> I press the back button
keyboard did hide
6>>>>> I keep pressing the text component
calling focus
calling focus
calling focus
calling focus
calling focus
calling focus
I think the issue might be before the 2>>>>> part. The TextInput's onBlur is already called. That might be the reason why it is not taking keyboard inputs. Also, even after calling focus, the onFocus logging is absent, meaning that the text input never came into focus. What am I doing wrong? Thanks in advance :)
And if you solve this, please help me out with the issue of keyboard not appearing on pressing the Text component multiple times (6>>>>> part of the console output).
I don't clearly understand what are you trying to do by giving 0 height and width to TextInput, If you are trying to create an OTP input field you can simply use any third-party libraries like react-native-otp-input or try to use code from this existing snack
I'm currently building an order page that takes in only selected characters for my TextInput element.
My requirement is that when I focus on TextInput, the keyboard doesn't appear but I can still point the cursor around in the TextInput.
Tried using editable={false}, works for keyboard not appearing but disables cursor.
Is there a workaround to this where I can hide my keyboard but still use cursor?
What you are trying to do is not currently posisble in React Native, see this Github thread
I have a view, in which there is a redux form field linked to a text input.
First of all, is there a way to show that keypad on initial rendering without the sliding in animation?
Second, on finished editing, is there a way to still keep the keypad up there?
I have tried to set blurOnSubmit to false in TextInput, it seems to stop me from losing the focus by clicking outside.
Lastly, there is also a button on that page which will start a request with the input value, on resolved, a modal will slide up from the bottom to show a success screen. This modal is implemented using react-navigation. The modal is a relatively small rectangle shape with the rest part transparent. So users can see the original page even when the success modal is up. In this case, is there a way to always show the keypad in the original screen even when the modal is up?
First of all, is there a way to show that keypad on initial rendering without the sliding in animation?
No. React Native doesn't support a way to disable the slide animation.
Second, on finished editing, is there a way to still keep the keypad up there?
If the TextInput is being rendered inside a ScrollView, add keyboardShouldPersistTaps=handled. https://facebook.github.io/react-native/docs/scrollview#keyboardshouldpersisttaps. It will hold the focus.
Hi is there a way to make an multiline TextInput go fullscreen onFocus and return to its normal size after the user finished editting (for ex: when the user hits the android Back button).
I plan to allow user to type a long paragraph in my App, and I think it would improve the UX if I can make the multiline text go fullscreen when user typing.
I imagine a multiline TextInput like that would be a helpful for many other developers as well, it's shocking that I couldn't find a pre-built component like that.
I think the best way to achieve this is to put a TouchableOpacity with an onPress listener around the TextInput and have it navigate to another screen which has a full-screen text input and receives the onChange listener via params (there will be a warning with react-navigation-5 but in most cases you can safely ignore it).