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?