System-Level Accessibility Preferences

In this lesson, you will learn how to adjust your app’s layout density in real-time based on the user's system-wide "Larger Text" or "Display Zoom" accessibility settings.

Understanding Display Density

Users often configure their phones to have larger text or zoomed-in layouts to make information easier to read. While standard components often handle text scaling automatically, your custom layouts—like complex card grids or side-by-side flex containers—might break or look cramped when system settings change.

To manage this, we use the useWindowDimensions hook or the AccessibilityInfo API to detect when these preferences shift, allowing you to switch between "Compact" and "Comfortable" layout modes.

Implementing Adaptive Layouts

If you have a card component that usually sits side-by-side in a row, you might want to switch to a vertical column layout when the system font scale is significantly increased. This prevents your content from overlapping or clipping:

import { useWindowDimensions, View, StyleSheet } from 'react-native';

const MyResponsiveCard = () => {
  const { fontScale } = useWindowDimensions();
  
  // If font scale is > 1.2, switch to vertical stacking
  const isLargeLayout = fontScale > 1.2;

  return (
    <View style={[styles.container, isLargeLayout && styles.verticalContainer]}>
      <View style={styles.card} />
      <View style={styles.card} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flexDirection: 'row' },
  verticalContainer: { flexDirection: 'column' },
  card: { width: 100, height: 100, margin: 5 }
});

By checking the fontScale, you can conditionally update your flexDirection or padding values. This ensures that your layout remains usable regardless of whether a user prefers a condensed, information-dense screen or a highly readable, magnified interface.

When designing these interfaces, always test your layout with the system font size set to the maximum allowed value in your simulator or physical device settings. If your elements start to push off-screen, it is a sign that your flex containers need to be swapped to a scrolling or stacked approach to accommodate the accessibility preference.

Key Takeaway: Use the fontScale property from useWindowDimensions to dynamically toggle your layout’s flex direction and spacing, ensuring your UI stays legible when users enable system-level accessibility zoom.