react native – structure appears damaged on some iOS gadgets however tremendous on others

I’m constructing a React Native app utilizing Expo, and I’m seeing inconsistent structure/rendering on totally different iOS gadgets. On some iPhones (e.g., iPhone 12, iOS 16), the app appears good, however on others (e.g., iPhone 14, iOS 17), the structure is totally off (fonts are bigger or clipped, spacing is bizarre, colours are flawed, and many others.). I’m additionally utilizing the brand new structure (newArchEnabled) and Hermes (jsEngine: ‘hermes’).

Listed here are my related config recordsdata and a snippet of 1 display:

 // app.json / app.config.js (simplified) 
export default 
{ expo: { identify: 'carpay', slug: 'carpay', jsEngine: 'hermes', model: '1.0.0', orientation: 'portrait', userInterfaceStyle: 'automated', ios: { // Probably related 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, // presently disabled }], ], } }

// One in all my screens (simplified) 
export operate HomeScreen() { const isIOS18OrHigher = (): boolean => { if (Platform.OS !== 'ios') return false const model = Platform.Model const iosVersion = typeof model === 'string' ? parseFloat(model) : model return iosVersion >= 18.0 }
// If iOS 18 or greater, skip loading customized fonts // ...
// My structure makes use of Tamagui, with a dynamic Theme and customized fonts // On some iPhones, the whole lot strains up accurately // On others, the UI is completely off (screenshot beneath)
return (  {/* ... */}  ) }`

Screenshots:

• Appropriate structure (iPhone 13, iOS 18)

•   Damaged structure (iPhone 13 Professional}, iOS 18)

[enter image description here](https://i.sstatic.web/LDL1rQdr.jpg)

Setting:
• Expo SDK: 51 (managed workflow)
• React Native: 0.71
• iOS: 16 and 17 examined
• Hermes: enabled
• Tamagui: 1.x
• System: iPhone 16, iPhone 13

I’d recognize any recommendation on diagnosing and fixing these rendering inconsistencies. Thanks!

I’ve tried:
1. Eradicating the iOS model examine in order that I all the time load customized fonts (as a substitute of skipping on iOS 18+).
2. Disabling requireFullScreen in ios config to see if notched gadgets have been the difficulty.
3. Utilizing userInterfaceStyle: ‘mild’ to rule out darkish mode issues.
4. Turning off newArchEnabled to see if the brand new structure was inflicting structure points.
5. Checking if Accessibility or Show Zoom is enabled on the problematic system.

Regardless of these makes an attempt, some gadgets nonetheless render incorrectly. The largest suspects appear to be customized fonts not loading correctly on sure iOS variations, or some battle with the brand new structure.

Questions:
1. How can I guarantee constant font and structure habits throughout all iOS gadgets utilizing Expo + React Native + Tamagui?
2. Are there recognized points with newArchEnabled or Hermes that would trigger font metrics or structure to vary?
3. Might requireFullScreen or userInterfaceStyle: ‘automated’ be messing with my structure on notched gadgets?