callstack · thiagobrez · May 19, 2026 · May 19, 2026 · May 20, 2026 · May 20, 2026
diff --git a/.changeset/large-hats-teach.md b/.changeset/large-hats-teach.md
@@ -0,0 +1,5 @@
+---
+'react-native-bottom-tabs': patch
+---
+
+Add `experimental_bakedTintColors` to opt into the iOS 26 Liquid Glass active and inactive tint color workaround.
diff --git a/apps/example/src/Examples/TintColors.tsx b/apps/example/src/Examples/TintColors.tsx
@@ -4,6 +4,7 @@ import { Article } from '../Screens/Article';
 import { Albums } from '../Screens/Albums';
 import { Contacts } from '../Screens/Contacts';
 import { Chat } from '../Screens/Chat';
+import { Platform } from 'react-native';
 
 const renderScene = SceneMap({
   article: Article,
@@ -12,6 +13,8 @@ const renderScene = SceneMap({
   chat: Chat,
 });
 
+const isAndroid = Platform.OS === 'android';
+
 export default function TintColorsExample() {
   const [index, setIndex] = useState(0);
   const [routes] = useState([
@@ -31,9 +34,11 @@ export default function TintColorsExample() {
     },
     {
       key: 'contacts',
-      focusedIcon: require('../../assets/icons/person_dark.png'),
+      focusedIcon: isAndroid
+        ? require('../../assets/icons/person_dark.png')
+        : { sfSymbol: 'person.fill' },
       title: 'Contacts',
-      activeTintColor: 'yellow',
+      activeTintColor: 'blue',
     },
     {
       key: 'chat',
@@ -52,6 +57,7 @@ export default function TintColorsExample() {
       renderScene={renderScene}
       tabBarActiveTintColor="red"
       tabBarInactiveTintColor="orange"
+      experimental_bakedTintColors={false}
       scrollEdgeAppearance="default"
     />
   );

diff --git a/docs/docs/docs/guides/standalone-usage.md b/docs/docs/docs/guides/standalone-usage.md
@@ -174,12 +174,28 @@ Color for the active tab.
 
 - Type: `ColorValue`
 
+:::warning
+On iOS 26 (Liquid Glass), enable `experimental_bakedTintColors` to apply a workaround that bakes tab labels into images for correct tinting. This disables Dynamic Type (accessibility font sizes) and the Bold Text accessibility setting for tab labels.
+:::
+
 #### `tabBarInactiveTintColor`
 
 Color for inactive tabs.
 
 - Type: `ColorValue`
 
+:::warning
+On iOS 26 (Liquid Glass), enable `experimental_bakedTintColors` to apply a workaround that bakes tab labels into images for correct tinting. This disables Dynamic Type (accessibility font sizes) and the Bold Text accessibility setting for tab labels.
+:::
+
+#### `experimental_bakedTintColors` <Badge text="iOS" type="info" /> <Badge text="experimental" type="danger"/>
+
+Enables the iOS 26 Liquid Glass workaround for active and inactive tint colors. When enabled with custom active or inactive tint colors, tab labels are baked into images so the icon and label receive the same tint during normal selection and Liquid Glass tab scrubbing.
+
+:::warning
+This disables Dynamic Type (accessibility font sizes) and the Bold Text accessibility setting for tab labels, and icon sizing can vary with label width.
+:::
+
 #### `tabBarStyle`
 
 Object containing styles for the tab bar.

diff --git a/docs/docs/docs/guides/usage-with-react-navigation.mdx b/docs/docs/docs/guides/usage-with-react-navigation.mdx
@@ -124,10 +124,26 @@ It's recommended to use `transparent` or `opaque` without lazy loading as the ta
 
 Color for the active tab.
 
+:::warning
+On iOS 26 (Liquid Glass), enable `experimental_bakedTintColors` to apply a workaround that bakes tab labels into images for correct tinting. This disables Dynamic Type (accessibility font sizes) and the Bold Text accessibility setting for tab labels.
+:::
+
 #### `tabBarInactiveTintColor`
 
 Color for the inactive tabs.
 
+:::warning
+On iOS 26 (Liquid Glass), enable `experimental_bakedTintColors` to apply a workaround that bakes tab labels into images for correct tinting. This disables Dynamic Type (accessibility font sizes) and the Bold Text accessibility setting for tab labels.
+:::
+
+#### `experimental_bakedTintColors` <Badge text="iOS" type="info" /> <Badge text="experimental" type="danger"/>
+
+Enables the iOS 26 Liquid Glass workaround for active and inactive tint colors. When enabled with custom active or inactive tint colors, tab labels are baked into images so the icon and label receive the same tint during normal selection and Liquid Glass tab scrubbing.
+
+:::warning
+This disables Dynamic Type (accessibility font sizes) and the Bold Text accessibility setting for tab labels, and icon sizing can vary with label width.
+:::
+
 #### `tabBarStyle`
 
 Object containing styles for the tab bar.
@@ -240,6 +256,10 @@ Label text of the tab displayed in the navigation bar. When undefined, scene tit
 
 Color for the active tab.
 
+:::warning
+On iOS 26 (Liquid Glass), enable `experimental_bakedTintColors` to apply a workaround that bakes tab labels into images for correct tinting. This disables Dynamic Type (accessibility font sizes) and the Bold Text accessibility setting for tab labels.
+:::
+
 :::note
 The `tabBarInactiveTintColor` is not supported on route level due to native limitations. Use `inactiveTintColor` in the `Tab.Navigator` instead.
 :::

diff --git a/packages/react-native-bottom-tabs/android/src/main/java/com/rcttabview/RCTTabViewManager.kt b/packages/react-native-bottom-tabs/android/src/main/java/com/rcttabview/RCTTabViewManager.kt
@@ -151,6 +151,9 @@ class RCTTabViewManager(context: ReactApplicationContext) :
       view.setInactiveTintColor(value)
   }
 
+  override fun setExperimentalBakedTintColors(view: ReactBottomNavigationView?, value: Boolean) {
+  }
+
   override fun setActiveIndicatorColor(view: ReactBottomNavigationView?, value: Int?) {
     if (view != null && value != null) {
       val color = ColorStateList.valueOf(value)

diff --git a/packages/react-native-bottom-tabs/ios/RCTTabViewComponentView.mm b/packages/react-native-bottom-tabs/ios/RCTTabViewComponentView.mm
@@ -156,6 +156,10 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &
     _tabViewProvider.inactiveTintColor = RCTUIColorFromSharedColor(newViewProps.inactiveTintColor);
   }
 
+  if (oldViewProps.experimentalBakedTintColors != newViewProps.experimentalBakedTintColors) {
+    _tabViewProvider.experimentalBakedTintColors = newViewProps.experimentalBakedTintColors;
+  }
+
   if (oldViewProps.hapticFeedbackEnabled != newViewProps.hapticFeedbackEnabled) {
     _tabViewProvider.hapticFeedbackEnabled = newViewProps.hapticFeedbackEnabled;
   }
@@ -262,4 +266,3 @@ - (void)onLayoutWithSize:(CGSize)size reactTag:(NSNumber *)reactTag {
 
 #endif // RCT_NEW_ARCH_ENABLED
 
-