setAccessibilityFocus using ref not working

Question

I'm using the ref prop along with findNodeHandle on a bunch of components in order to be able to trigger AccessibilityInfo.setAccessibilityFocus. However, it's not always working as expected. Sometimes the reference is null even though componentDidMount has executed.

I'm often using setAccessibilityFocus in order to focus the header of a new element which appears on the screen, for example when opening a modal.

IMPORTANT: This is Voiceover/Talkback functionality so you'll need to have that activated on your device.

See my snack: https://snack.expo.io/@insats/example-accessibilityinfo-setaccessibilityfocus-not-working

This is the code sample:

import React, { Component } from 'react';
import {
  View,
  Text,
  findNodeHandle,
  TouchableOpacity,
  AccessibilityInfo,
  StatusBar,
} from 'react-native';

class Sample extends React.Component {
  constructor(props) {
    super(props);
    this.accessibilityRef = null;
  }

  componentDidMount() {
    console.log('componentDidMount');
    this.setAccessibilityFocus();
  }

  setAccessibilityRef(el) {
    console.log('setAccessibilityRef', el);
    this.accessibilityRef = el;
  }

  setAccessibilityFocus() {
    console.log('setAccessibilityFocus', this.accessibilityRef);

    if (this.accessibilityRef) {
      const reactTag = findNodeHandle(this.accessibilityRef);
      AccessibilityInfo.setAccessibilityFocus(reactTag);
    }
  }

  render() {
    console.log('Rendering Sample');

    return (
      <Text ref={this.setAccessibilityRef}>
        This text ought to be read out loud by the screenreader if enabled
      </Text>
    );
  }
}

export default class App extends React.Component {
  state = {
    open: false,
  };

  toggle = () => this.setState({ open: !this.state.open });

  render() {
    return (
      <View style={{ margin: 50 }}>
        <StatusBar hidden />
        <TouchableOpacity
          style={{ backgroundColor: 'blue', padding: 20, marginBottom: 20 }}
          onPress={this.toggle}>
          <Text style={{ color: 'white' }}>
            {this.state.open ? 'Hide text' : 'Show text'}
          </Text>
        </TouchableOpacity>

        {this.state.open && <Sample />}
      </View>
    );
  }
}

Answer 1

I don't really understand what is causing these issues. I've found that calling the setAccessibilityFocus twice solves the problem. You can simplify the logic of focusing by just handling everything in the callback ref as well.

Example:

export default () => {

    const setInitFocus = (element: React.Component | null) => {
        if (element == null) return;
        const elementId = findNodeHandle(element);
        if (elementId) {
            AccessibilityInfo.setAccessibilityFocus(elementId);
            AccessibilityInfo.setAccessibilityFocus(elementId);
        }
    };

    return (
        <TouchableOpacity
          onPress={() => {}}
          ref={setInitFocus}
        >
            <Text>Blah blah</Text>
        </TouchableOpacity>
    );
};

Here's your snack with those changes applied:

https://snack.expo.io/@loganlim/example-accessibilityinfo-setaccessibilityfocus-not-working