Accessibility and Safe Area

<Pressable accessibilityLabel="Close dialog" onPress={onClose}>
  <Icon name="x" />
</Pressable>

<Text accessibilityRole="header" style={styles.h1}>
  Settings
</Text>

<Pressable
  accessibilityRole="button"
  accessibilityState={{ disabled: loading, busy: loading }}
  onPress={onSave}
>
  <Text>Save</Text>
</Pressable>

<Pressable
  accessibilityLabel="Delete message"
  accessibilityHint="Removes this message from your inbox"
  onPress={onDelete}
>
  <Text>Delete</Text>
</Pressable>

<View accessible accessibilityLabel={`${title}, ${subtitle}`}>
  <Text>{title}</Text>
  <Text>{subtitle}</Text>
</View>

<Image
  source={bg}
  importantForAccessibility="no"
  accessibilityElementsHidden
  style={StyleSheet.absoluteFill}
/>

import { SafeAreaProvider } from "react-native-safe-area-context";
 
export default function Root() {
  return (
    <SafeAreaProvider>
      <App />
    </SafeAreaProvider>
  );
}

import { useSafeAreaInsets } from "react-native-safe-area-context";
 
const insets = useSafeAreaInsets();
return <View style={{ paddingTop: insets.top, flex: 1 }}>{children}</View>;

import { SafeAreaView } from "react-native-safe-area-context";
 
<SafeAreaView style={{ flex: 1 }} edges={["top", "left", "right"]}>
  {children}
</SafeAreaView>

<Pressable
  hitSlop={8}
  style={{ minWidth: 44, minHeight: 44, alignItems: "center", justifyContent: "center" }}
  onPress={onPress}
>
  <Icon name="heart" />
</Pressable>

import { AccessibilityInfo } from "react-native";
 
const reduce = await AccessibilityInfo.isReduceMotionEnabled();
const duration = reduce ? 0 : 250;

const bold = await AccessibilityInfo.isBoldTextEnabled();
const weight = bold ? "700" : "400";

import { findNodeHandle, AccessibilityInfo } from "react-native";
 
const tag = findNodeHandle(ref.current);
if (tag) AccessibilityInfo.setAccessibilityFocus(tag);

const styles = {
  overlayText: { color: "#fff", textShadowColor: "rgba(0,0,0,0.5)", textShadowRadius: 4 },
};

<Text maxFontSizeMultiplier={1.4} style={styles.title}>
  Balance
</Text>