Platform-specific typography in a global theme

WHAT THIS TESTS The interviewer wants to see that you handle platform typography in one centralized, maintainable place rather than sprinkling conditionals throughout the app, and that you respect each platform's native font feel.

A GOOD ANSWER COVERS You define a single theme or typography module. The base fontFamily is resolved once using Platform.select, for example Platform.select({ ios: 'System', android: 'Roboto' }), since iOS uses San Francisco as its system font and Android uses Roboto. On top of that you expose semantic text styles, such as h1, body, and caption, each combining the resolved family with size, weight, and line height, and you export them via StyleSheet.create. Every component then imports these shared styles, or better, uses a custom Text component (an AppText) that applies the theme by default and accepts a variant prop. This way the platform decision exists in exactly one file; screens never branch on platform themselves. For custom bundled fonts you register the font files per platform and reference the correct family name, again behind the theme. The result is consistent, platform-appropriate typography that is trivial to change globally.

COMMON WRONG ANSWERS Writing Platform.OS === 'ios' ? ... : ... inside every component scatters the decision and guarantees drift over time. Hardcoding Roboto everywhere makes iOS look non-native, and hardcoding San Francisco fails on Android. Overriding fonts per screen instead of through the theme leads to inconsistency.

LIKELY FOLLOW-UPS How do you add a custom brand font? Bundle the files, link them per platform, and reference the family in the theme, still behind Platform.select if names differ. How do you keep weights consistent? Map semantic weights to fontWeight or specific font files. Why a Text wrapper? It enforces defaults and one place to evolve.

ONE CONCRETE EXAMPLE In theme.ts: const fontFamily = Platform.select({ ios: 'System', android: 'Roboto' }); export const typography = StyleSheet.create({ body: { fontFamily, fontSize: 16 }, h1: { fontFamily, fontSize: 28, fontWeight: '700' } }). An AppText component spreads typography[variant], so a screen just renders AppText variant="h1", and the correct font appears on each platform automatically.