setAccessibilityFocus not working on screen load

[Logan-Lim]

Description

There is an issue with setting accessibility focus on load of a screen. I was able to make it work by calling the function twice in a row.

React Native version:

System:
OS: Windows 10 10.0.19041
CPU: (16) x64 Intel(R) Core(TM) i9-9900KS CPU @ 4.00GHz
Memory: 14.18 GB / 31.93 GB
Binaries:
Node: 12.14.1 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.13.4 - C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK: Not Found
Windows SDK: Not Found
IDEs:
Android Studio: Version 4.0.0.0 AI-193.6911.18.40.6626763
Visual Studio: Not Found
Languages:
Java: 13.0.1
Python: 2.7.17
npmPackages:
@react-native-community/cli: Not Found
react: 16.13.1 => 16.13.1
react-native: https://github.com/expo/react-native/archive/sdk-39.0.0.tar.gz => 0.63.2
react-native-windows: Not Found
npmGlobalPackages:
react-native: Not Found

Steps To Reproduce

1. Use a callback ref to get an element on screen load
2. Get the element tag with findNodeHandle
3. setAccessibilityFocus to the element tag

Expected Results

Accessibility focus should be moved to the desired ref. If I repeat step 3 twice, it will focus correctly, otherwise there is no focus set.

Snack, code example, screenshot, or link to a repository:

Issue raised on StackOverflow: https://stackoverflow.com/questions/63252638/setaccessibilityfocus-using-ref-not-working/
Broken version: https://snack.expo.io/@insats/example-accessibilityinfo-setaccessibilityfocus-not-working
Working version: https://snack.expo.io/@loganlim/example-accessibilityinfo-setaccessibilityfocus-not-working

[devinjameson]

I have the same issue. It works if I repeat step 3 twice.

[devinjameson]

I have the same issue. It works if I repeat step 3 twice.

Actually, to get it to work in all cases, I have to repeat step 3 three times.

[AdamGerthel]

Is it the same on Android as on iOS? IIRC it was only an issue on iOS for me, but I'm not entirely sure.

[yduman]

It's the same on Android. I had to call the API four times until it set the focus appropriately. https://github.com/yduman/InclusiveShop/blob/main/src/components/ProductSizeSelect/ProductSizeSelect.tsx#L72 for reference.

[frags51]

On iOS, this sometimes leads to previous Text being announced, even if the state and text displayed inside my component has already changed. (calling setAccessibilityFocus in useEffect after updating state)

[tastafur]

I have a modal component that does not use the react native modal it is simply a react component and always the first time it does not work in Android in a useEffect and in turn wrapped in an InteractionManager.runAfterInteractions and in iOS it works perfect but in android it works for me perfect, when I focus on the title of the view to navigate to

[tastafur]

This my example
tag appears in the console log but then it doesn't focus, it's magic haha
with two calls to the focus method it works for me

  useEffect(() => {
    InteractionManager.runAfterInteractions(() => {
      if (titleRef && titleRef.current) {
        const tag = findNodeHandle(titleRef.current);
        console.log('tag', tag);
        if (tag) {
          setTimeout(() => {
            AccessibilityInfo.setAccessibilityFocus(tag);
          }, 300);
        }
      }
    });
  }, [titleRef]);
  
    useEffect(() => {
    InteractionManager.runAfterInteractions(() => {
      console.log('titleRef', titleRef.current);
      if (titleRef && titleRef.current) {
        const tag = findNodeHandle(titleRef.current);
        console.log('tag', tag);
        if (tag) {
          setTimeout(() => {
            AccessibilityInfo.setAccessibilityFocus(tag);
            if (Platform.OS === 'android') {
              AccessibilityInfo.setAccessibilityFocus(tag);
            }
          }, 300);
        }
      }
    });
  }, [titleRef]);

[YangShaoLong1984]

I also have the same issue.

[fabOnReact]

https://stackoverflow.com/a/28481095/7295772
dotnet/android#4322
3126e49