AutoFocusOnLoad is not working

[selva21kd]

AutoFocusOnLoad is not working, it is just open the keypad but not focusing on the first text input field.

To Reproduce Steps to reproduce the behavior:

1. <OTPInput style={styles.otpContainer} pinCount={6} autoFocusOnLoad={true} codeInputFieldStyle={styles.underlineStyleBase} codeInputHighlightStyle={styles.underlineStyleHighLighted} onCodeFilled={(code) => { console.log(code }} />

Expected behavior when loading into new screen it should open keypad and focus on the first text input field.

Screenshots

Smartphone (please complete the following information): All Devices

Additional context Add any other context about the problem here.

[Raunak-Agrawal]

Hi guys. I am able to solve it.

The way which I implemented is: Copy the code ( basically source index.ts and helper files which it uses ) and then we need to either convert the code to use functional component or else edit this line here inside componentDidMount

setTimeout(() => this.bringUpKeyBoardIfNeeded(), 250);

For anyone looking up for explanation: https://stackoverflow.com/questions/46715378/react-native-textinput-does-not-get-focus

Either we can contribute the same change for which it needs to get it approved :D but this should do it for now :)

[Vrishabhsk]

is this issue fixed yet?

[rizwan92]

when this get fixed ??

[VikasReactNative]

i got the solution from this link

Here is how you can easily disconnect your hardware key board. Now when you will focus inside textInput area, it will open the keypad of iOS simulator

https://stackoverflow.com/questions/34977588/input-text-doesnt-show-keyboard-on-ios-simulator

[VikasReactNative]

when this get fixed ??

this not the issue of library have a look on my given solution.

[mokshmodi96]

Anyone else facing the same issue download the package from my forked repo. @Raunak-Agrawal 's fix is implemented into the code

[Rubiojen]

A working workarount:

in previous screen:

Keyboard.dismiss(); await wait(250); navigateToOtop()

const wait = (delay: number): Promise => new Promise(res => setTimeout(res, delay));

[Villa2311]

Solution:

const OTPContainer = () => { const otpRef = useRef(null);

useEffect(() => { setTimeout(() => otpRef.current.focusField(0), 250); }, []);

return <OTPInputView ref={otpRef} autoFocusOnLoad={false} ... /> }

[timothyerwin]

this is actually covered in one of the closed tickets...you need to call Keyboard.dismiss() before showing the otp screen.