feat(iOS): experimental baked tint colors (#522)

* fix(iOS): icons not following inactiveTintColor

* fix(iOS): labels not following inactiveTintColor on ios 26.4.1

* fix(iOS): hover through tabs show correct active color

* chore: simplify solution

* fix(iOS): fix glitch when switching tabs first time

* fix(iOS): fix tint colors on SFSymbols

* chore: add changeset

* chore: cleanup

* chore: only enable bake pass if providing props

* chore: add experimental prop to enable baking tint color

* chore: fix variable value after merge

* chore: cleanup

Author: thiagobrez

.changeset/tidy-eels-wish.md

@@ -0,0 +1,5 @@
+---
+'react-native-bottom-tabs': minor
+---
+
+Add `experimental_bakedTintColors` prop to opt into the iOS 26 Liquid Glass active and inactive tint color workaround.

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 { Button, Platform, StyleSheet, View } from 'react-native';
 
 const renderScene = SceneMap({
   article: Article,
@@ -12,8 +13,11 @@ const renderScene = SceneMap({
   chat: Chat,
 });
 
+const isAndroid = Platform.OS === 'android';
+
 export default function TintColorsExample() {
   const [index, setIndex] = useState(0);
+  const [bakedTintColors, setBakedTintColors] = useState(false);
   const [routes] = useState([
     {
       key: 'article',
@@ -31,9 +35,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',
@@ -45,14 +51,32 @@ export default function TintColorsExample() {
   ]);
 
   return (
-    <TabView
-      sidebarAdaptable
-      navigationState={{ index, routes }}
-      onIndexChange={setIndex}
-      renderScene={renderScene}
-      tabBarActiveTintColor="red"
-      tabBarInactiveTintColor="orange"
-      scrollEdgeAppearance="default"
-    />
+    <View style={styles.container}>
+      <View style={styles.controls}>
+        <Button
+          title={`${bakedTintColors ? 'Disable' : 'Enable'} Experimental Baked Tint Colors`}
+          onPress={() => setBakedTintColors((value) => !value)}
+        />
+      </View>
+      <TabView
+        sidebarAdaptable
+        navigationState={{ index, routes }}
+        onIndexChange={setIndex}
+        renderScene={renderScene}
+        tabBarActiveTintColor="red"
+        tabBarInactiveTintColor="orange"
+        experimental_bakedTintColors={bakedTintColors}
+        scrollEdgeAppearance="default"
+      />
+    </View>
   );
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  controls: {
+    padding: 12,
+  },
+});

docs/docs/docs/guides/standalone-usage.md

@@ -184,6 +184,20 @@ Color for inactive tabs.
 On iOS >= 26 (Liquid Glass), this prop is ignored.
 :::
 
+#### `experimental_bakedTintColors` <Badge text="iOS" type="info" /> <Badge text="experimental" type="danger"/>
+
+Enable an experimental mode which bakes (rasterizes) the label into the icon image, allowing for better control of the tint colors on iOS 26+.
+
+- Type: `boolean`
+
+:::warning
+This feature is experimental, and might be removed in the future.
+
+It has many drawbacks, such as SFSymbol icon sizes being different on label width, badges being positioned far away from the icon depending on the label width, and possibly breaking accessibility since the label will be baked inside the icon image.
+
+Use with caution, only if you prioritize tint color consistency between platforms.
+:::
+
 #### `tabBarStyle`
 
 Object containing styles for the tab bar.

docs/docs/docs/guides/usage-with-react-navigation.mdx

@@ -132,6 +132,20 @@ Color for the inactive tabs.
 On iOS >= 26 (Liquid Glass), this prop is ignored.
 :::
 
+#### `experimental_bakedTintColors` <Badge text="iOS" type="info" /> <Badge text="experimental" type="danger"/>
+
+Enable an experimental mode which bakes (rasterizes) the label into the icon image, allowing for better control of the tint colors on iOS 26+.
+
+- Type: `boolean`
+
+:::warning
+This feature is experimental, and might be removed in the future.
+
+It has many drawbacks, such as SFSymbol icon sizes being different on label width, badges being positioned far away from the icon depending on the label width, and possibly breaking accessibility since the label will be baked inside the icon image.
+
+Use with caution, only if you prioritize tint color consistency between platforms.
+:::
+
 #### `tabBarStyle`
 
 Object containing styles for the tab bar.

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)

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
 
-