React Native showSoftInputOnFocus not working properly - react-native

I've two input fields in my application.
<ScrollView>
<View>
<TextInput
placeholder="Enter amount:"
value={firstInput}
showSoftInputOnFocus={false}
onFocus={()=>setShowCalculator(true)}
onBlur={()=>setShowCalculator(false)}
/>
<TextInput
placeholder="Enter description:"
value={secondInput}
/>
</View>
</ScrollView>
When we click the first input is clicked, the keyboard is not shown instead calculator is shown. And when we click the second input, it opens the default keyboard. It works completely fine when I click one input, unfocus it by clicking outside the input and then click another input. But the issue arises when I click the second input and without unfocusing it, I click on the first input.
Issue:
When the second TextInput is focused, the keyboard is displayed. Then when I press the first input (when the second input is focused and the keyboard is open), it focuses the first input but the keyboard is not dismissed.
To solve this, i added onBlur={()=>Keyboard.dismiss()} to the second input. After adding this prop, when I switch the cursor from the second TextInput to the first, the keyboard is hidden this time, but the first TextInput is not focused. I must press the first TextInput again to make it focused.
Question:
How to make the first TextInput get focus immediately when I press it and show the calculator, not the keyboard?
Example
https://snack.expo.dev/#ersumanbhattarai/93b02d?platform=android

Related

React native text input onblur event gets called on its own, preventing keyboard input to be processed

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

React-native without open keyboard of TextInput, Paste text to TextInput on android and ios

I want to paste text to TextInput but when focus input, i dont want open keyboard.
i used
showSoftInputOnFocus={false}
<TextInput
showSoftInputOnFocus={false}
placeholder={placeholder}
style={styles.InputStyle}
/>
on android i cant paste anything even keyboard not open. However on ios it still opens.
How can i handle this senerio ? or is there suggestion for better way for this senerio ?*

How to activate text input on press of a button in react native?

I'm creating a basic note pad app. In the app, the user can press a button to "add a note". When pressed, a modal is rendered displaying a text input for the user to type their note.
The issue I'm having is once the modal has opened, the user has to manually tap the text input to pull up the keyboard and type their note. Instead I want the text input to be activated automatically the moment the modal is displayed on press of the button. So in other words, allow the user to start typing their note, once the modal opens up.
So I assume I have to some how activate a text input on press of a button? Is this possible?
Thanks.
Use the autoFocus prop.
<TextInput autoFocus={true}
Note that the input will focus when the component is mounted, so you may want to render the modal conditionally.

How to move up just specific elements, having keyboard enabled in React-Native?

I'm creating a chat screen in React-Native, and the issue which I'm confronting now with, is that when I enable the keyboard, the content doesn't move as intended. I tried several things, but neither of them didn't work as expected.
Here is a screen where I've marked the content which has to be moved up when the keyboard is present :
Firstly, I've tried the next structure
<ScrollView scrollEnabled={false} keyboardShouldPersistTaps="handled">
<KeyboardAvoidingView behavior="position">
/...The rest of the content.../
</KeyboardAvoidingView>
</ScrollView
and here's the screen
as seen in the image, the whole container is "pushed" up by the keyboard, and when the keyboard disappears, the content returns to it's normal position.
In the second case, I've tried to assign to the behavior parameter of KeyboardAvoidingView the value "padding", but this didn't help, the keyboard just was going over the screen, and the content didn't modify at all
And at least, I've tried to assign to the same behavior the value "height", and it seemed to work as I wanted, but the problem appeared when the keyboard was gone - the moved content didn't moved to it's initial position. Here are the screens :
Problem resolve, I had just to put the last container (the one where is the input placed) in a KeyboardAvoidingView with behavior="padding"

How to prevent React Native to dismiss keyboard

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"