Repository navigation
Add liquid glass bottom tab bar to iOS, Android and mWeb #101339
+2,155
−292
There are no files selected for viewing
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| # `react-native-screens` patches | ||
|
|
||
| ### [react-native-screens+4.28.0+001+animate-hiding-the-native-tab-bar.patch](react-native-screens+4.28.0+001+animate-hiding-the-native-tab-bar.patch) | ||
|
|
||
| - Reason: The App hides the native tab bar on screens that are not a tab root, which React Navigation forwards to RNScreens as `tabBarHidden` (it derives the flag from `tabBarStyle.display === 'none'`). RNScreens calls UIKit's `setTabBarHidden:animated:` with `animated:NO`, so the bar blinks in and out instead of travelling with the screen that hid it. The patch animates the change once the bar is in a window, which lets UIKit run its own show/hide animation without animating the bar out on the first render. The pre-iOS 18 branch is left alone: it assigns `tabBar.hidden` directly and has no animated counterpart. **This patch can be removed on the bump to react-native-screens 4.29.0**, the first release with the upstream fix linked below. | ||
| - Upstream PR/issue: fixed upstream by [software-mansion/react-native-screens#4632](https://github.com/software-mansion/react-native-screens/pull/4632), which animates by default behind a new `ios.tabBarHiddenAnimationEnabled` prop, and [#4673](https://github.com/software-mansion/react-native-screens/pull/4673), which skips the animation on the first render. Both are merged after the 4.28.0 release and labeled for the v4 backport. | ||
| - E/App issue: [#101169](https://github.com/Expensify/App/issues/101169) | ||
| - PR introducing patch: [#101339](https://github.com/Expensify/App/pull/101339) | ||
|
|
||
| ### [react-native-screens+4.28.0+002+android-tab-label-typography.patch](react-native-screens+4.28.0+002+android-tab-label-typography.patch) | ||
|
|
||
| - Reason: Two changes to the Android tab labels, both in `TabsAppearanceApplicator`, which React Navigation has no option for. | ||
| - Bold selected label. The Android tab bar takes one font weight for every label, while the design marks the selected tab with a bold label, the same way the JS side bar does. Material's `BottomNavigationView` draws each item with two labels, a small one shown while unselected and a large one shown while selected. `updateFontStyles` sets the large label's typeface with `Typeface.BOLD`, the way Material applies its own bold, so Android picks the bold face of the same font family. Material's `setItemTextAppearanceActiveBoldEnabled` is not used for this: it re-applies Material's 12sp text size to the large label alone and recomputes the selected item's offset from the difference between the two labels' sizes, so every selected tab would sit higher than the others. | ||
| - Letter spacing. `updateFontStyles` replaces the typeface and size of Material's tab labels but keeps the rest of Material 3's `LabelMedium` text appearance, which tracks letters 0.5sp apart. With Expensify Neue the labels read too spread out next to the rest of the app, so the patch sets the letter spacing of both labels to 0. | ||
| - Upstream PR/issue: not reported, because both changes are the App's typography (a bold selected label and its letter spacing) rather than a library defect, and RNScreens has no option for either. | ||
| - E/App issue: [#101169](https://github.com/Expensify/App/issues/101169) | ||
| - PR introducing patch: [#101339](https://github.com/Expensify/App/pull/101339) | ||
|
|
||
| ### [react-native-screens+4.28.0+003+no-android-tab-icon-tint.patch](react-native-screens+4.28.0+003+no-android-tab-icon-tint.patch) | ||
|
|
||
| - Reason: The Android account tab shows the user's avatar. `TabsAppearanceApplicator` assigns `bottomNavigationView.itemIconTintList` unconditionally, and a `ColorStateList` tint is `SRC_IN`, so it flattens the avatar to a solid silhouette in the tint color. React Navigation's `tinted: false` only reaches iOS, since `getPlatformIcon` in `@react-navigation/bottom-tabs` always hands Android a plain `imageSource`. The patch drops the icon tint list so Android draws every icon bitmap as supplied. The App recolors the glyphs off-screen in Skia for both selection states, so they keep the design's colors. Label colors are untouched and keep coming from `tabBarItemTitleFontColor`. | ||
| - Upstream PR/issue: not reported, because dropping the tint for every icon fits only a bar whose icons all arrive pre-colored, as the App's do. The disabled and focused icon colors go with it, which the App does not use. | ||
|
Contributor
There was a problem hiding this comment. Same here, can't we add an option in |
||
| - E/App issue: [#101169](https://github.com/Expensify/App/issues/101169) | ||
| - PR introducing patch: [#101339](https://github.com/Expensify/App/pull/101339) | ||
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| diff --git a/node_modules/react-native-screens/ios/tabs/host/RNSTabsHostComponentView.mm b/node_modules/react-native-screens/ios/tabs/host/RNSTabsHostComponentView.mm | ||
| --- a/node_modules/react-native-screens/ios/tabs/host/RNSTabsHostComponentView.mm | ||
| +++ b/node_modules/react-native-screens/ios/tabs/host/RNSTabsHostComponentView.mm | ||
| @@ -244,7 +244,9 @@ | ||
| _tabBarHidden = newComponentProps.tabBarHidden; | ||
| #if RNS_IPHONE_OS_VERSION_AVAILABLE(18_0) | ||
| if (@available(iOS 18.0, *)) { | ||
| - [_controller setTabBarHidden:_tabBarHidden animated:NO]; | ||
| + // Animated so the bar slides out with the screen that hid it instead of blinking away, except before the bar | ||
| + // is on screen, where the first render would animate it out. | ||
| + [_controller setTabBarHidden:_tabBarHidden animated:[[_controller tabBar] window] != nil]; | ||
| } else | ||
| #endif // RNS_IPHONE_OS_VERSION_AVAILABLE(18_0) | ||
| { |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| diff --git a/node_modules/react-native-screens/android/src/main/java/com/swmansion/rnscreens/gamma/tabs/appearance/TabsAppearanceApplicator.kt b/node_modules/react-native-screens/android/src/main/java/com/swmansion/rnscreens/gamma/tabs/appearance/TabsAppearanceApplicator.kt | ||
| index 10cd91b..6f059bd 100644 | ||
| --- a/node_modules/react-native-screens/android/src/main/java/com/swmansion/rnscreens/gamma/tabs/appearance/TabsAppearanceApplicator.kt | ||
| +++ b/node_modules/react-native-screens/android/src/main/java/com/swmansion/rnscreens/gamma/tabs/appearance/TabsAppearanceApplicator.kt | ||
| @@ -3,6 +3,7 @@ package com.swmansion.rnscreens.gamma.tabs.appearance | ||
| import android.annotation.SuppressLint | ||
| import android.content.Context | ||
| import android.content.res.ColorStateList | ||
| +import android.graphics.Typeface | ||
| import android.graphics.drawable.StateListDrawable | ||
| import android.util.TypedValue | ||
| import android.view.MenuItem | ||
| @@ -161,13 +162,18 @@ internal class TabsAppearanceApplicator( | ||
| tabBarAppearance?.tabBarItemTitleLargeLabelFontSize?.takeIf { it > 0 }?.let { PixelUtil.toPixelFromSP(it) } | ||
| ?: context.resources.getDimension(R.dimen.design_bottom_navigation_text_size) | ||
|
|
||
| + // Both labels drop the 0.5sp letter tracking of Material's text appearance, which reads wider than the app's labels. | ||
| // Inactive | ||
| smallLabel.setTextSize(TypedValue.COMPLEX_UNIT_PX, smallFontSize) | ||
| smallLabel.typeface = fontFamily | ||
| + smallLabel.letterSpacing = 0f | ||
|
|
||
| // Active | ||
| + // Bold is set here rather than with `setItemTextAppearanceActiveBoldEnabled`, which re-applies Material's text size | ||
| + // to this label alone, so Material lifts the selected item by the size difference between the two labels. | ||
| largeLabel.setTextSize(TypedValue.COMPLEX_UNIT_PX, largeFontSize) | ||
| - largeLabel.typeface = fontFamily | ||
| + largeLabel.setTypeface(fontFamily, Typeface.BOLD) | ||
| + largeLabel.letterSpacing = 0f | ||
| } | ||
| } | ||
|
|
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| diff --git a/node_modules/react-native-screens/android/src/main/java/com/swmansion/rnscreens/gamma/tabs/appearance/TabsAppearanceApplicator.kt b/node_modules/react-native-screens/android/src/main/java/com/swmansion/rnscreens/gamma/tabs/appearance/TabsAppearanceApplicator.kt | ||
| index 9238416..d7d2024 100644 | ||
| --- a/node_modules/react-native-screens/android/src/main/java/com/swmansion/rnscreens/gamma/tabs/appearance/TabsAppearanceApplicator.kt | ||
| +++ b/node_modules/react-native-screens/android/src/main/java/com/swmansion/rnscreens/gamma/tabs/appearance/TabsAppearanceApplicator.kt | ||
| @@ -64,24 +64,10 @@ internal class TabsAppearanceApplicator( | ||
| bottomNavigationView.itemTextColor = ColorStateList(states, fontColors) | ||
|
|
||
| // Icon color | ||
| - val iconDisabledColor = | ||
| - tabBarAppearance?.disabled?.tabBarItemIconColor | ||
| - ?: resolveColorAttr(context, R.attr.colorOnSurfaceVariant) | ||
| - | ||
| - val iconFocusedColor = | ||
| - tabBarAppearance?.focused?.tabBarItemIconColor | ||
| - ?: resolveColorAttr(context, R.attr.colorOnSurfaceVariant) | ||
| - | ||
| - val iconSelectedColor = | ||
| - tabBarAppearance?.selected?.tabBarItemIconColor | ||
| - ?: resolveColorAttr(context, R.attr.colorOnSecondaryContainer) | ||
| - | ||
| - val iconNormalColor = | ||
| - tabBarAppearance?.normal?.tabBarItemIconColor | ||
| - ?: resolveColorAttr(context, R.attr.colorOnSurfaceVariant) | ||
| - | ||
| - val iconColors = intArrayOf(iconDisabledColor, iconSelectedColor, iconFocusedColor, iconNormalColor) | ||
| - bottomNavigationView.itemIconTintList = ColorStateList(states, iconColors) | ||
| + // Every tab icon arrives as a bitmap that already carries its own colors: the recolored glyph and the user's | ||
| + // avatar on the account tab. A tint list paints over all of it with a single color, so no tint is applied and | ||
| + // the bitmap is drawn as supplied, which is how `tinted: false` already behaves on iOS. | ||
| + bottomNavigationView.itemIconTintList = null | ||
|
|
||
| // LabelVisibilityMode | ||
| // From docs: can be one of LABEL_VISIBILITY_AUTO, LABEL_VISIBILITY_SELECTED, LABEL_VISIBILITY_LABELED, or LABEL_VISIBILITY_UNLABELED |
File renamed without changes.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| diff --git a/node_modules/@react-navigation/bottom-tabs/lib/module/unstable/NativeBottomTabView.native.js b/node_modules/@react-navigation/bottom-tabs/lib/module/unstable/NativeBottomTabView.native.js | ||
| index 1183c51..303635c 100644 | ||
| --- a/node_modules/@react-navigation/bottom-tabs/lib/module/unstable/NativeBottomTabView.native.js | ||
| +++ b/node_modules/@react-navigation/bottom-tabs/lib/module/unstable/NativeBottomTabView.native.js | ||
| @@ -160,7 +160,7 @@ export function NativeBottomTabView({ | ||
| ios: PlatformColor('label'), | ||
| default: colors.text | ||
| }); | ||
| - const activeIndicatorColor = currentOptions?.tabBarActiveIndicatorColor ?? typeof activeTintColor === 'string' ? Color(activeTintColor)?.alpha(0.1).string() : undefined; | ||
| + const activeIndicatorColor = currentOptions?.tabBarActiveIndicatorColor ?? (typeof activeTintColor === 'string' ? Color(activeTintColor)?.alpha(0.1).string() : undefined); | ||
| const onTransitionStart = ({ | ||
| closing, | ||
| route |
Oops, something went wrong.
Oops, something went wrong.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe we could add such options in an upstream PR? If not we'll have to support this patch forever