I’m building a React Native app using Expo, and I’m seeing inconsistent layout/rendering on different iOS devices. On some iPhones (e.g., iPhone 12, iOS 16), the app looks perfect, but on others (e.g., iPhone 14, iOS 17), the layout is completely off (fonts are larger or clipped, spacing is weird, colors are wrong, etc.). I’m also using the new architecture (newArchEnabled) and Hermes (jsEngine: 'hermes').

Here are my relevant config files and a snippet of one screen:

 // app.json / app.config.js (simplified) 
export default {
  expo: {
    name: 'carpay',
    slug: 'carpay',
    jsEngine: 'hermes',
    version: '1.0.0',
    orientation: 'portrait',
    userInterfaceStyle: 'automatic',
    ios: {
      // Possibly relevant settings
      supportsTablet: true,
      requireFullScreen: true,
      newArchEnabled: true,
      minIOSVersion: '15.1',
    },
    android: {
      newArchEnabled: true,
    },
    // ...
  },
};

// babel.config.js (simplified) 
module.exports = (api) => {
  api.cache(false);
  return {
    presets: [
      ['babel-preset-expo', { jsxRuntime: 'automatic' }]
    ],
    plugins: [
      // ...
      [
        '@tamagui/babel-plugin',
        {
          components: ['@my/ui', 'tamagui'],
          config: '../../packages/ui/src/tamagui.config.ts',
          disable: true, // currently disabled
        }
      ]
    ],
  };
};

// One of my screens (simplified) 
export function HomeScreen() {
  const isIOS18OrHigher = (): boolean => {
    if (Platform.OS !== "ios") return false;
    const version = Platform.Version;
    const iosVersion = typeof version === "string" ? parseFloat(version) : version;
    return iosVersion >= 18.0;
  };

  // If iOS 18 or higher, skip loading custom fonts...
  // My layout uses Tamagui, with a dynamic Theme and custom fonts.
  // On some iPhones, everything lines up correctly;
  // on others, the UI is totally off (screenshot below).

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      {/* ... */}
    </GestureHandlerRootView>
  );
}

Screenshots:

• Correct layout (iPhone 13, iOS 18)

• Broken layout (iPhone 13 Pro}, iOS 18)

Environment:

• Expo SDK: 51 (managed workflow)

• React Native: 0.71

• iOS: 16 and 17 tested

• Hermes: enabled

• Tamagui: 1.x

• Device: iPhone 16, iPhone 13

I’d appreciate any advice on diagnosing and fixing these rendering inconsistencies. Thanks!

I’ve tried:

1. Removing the iOS version check so that I always load custom fonts (instead of skipping on iOS 18+).

2. Disabling requireFullScreen in ios config to see if notched devices were the issue.

3. Using userInterfaceStyle: 'light' to rule out dark mode problems.

4. Turning off newArchEnabled to see if the new architecture was causing layout issues.

5. Checking if Accessibility or Display Zoom is enabled on the problematic device.

Despite these attempts, some devices still render incorrectly. The biggest suspects seem to be custom fonts not loading properly on certain iOS versions, or some conflict with the new architecture.

Questions:

1. How can I ensure consistent font and layout behavior across all iOS devices using Expo + React Native + Tamagui?

2. Are there known issues with newArchEnabled or Hermes that could cause font metrics or layout to differ?

3. Could requireFullScreen or userInterfaceStyle: 'automatic' be messing with my layout on notched devices?