Accessibility
Reactnatively is designed with accessibility as a first-class concern — not an afterthought. Components ship with sensible defaults for screen readers, touch targets, font scaling, and reduced motion. Most of the work is already done.
What's built in
All Reanimated-powered animations read the OS reduced-motion setting. When enabled, animations snap to their end state with no interpolation. No configuration needed.
Interactive components maintain at least 44×44pt touch targets per Apple HIG and 48×48dp per Material Design, even when the visible element is smaller.
Typography components respect the system font scale by default. allowFontScaling can be disabled per-component when the design requires it.
Interactive components accept accessibilityLabel, accessibilityHint, and accessibilityRole props. Form components wire these to native accessibility trees.
Modals, bottom sheets, and dialogs trap focus when open and restore it on close.
Glass surfaces use text contrast ratios that meet WCAG AA regardless of the blur layer beneath them.
Adding accessibility labels
1import { Button, IconButton, Switch } from 'reactnatively';23// All interactive components accept standard RN accessibility props4<Button5 accessibilityLabel="Submit form"6 accessibilityHint="Validates and sends your data"7 onPress={handleSubmit}8 label="Submit"9/>1011<IconButton12 icon={<SearchIcon />}13 accessibilityLabel="Open search"14 onPress={openSearch}15/>1617<Switch18 value={notifications}19 onValueChange={setNotifications}20 accessibilityLabel="Enable push notifications"21/>Accessibility roles
Most components set the correct accessibilityRole automatically. Override when your use case differs from the default:
// Button defaults to role="button" — override when used as a link
<Button
accessibilityRole="link"
onPress={() => Linking.openURL(url)}
label="Open docs"
/>
// GlassView is a plain View — set role when meaningful
<GlassView
accessibilityRole="article"
accessibilityLabel="News item: Apollo mission"
elevation={2}
>Reduce transparency
iOS users can enable "Reduce Transparency" in Settings. Pass reduceTransparency: true to GlassPlatformProvider to disable all blur and switch to solid surfaces:
import { GlassPlatformProvider } from 'reactnatively/glass';
import { AccessibilityInfo } from 'react-native';
const [reduceTransparency, setReduceTransparency] = useState(false);
useEffect(() => {
AccessibilityInfo.isReduceTransparencyEnabled().then(setReduceTransparency);
}, []);
return (
<GlassPlatformProvider material={{ reduceTransparency }}>
<App />
</GlassPlatformProvider>
);