[iOS 26] Active tint color not adapting when scrolling over light/dark content even though it is set to a DynamicColorIOS

[MrFunctor]

Before submitting a new issue

• I tested using the latest version of the library, as the bug might be already fixed.
• I tested using a supported version of react native.
• I checked for possible duplicate issues, with possible answers.

Bug summary

On iOS 26, the liquid glass tab bar automatically changes colors of the icons/labels based on the content underneath. However, for this to work, we need to specify a dynamic color (DynamicColorIOS) with a light and dark variant (since there's no callback that is called when the colors need to change). When using react-native-bottom-tabs, dynamic colors work for the inactive tint color, but not for the active tint color, which behaves like a static color - it does not change color based on the content.

Here's the video illustrating this (notice how the inactive tint color changes based on content while the active tint color remains unchanged):

Active.tint.color.not.adapting.when.scrolling.over.light.dark.content.mov

Library version

0.11.2

Environment info

expo-env-info 2.0.7 environment info:
    System:
      OS: macOS 15.7
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 22.17.1 - ~/.nvm/versions/node/v22.17.1/bin/node
      Yarn: 4.9.3 - ~/.nvm/versions/node/v22.17.1/bin/yarn
      npm: 10.9.2 - ~/.nvm/versions/node/v22.17.1/bin/npm
      Watchman: 2024.10.14.00 - /opt/homebrew/bin/watchman
    Managers:
      CocoaPods: 1.16.2 - /opt/homebrew/bin/pod
    SDKs:
      iOS SDK:
        Platforms: DriverKit 25.0, iOS 26.0, macOS 26.0, tvOS 26.0, visionOS 26.0, watchOS 26.0
    IDEs:
      Android Studio: 2025.1 AI-251.26094.121.2512.13840223
      Xcode: 26.0/17A324 - /usr/bin/xcodebuild
    npmPackages:
      expo: ~54.0.7 => 54.0.7
      expo-router: ~6.0.4 => 6.0.4
      react: 19.1.0 => 19.1.0
      react-dom: 19.1.0 => 19.1.0
      react-native: 0.81.4 => 0.81.4
      react-native-web: ~0.21.0 => 0.21.1
    Expo Workflow: managed

Steps to reproduce

1. Clone the repo.
2. Run yarn to install dependencies.
3. Run prebuild for iOS: yarn expo prebuild --platform ios.
4. Build and run the iOS app: yarn ios.

Reproducible sample code

const tabBarActiveTintColor = DynamicColorIOS({
  light: "blue",
  dark: "lightblue",
});

const tabBarInactiveTintColor = DynamicColorIOS({
  light: "black",
  dark: "white",
});

export default function RootLayout() {
  const colorScheme = useColorScheme();

  return (
    <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
      <Tabs
        tabBarActiveTintColor={tabBarActiveTintColor}
        tabBarInactiveTintColor={tabBarInactiveTintColor}
      >
        <Tabs.Screen
          name="index"
          options={{
            title: "Home",
            tabBarIcon: () => ({ sfSymbol: "house.fill" }),
          }}
        />
        <Tabs.Screen
          name="explore"
          options={{
            title: "Explore",
            tabBarIcon: () => ({ sfSymbol: "person.fill" }),
          }}
        />
      </Tabs>

      <StatusBar style="auto" />
    </ThemeProvider>
  );
}

[johankasperi]

According to my testing this is a bug with SwiftUI and not with this lib. I was able to reproduce this bug with a plain SwiftUI app.

[eirikluka]

Still looking for a solution for this. Did you find a workaround @MrFunctor?

[MrFunctor]

Hey @eirikluka, since I am using Expo Router, I switched to Expo Router's experimental NativeTabs, which doesn't have this problem.