react-native-a11y-focus

| iOS reader | Android reader | | --------------------------------------------------------- | ------------------------------------------------------------- | | |

A11yFocusView - a native-based component with a screen reader focus command.

• Bridgeless
• New architecture
• Backward compatibility

Why?: The reason for this workaround is the future deprecation (migration) of findNodeHandle. Prerequisites for using the new architecture include migrating from findNodeHandle to commands and working with a HostComponent. Unfortunately, at the moment, there is no appropriate way to change screen reader focus, aside from using setAccessibilityFocus, which requires a tagId based on findNodeHandle calculations.

Installation

npm install react-native-a11y-focus

Usage

import { A11yFocusView } from "react-native-a11y-focus";

// ...

  const focusRef = useRef<A11yFocusViewType>(null);
  
  return (
    <View style={styles.container}>
      <A11yFocusView
        ref={focusRef}
        style={styles.box}
      >
        <Button title="Target component" />
      </A11yFocusView>
      <Button title="Focus target component" onPress={() => focusRef.current?.focus?.()} />
    </View>
  )

Note: A11yFocusView focuses a target component based on its own accessibility. If A11yFocusView is accessible, it will focus on itself; if not, it will focus on the first child.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library