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 <Text> 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 https://github.com/xamarin/xamarin-android/issues/4322 https://github.com/facebook/react-native/pull/34969/commits/3126e49a9209c46971919bf49d68ed0a2e9c8d56