autoFocus() is not opening keyboard when screen loads

[nainaag17]

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.

[anday013]

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!

[nainaag17]

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.

1000000938.mp4

[nainaag17]

Hey @anday013 Do you get a chance to look into it ?

[kntbruh]

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

[anday013]

Thank you for the details. I am looking for it

[anday013]

btw what version of react-native are you using? CC: @kntbruh @nainaag17

[nainaag17]

@anday013 At my end, react-native version is 0.75.2

[kntbruh]

@anday013 0.75.2 too

[anday013]

I could not replicate the issue. I will try to get a Samsung device. In the meantime try this solution:
software-mansion/react-native-screens#472 (comment)

CC: @kntbruh @nainaag17

[nainaag17]

@anday013 I have tried this, but its still not working.

[anday013]

I have tried on Samsung Galaxy device, still working fine

[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 #84 (comment), but its still not working.

@kntbruh Is it working at your end?

[talhache]

@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!

[anday013]

@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?

[talhache]

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.

document_5343920260984627406.mp4

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!