Skip to main content
Logo Appt Light

Accessibility focus on React Native

Sometimes you need to programmatically move the accessibility focus to a specific element. For example, when you present a modal, the assistive technology should move it's focus to it. Or when moving to a new screen, you might want assistive technologies to focus a specific element.

In React Native you can move accessibility focus by using the setAccessibilityFocus method from the AccessibilityInfo class. This method requires a reactTag, which you can find by calling the findNodeHandle method.

function Component() {
  const ref = useRef(null);
  
  function setFocus() {
    const reactTag = findNodeHandle(ref.current);
    
    if (reactTag) {
      AccessibilityInfo.setAccessibilityFocus(reactTag);
    }
  }

  return <View ref={ref} accessible accessibilityLabel="Modal" />
};

Feedback?

Let us know!