anday013
autoFocus() is not opening keyboard when screen loads
When screen is loading autoFocus on OTP is true and working fine. My requirement is to open the keyboard when screen loads with autoFocus, it is not working.
Also, onFocus() callback method is not implementing.
Expected behavior: Keyboard should open when screen loads with autoFocus true.
Hi @nainaag17. Please give more information about environment (version of the library, device you're using), please also attach short demo of the issue, because on my end it works fine. Thanks!
Hi @anday013 , I am using the latest version. Here are the details below for your reference.
Library version: 1.7.3 Android device: Samsung Galaxy F14 5G Android Version: 14
Please check the demo as well, it is not opening the keyboard when screen opens and OTP boxes has the auto focus.
https://github.com/user-attachments/assets/cd72e51c-8a75-482b-bc9e-1cd362980cbd
Same problem Library version: 1.7.1 Android device:Realme 6 Android Version: 11 Autofocus doesn't work when I navigate to OTP input screen from modal component
This helps: useLayoutEffect(() => { otpInputRef.current?.focus(); }, []); But only if your keyboard was open at the last screen, but if you close keyboard and go to the OTP screen - keyboard doesn't appear
I could not replicate the issue. I will try to get a Samsung device. In the meantime try this solution: https://github.com/software-mansion/react-native-screens/issues/472#issuecomment-1239494850
CC: @kntbruh @nainaag17
@anday013 Its not working at my end; I have tested on OnePlus devices as well. What could be the possible reason for not opening the keyboard when autoFocus is true. Also, I have tried your solution https://github.com/anday013/react-native-otp-entry/issues/84#issuecomment-2468107882, but its still not working.
@kntbruh Is it working at your end?
@anday013
Hi, for some reason I can't set styles via 'textInputProps', such as text color or size. I would like to change the text color when the system theme changes.
textInputProps={{
style: {
color: themeName === 'dark' ? 'white' : 'black',
},
accessibilityLabel: 'One-Time Password',
autoComplete: 'one-time-code',
}}
Please pay attention to this problem and give me a hint, thanks!
@talhache Regarding the styling issues you have, you need to use proper props. The prop you are using is for underlying hidden TextInput, changing its styles won't affect anything. Try to use pinCodeTextStyle from here:
Regarding the autofill, what platform are you testing on? Android?
Regarding the autofill, what platform are you testing on? Android?
@anday013 Thanks for the tip with styles, I don’t understand how I didn’t pay attention to this!) yes, on Android. But later I need testing on iOS.
https://github.com/user-attachments/assets/5bc6e3cd-330d-4ffb-84a3-c9396596b3a5
The video demonstrates that minimizing the application triggers the hint for auto-filling the code to appear. I'm not entirely sure why this happens, but when I use the autoComplete="one-time-code" prop on a standard React Native TextInput, everything works as expected.
It seems the issue might be related to the keyboard not updating when the code is received, and a re-render might be involved. However, I’m still new to this and may not fully understand the underlying cause.
Additional context: I encountered a similar issue with TextInput, where the hint would only appear after removing autoFocus and then manually clicking the input. To solve this, I added ref.current.focus() inside a useEffect with a 200ms delay, which worked. Unfortunately, this approach doesn’t work with OtpInput.
I really appreciate the design of your solution. Could you please look into this issue or guide me on how to resolve it? Thank you!
Hey @anday013, hello again! What is the status of this problem? do you have any thoughts about this problem?
I like your library and am using it for our team's project. Thank you!
hey @talhache I was not around due to the holiday season. I remember last time I failed to replicate the issue. I will give it one more shoot, in the meantime, lmk any information that could be helpful in replicating the issue. Thank you a lot!
hey @talhache I was not around due to the holiday season. I remember last time I failed to replicate the issue. I will give it one more shoot, in the meantime, lmk any information that could be helpful in replicating the issue. Thank you a lot!
I came across this problem, mainly in Safari (PWA). I had to wait 500ms before focusing on the input.
useLayoutEffect(() => { setTimeout(() => { otpRef.current?.focus(); }, 500); }, []);
Yeah what pfndesign said.
useEffect(() => {
const timer = setTimeout(() => {
if (otpInputRef.current) {
otpInputRef.current.focus();
}
}, 100);
return () => clearTimeout(timer);
}, []);
Not a beauty but at least a workaround.
