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 found the answer that worked for me in an old comment on this React Native Github issue.

Essentially, you need to apply the accessible tag to the component that is receiving the ref.

<TouchableOpacity
    accessible
    ref={setInitFocusRef}
    onPress={() => {}}>
  <Text>Blah blah</Text>
</TouchableOpacity>

You may also need to wrap your component in a <View> and put these there instead of the component itself as some components, like <Text> from React Native Paper, don't work unless wrapped.

<View accessible ref={setInitFocusRef}>
  <ComponentToBeFocused />
</View>

Additionally, my code checks to make sure that the reactTag always exists before calling setAccessibilityFocus() to avoid the situation where it's null intermittently.

For example:

useEffect(() => {
    const reactTag = findNodeHandle(setInitFocusRef.current);
    if (reactTag) {
      AccessibilityInfo.setAccessibilityFocus(reactTag);
    }
  }, [setInitFocusRef]);

(Forgive my lack of React Class knowledge, but I believe the equivalent of useEffect in this situation would be componentDidMount and/or componentDidUpdate)