Accessibility

AccessibilityProvider

A React context provider that shares accessibility policies across all components in its tree — font scaling behavior, minimum touch target sizes, contrast mode, and haptic intent resolution.

Import

typescript

import { AccessibilityProvider, useAccessibilityPolicy } from 'reactnatively';
// or
import { AccessibilityProvider, useAccessibilityPolicy } from 'reactnatively/primitives';

Setup

ReactnativelyProvider wraps your app in AccessibilityProvider automatically. Use it standalone only when you need a different policy in a sub-tree:

app/_layout.tsx

import { ReactnativelyProvider } from 'reactnatively';

export default function RootLayout() {
  return (
    <ReactnativelyProvider
      accessibility={{
        allowFontScaling: true,      // true = respect system font size
        minimumTouchTarget: 44,      // 44pt minimum touch area (Apple HIG)
      }}
    >
      <App />
    </ReactnativelyProvider>
  );
}

Standalone usage

KioskMode.tsx

import { AccessibilityProvider } from 'reactnatively';

// Kiosk mode: larger touch targets, no font scaling
export function KioskShell({ children }: { children: React.ReactNode }) {
  return (
    <AccessibilityProvider policy={{ allowFontScaling: false, minimumTouchTarget: 56 }}>
      {children}
    </AccessibilityProvider>
  );
}

useAccessibilityPolicy

Read the active accessibility policy in your own components:

CustomButton.tsx

1import { useAccessibilityPolicy } from 'reactnatively';2import { Text, Pressable, View } from 'react-native';34export function CustomButton({ label, onPress }: { label: string; onPress: () => void }) {5  const { allowFontScaling, minimumTouchTarget } = useAccessibilityPolicy();67  return (8    <Pressable9      onPress={onPress}10      style={{ minWidth: minimumTouchTarget, minHeight: minimumTouchTarget }}11      accessibilityRole="button"12      accessibilityLabel={label}13    >14      <View style={{ justifyContent: 'center', alignItems: 'center', flex: 1 }}>15        <Text allowFontScaling={allowFontScaling} style={{ color: '#fff', fontWeight: '600' }}>16          {label}17        </Text>18      </View>19    </Pressable>20  );21}

Use VisuallyHidden to render content that is visible to screen readers but not on screen:

tsx

import { VisuallyHidden } from 'reactnatively';

// Icon button where the visible icon has no text label
<Pressable accessibilityRole="button">
  <SearchIcon />
  <VisuallyHidden>
    <Text>Search</Text>
  </VisuallyHidden>
</Pressable>