Skip to content

Fix react-native-paper 5 font theme so Source Sans Pro actually applies#242

Open
Fried333 wants to merge 9 commits into
VerusCoin:devfrom
Fried333:fix/paper-md2-fonts-and-theme
Open

Fix react-native-paper 5 font theme so Source Sans Pro actually applies#242
Fried333 wants to merge 9 commits into
VerusCoin:devfrom
Fried333:fix/paper-md2-fonts-and-theme

Conversation

@Fried333
Copy link
Copy Markdown

Summary

Two related Paper-5 API mismatches caused most Paper-rendered components (Text, Button, Title, Paragraph) to silently fall back to the platform system font. On iOS the fallback is SF Pro (close in glyph width to the intended Source Sans Pro, so layouts looked fine). On Android the fallback is Roboto, which is meaningfully wider per character and overflows the app's hard-coded widths — manifesting as cut-off button labels ("Next""NEX", "Skip""SKI"), home-screen coin tickers, slide titles, etc., particularly on smaller-screen Android devices.

Both changes are one-liners.

App.js

configureFonts() in Paper 5 expects { config, isV3 } rather than the legacy Paper-4 positional argument. Source (react-native-paper@5.12.5/lib/module/styles/fonts.js):

export default function configureFonts(params) {
  const { isV3 = true, config } = params || {};
  if (isV3) return configureV3Fonts(config);
  return configureV2Fonts(config);
}

The existing call configureFonts(fontConfig) resolves to configureV3Fonts(undefined) because params.isV3 defaults to true and params.config is undefined, returning Paper's default MD3 typescale. Combined with version: 2 on the theme, MD2 components then read theme.fonts.medium.fontFamily on an MD3-shaped typescale, get undefined, and fall back to the platform system font.

Fixed by calling with the documented Paper-5 MD2 shape:

fonts: configureFonts({ config: fontConfig.default, isV3: false }),

src/containers/Home/Home.themes.js

DefaultTheme in Paper 5 is the MD3 light theme, not the old MD2 default. Spreading it with version: 2 and overriding colors.text does nothing visible because MD3 colors use onSurface, not text. Switched the import to MD2LightTheme as DefaultTheme so the override target actually exists and the inner Home theme matches the global MD2 theme set in App.js.

Test plan

  • Built a debug APK on top of dev with these two changes and installed on an Android device that originally reproduced the cutoff: onboarding labels render in full (Next, Skip, My Profile, etc.) and home-screen text renders without truncation.
  • CI Android + iOS builds pass.
  • Maintainer smoke-test on at least one Android and one iOS device confirms Source Sans Pro is rendering as intended across screens.

Follow-up PRs (not in this one) will address the layout antipatterns that amplify the symptom on narrow Android devices: ~47 position: 'absolute' containers without horizontal coords, and several hard-coded width: 280 pixel buttons that should be fluid.

Asherda and others added 9 commits September 24, 2025 15:48
Two related Paper-5 API mismatches caused most Paper-rendered Text/Button/
Title/Paragraph components to silently fall back to system fonts. iOS
landed on SF Pro (close in width to the intended Source Sans Pro, so
layouts looked fine), Android landed on Roboto which is noticeably wider
and overflowed the app's hard-coded widths everywhere, clipping
onboarding button labels ("Next" -> "NEX", "Skip" -> "SKI"), home-screen
coin tickers, slide titles, etc.

App.js
  configureFonts() in Paper 5 expects { config, isV3 }. The old Paper-4
  call shape `configureFonts(fontConfig)` resolves to
  `configureV3Fonts(undefined)` because params.isV3 defaults to true and
  params.config is undefined, returning Paper's default MD3 typescale.
  Combined with version: 2 on the theme, MD2 components then read
  theme.fonts.regular.fontFamily on an MD3 typescale object and get
  undefined, falling back to system fonts. Switch to
  `configureFonts({ config: fontConfig.default, isV3: false })`.

src/containers/Home/Home.themes.js
  `DefaultTheme` in Paper 5 is the MD3 light theme, not the MD2 default.
  Spreading it with `version: 2` and overriding `colors.text` does
  nothing visible because MD3 colors use `onSurface`, not `text`. Import
  `MD2LightTheme as DefaultTheme` so the override target actually exists
  and so the inner Home theme matches the global MD2 theme set in App.js.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants