react-native-screens: Keyboard doesn't show up when use someRef.current.focus()

Also noticing the same issue with RN 0.64.1.

The above hack setTimeout(() => someRef.current.focus(), 0) seems to work.

Hi everyone, I was able to get this working using blur() before focus()

  useEffect(() => {
    setTimeout(() => {
      inputRef.current?.blur();
      inputRef.current?.focus();
    }, 100);
  }, []);

I got it from here: https://github.com/react-native-modal/react-native-modal/issues/516#issuecomment-997961846

This should be fixed in react-native 0.63 (currently in RC). See https://github.com/facebook/react-native/commit/6adba409e6256fd2dcc27a4272edcedae89927af, https://github.com/facebook/react-native/commit/055a41b081c5bc9535b071d9b4b7488b92e71803

Edit: In this case you’d need to use the autoFocus prop on TextInput instead of focusing from JS with a ref.

Pretty sure this has something to do with the modal. However, here’s a snack demonstrating the issue. Link to snack

Most forms in my app are wrapped in a modal. Sometimes I need auto focus and when I do, I just don’t use it because I don’t like using setTimeout.

I left comments in the snack. Basically on IOS everything works, autoFocus prop and using ref.current.focus(). On android ref.current.focus() works only if you use setTimeout with a timeout of ~50 or greater.

After some digging, I don’t really think this is related to this library at all.

RN 0.65 (or 0.64?) changed something in the native dispatching order that ends up delaying certain changes. For example, changing a prop and immediately running ref.someMethod (on the setState callback), on Android, will result in the prop not being ready / updated yet, requiring an extra setTimeout call. The same cannot be reproduced on iOS.

For the input focus issue, the behaviour is similar. Do a state change that renders the input (e.g., conditionally rendering it), and immediately call ref.focus(). This will result in the focus not firing because the input is technically not ready on the setState callback, which causes the issue (and can be fixed with a timeout).

I’ve tried with enableScreens(false); and the issue persists, so it’s not a problem with this library, but rather RN.

So RN 0.63 is finally here and the problem persists. Any solution that doesn’t require to work it around with timeouts?

const interval=setInterval(() =>{ if(!Keyboard.isVisible()){

          inputRef.current.blur()
          inputRef.current.focus()
      }else {

          clearInterval(interval)
      }

   }, 50)
   
   chek visible Keyboard. 50-trigger, you can choose the best for you.

Even I’m facing the same issue on android. Adding a delay makes it work

This is true, when you try to focus on component mount. It also does not work for me without timeout. But for me .current.focus doesn’t work anyway, I need to run it like this:

input.current?._root?.focus?.(); or more readable: textInput.current._root.focus();

Hey!

Can you create a snack that will show the issue?

A little bit later, sorry, very busy

And what Platform does the bug occur on?

Android…