Fix react-native-paper 5 font theme so Source Sans Pro actually applies#242
Open
Fried333 wants to merge 9 commits into
Open
Fix react-native-paper 5 font theme so Source Sans Pro actually applies#242Fried333 wants to merge 9 commits into
Fried333 wants to merge 9 commits into
Conversation
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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):The existing call
configureFonts(fontConfig)resolves toconfigureV3Fonts(undefined)becauseparams.isV3defaults totrueandparams.configisundefined, returning Paper's default MD3 typescale. Combined withversion: 2on the theme, MD2 components then readtheme.fonts.medium.fontFamilyon an MD3-shaped typescale, getundefined, and fall back to the platform system font.Fixed by calling with the documented Paper-5 MD2 shape:
src/containers/Home/Home.themes.js
DefaultThemein Paper 5 is the MD3 light theme, not the old MD2 default. Spreading it withversion: 2and overridingcolors.textdoes nothing visible because MD3 colors useonSurface, nottext. Switched the import toMD2LightTheme as DefaultThemeso the override target actually exists and the inner Home theme matches the global MD2 theme set inApp.js.Test plan
devwith 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.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-codedwidth: 280pixel buttons that should be fluid.