fix(android): keep the tab bar under the keyboard and load pager-view header fonts OK-63557 OK-63273 - #113
Conversation
Material's BottomNavigationView pads itself with getSystemWindowInsetBottom(). Android only folds the IME into that compat inset while the window uses adjustResize, which react-native-keyboard-controller switches on whenever a KeyboardAwareScrollView, KeyboardStickyView or keyboard animation hook is mounted. The bar then grows by the keyboard height, its items end up right above the keyboard, and onTabBarMeasured reports the inflated height to JS. - pad ExtendedBottomNavigationView with systemBars() | displayCutout() insets only, keeping Material's relative start/end handling - make setIgnoreBottomInsets toggle a flag and re-request insets; passing false used to clear the inset listener entirely, which also dropped the navigation bar padding Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Keep the keyboard-safe default from the previous commit, but let apps opt back into a tab bar that rises above the soft keyboard. The value lives in JS, so the behavior can change with a JS or OTA update instead of a new native release. - add ignoreKeyboardInsets (Android only, WithDefault<boolean, true>); false pads the bar by the IME inset, combined with the navigation bar inset through maxOf() so it stays independent of ignoreBottomInsets - read the IME inset explicitly instead of the compat system-window inset, which only carries the IME while the window uses adjustResize - keep both inset flags on ReactBottomNavigationView and re-apply them when onConfigurationChanged recreates the bar; a JS-set ignoreBottomInsets used to be dropped on a uiMode change Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Bump all 40 publishable packages to 3.0.140 and record the Android tab bar keyboard inset fix and the new ignoreKeyboardInsets prop in the changelog. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
…63273 The native tab bar, category items and column labels resolved their font with Typeface.create(fontFamily). That only knows system font families, so a bundled family such as Roobert-Medium silently fell back to the system font on Android while iOS resolved it through UIAppFonts. Resolve the typeface through ReactFontManager, the lookup React Native Text uses: registered custom fonts, then assets/fonts/<family>.ttf|otf, and only then Typeface.create. The fontFamily prop is unchanged, so the same name now renders the same font on both platforms. This upstreams the patch-package patch app-monorepo carries for react-native-pager-view. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Bump all 40 publishable packages to 3.0.141 and record the Android pager-view native header font fix in the changelog. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
…13496) Pin all @onekeyfe native modules to 3.0.140. It carries the react-native-tab-view fix from OneKeyHQ/app-modules#113: the Android bottom tab bar no longer pads itself with the IME inset under adjustResize, so it stays under the soft keyboard instead of rising above it. The new ignoreKeyboardInsets prop keeps the default and is not passed here. The react-native-pager-view patch is renamed to 3.0.140; the package contents it patches are unchanged.
Pin all @onekeyfe native modules to 3.0.141. It upstreams the react-native-pager-view Android font fix from OneKeyHQ/app-modules#113: the native Market tab bar, category items and column labels resolve fontFamily through ReactFontManager, the lookup React Native Text uses, so the bundled Roobert-Medium is loaded from app assets instead of falling back to the system font. The patch-package patch added in #13476 is no longer needed and is removed. The fontFamily values passed from Market are unchanged.
|
@codex review |
|
@codex security review |
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
|
Codex Review: Didn't find any major issues. Hooray! Reviewed commit: ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
If Codex has suggestions, it will comment; otherwise it will react with 👍. Codex can also answer questions or update the PR. Try commenting "@codex address that feedback". |
|
Claude review session: https://claude.ai/code/session_01BRDSb9U47m68vWNXZLXogJ |
…13499) Pin all @onekeyfe native modules to 3.0.141. It upstreams the react-native-pager-view Android font fix from OneKeyHQ/app-modules#113: the native Market tab bar, category items and column labels resolve fontFamily through ReactFontManager, the lookup React Native Text uses, so the bundled Roobert-Medium is loaded from app assets instead of falling back to the system font. The patch-package patch added in #13476 is no longer needed and is removed. The fontFamily values passed from Market are unchanged. Co-authored-by: morizon <sidmorizon@outlook.com>
Summary
ignoreKeyboardInsets(defaulttrue), switches back to the "follow the keyboard" behavior from JS.fontFamilyfrom the app's bundled fonts throughReactFontManager, soRoobert-Mediumno longer falls back to the system font. This upstreams the patch-package patch app-monorepo carried; no props change.latest.b6122250fe47d44c45ignoreKeyboardInsetsc41feab756cf822dc76e519a3081. Tab bar rises with the keyboard (OK-63557)
Root cause
adjustResize. app-monorepo declaresadjustPanonMainActivity, but react-native-keyboard-controller'suseResizeMode()switches the window toSOFT_INPUT_ADJUST_RESIZEwheneverKeyboardAwareScrollView,KeyboardStickyViewor a keyboard animation hook is mounted. The Swap container usesKeyboardAwareScrollView;dumpsys windowshowssim={adjust=resize}once the Trade tab loads.adjustResizethe compat system-window inset includes the IME.InsetsState.calculateInsetsaddsime()tocompatInsetsTypesonly forSOFT_INPUT_ADJUST_RESIZE.BottomNavigationView(Material 1.14.0-alpha05) appliespadding.bottom += insets.getSystemWindowInsetBottom().ReactBottomNavigationViewis a verticalLinearLayout, so the taller bar shrinks the scene and puts its items directly on the keyboard.onTabBarMeasuredalso reported the inflated height to JS, which breaksPage.Footer'smax(keyboardHeight - tabBarHeight, 0)offset.Change
ExtendedBottomNavigationViewinstalls its ownViewCompat.setOnApplyWindowInsetsListener. It pads withsystemBars() | displayCutout()and keeps the RTL-aware start/end handling Material had.ignoreKeyboardInsets(WithDefault<boolean, true>, Android only). When set tofalse, the IME inset, read explicitly viaime(), is combined with the navigation bar inset throughmaxOf(), independent ofignoreBottomInsets. The value lives in JS, so it can change without a native release.setIgnoreBottomInsetstoggles a flag and re-requests insets. Passingfalseused to clear the listener and drop the navigation bar padding.ReactBottomNavigationViewre-applies both inset flags whenonConfigurationChangedrecreates the bar.Verification
app-monorepo
xwith these files innode_modules, shell rebuilt withdev-shell --shell local. API 35 emulator, Trade tab, Swap From amount focused, Gboard docked number pad (IME inset top y=1505).0,2190-1080,24000,1486-1080,2400: bar sits on the keyboardtrue)0,2190-1080,24000,2190-1080,2400: covered by the keyboardignoreKeyboardInsets={false}0,2190-1080,24000,1486-1080,2400: rises above the keyboard0,2190-1080,2400setIgnoreKeyboardInsetsis generated with a missing value mapped totrue, and the C++ props default isbool ignoreKeyboardInsets{true}.ignoreKeyboardInsets={false}onadjustPanscreens.onConfigurationChangedrecreation path, which app-monorepo skips because it setsbarTintColor.2. Pager-view native header fonts (OK-63273)
Root cause
CollapsiblePagerNativeHeaders.ktresolvedfontFamilywithTypeface.create(fontFamily, NORMAL)for the native tab bar buttons, category items and column labels. On Android that only finds system font families, so the bundledRoobert-Mediumsilently fell back to the system font.iOS was already correct.
[UIFont fontWithName:size:]finds Roobert because the fonts are listed inUIAppFonts, bundled as resources, and their PostScript names match (Roobert-Regular/-Medium/-SemiBold/-Bold).Change
All three call sites use
ReactFontManager.getInstance().getTypeface(fontFamily, NORMAL, context.assets), the Android counterpart offontWithName:. ThefontFamilyprop and itssans-serif-mediumdefault are unchanged, and no props are added on either platform.Textuses it (ReactTypefaceUtils), and so do react-native-screens (native tabs), react-native-svg, lottie-react-native and this repo's tab-view.assets/fonts/<family>.ttf|otf, catching theRuntimeExceptionfor a missing asset. Only then does it fall back toTypeface.create. Results are cached per family and style.Verification
app-monorepo Market home on the API 35 emulator, with the patch removed. I built once with the old file and once with this change, then compared the native tab label ink widths with CoreText's width for Roobert-Medium at 42px (16sp × 2.625):
Typeface.create)ReactFontManager)The compiled class calls
ReactFontManager.getTypeface(String, int, AssetManager). On current app-monorepox, Android renders the Stocks chips with the JS selector (app-monorepo #13495), so the native sub header, which uses the same helper, is not shown there.Overlap with #104
#104 (Android floating tab bar) edits the same tab-view files:
RCTTabView.kt,RCTTabViewManager.kt,TabView.tsxandTabViewNativeComponent.ts. It adds the sameViewCompat/WindowInsetsCompatimports, new props next toignoreBottomInsets,setIgnoreBottomInsets(...)calls when switching styles, and manualbottomNavigationpadding. Whichever PR lands second needs a rebase. With this change, #104'ssetIgnoreBottomInsets(false)keeps the inset listener instead of clearing it. Its manualsetPaddingshould be checked against the listener, which re-applies base padding plus the enabled insets on every inset pass.Release
Both versions were published from this branch with the
latestdist-tag, and each run verified all 40 packages on the registry. I also compared the downloaded tarballs with the emulator-tested sources: tab-viewRCTTabView.kt/RCTTabViewManager.ktfor 3.0.140, and pager-viewCollapsiblePagerNativeHeaders.ktfor 3.0.141. They are byte-identical.c41feab756e519a308Jira: https://onekeyhq.atlassian.net/browse/OK-63557, https://onekeyhq.atlassian.net/browse/OK-63273
🤖 Generated with Claude Code