theme not accepting DynamicColorIOS when used with @react-navigation/​bottom-tabs

[zhumingcheng697]

Current behavior

I want to customize the theme of the React Navigation NavigationContainer with DynamicColorIOS like follows:

const theme = {
  colors: {
    card: DynamicColorIOS({
      light: '#f2f2f7',
      dark: "#000000",
    }),
  },
};

const Tab = createBottomTabNavigator();

function App() {
  return (
    <NavigationContainer theme={theme}>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

But I got the error:

Unable to parse color from object: {"dynamic":{"light":"#f2f2f7","dark":"#000000"}}

The error originated from @react-navigation/bottom-tabs/src/views/BottomTabItem.tsx line 196, when making a call to the Color constructor of the "color" library, which does not support DynamicColorIOS:

    const inactiveTintColor =
      customInactiveTintColor === undefined
-       ? Color(colors.text).mix(Color(colors.card), 0.5).hex()
        : customInactiveTintColor;

This is the only issue I am encountering but in principle every call to the Color methods would be an issue when used with a DynamicColorIOS.

Theoretically an abstraction can be built around Color by accessing the inner workings of DynamicColorIOS (i.e. {dynamic: {light: string, dark: string}}), although I don’t know if it is an elegant solution and if the definition of DynamicColorIOS might change in the future, breaking this abstraction.

Expected behavior

DynamicColorIOS colors should be allowed to be used for theme customization for NavigationContainer.

Reproduction

https://snack.expo.dev/@zhumingcheng697/theme-not-accepting-dynamiccolorios-when-used-with-bottom-tabs

Platform

• Android
• iOS
• Web
• Windows
• MacOS

Packages

• @react-navigation/​bottom-tabs
• @react-navigation/​drawer
• @react-navigation/​material-bottom-tabs
• @react-navigation/​material-top-tabs
• @react-navigation/​stack
• @react-navigation/​native-stack

Environment

• I've removed the packages that I don't use

package	version
@react-navigation/native	6.0.13
@react-navigation/bottom-tabs	6.4.0
react-native-safe-area-context	4.3.1
react-native-screens	~3.15.0
react-native	0.69.6
expo	~46.0.13
node	16.14.2
npm	8.5.0

[TheSavior]

This issue caught my eye and I did a little digging. If DynamicColorIOS should be able to be passed through to a native component in any place a color string is valid. So that tells me that it's being used in some way that it isn't being passed through.

I searched react-navigation's node_modules for that error and saw that it is coming from the color npm package. Aha! Seems like something is parsing the colors.

And indeed, the BottomTabItem uses the color package to do some interpolation.

react-navigation/packages/bottom-tabs/src/views/BottomTabItem.tsx

Lines 194 to 197 in b91c9b0

	const inactiveTintColor =
	customInactiveTintColor === undefined
	? Color(colors.text).mix(Color(colors.card), 0.5).hex()
	: customInactiveTintColor;

So as a workaround, it appears you could explicitly set "customInactiveTintColor" to work around this line.

A more proper fix would probably be for the code to avoid doing interpolation on values it can't process.