refactor: replace string with ColorValue for ThemeColors

example/src/DrawerItems.tsx

@@ -1,5 +1,11 @@
 import * as React from 'react';
-import { I18nManager, StyleSheet, View, Platform } from 'react-native';
+import {
+  ColorValue,
+  I18nManager,
+  Platform,
+  StyleSheet,
+  View,
+} from 'react-native';
 
 import { DrawerContentScrollView } from '@react-navigation/drawer';
 import Constants, { ExecutionEnvironment } from 'expo-constants';
@@ -31,7 +37,7 @@ const DrawerItemsData = [
     label: 'Starred',
     icon: 'star',
     key: 1,
-    right: ({ color }: { color: string }) => (
+    right: ({ color }: { color: ColorValue }) => (
       <Badge
         visible
         size={8}

example/src/Examples/BottomNavigationBarExample.tsx

@@ -53,7 +53,7 @@ export default function BottomNavigationBarExample() {
           renderIcon={({ route, focused, color }) =>
             descriptors[route.key].options.tabBarIcon?.({
               focused,
-              color,
+              color: typeof color === 'string' ? color : '',
               size: 24,
             }) || null
           }

src/components/ActivityIndicator.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {
   Animated,
+  ColorValue,
   Easing,
   Platform,
   StyleProp,
@@ -20,7 +21,7 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
   /**
    * The color of the spinner.
    */
-  color?: string;
+  color?: ColorValue;
   /**
    * Size of the indicator.
    */

src/components/Appbar/AppbarAction.tsx

@@ -1,5 +1,11 @@
 import * as React from 'react';
-import type { Animated, StyleProp, View, ViewStyle } from 'react-native';
+import type {
+  Animated,
+  ColorValue,
+  StyleProp,
+  View,
+  ViewStyle,
+} from 'react-native';
 
 import { useInternalTheme } from '../../core/theming';
 import type { Theme, ThemeProp } from '../../types';
@@ -11,7 +17,7 @@ export type Props = React.ComponentPropsWithoutRef<typeof IconButton> & {
   /**
    *  Custom color for action icon.
    */
-  color?: string;
+  color?: ColorValue;
   /**
    * Name of the icon to show.
    */

src/components/Appbar/AppbarBackAction.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import type {
   Animated,
+  ColorValue,
   GestureResponderEvent,
   StyleProp,
   View,
@@ -19,7 +20,7 @@ export type Props = $Omit<
   /**
    *  Custom color for back icon.
    */
-  color?: string;
+  color?: ColorValue;
   /**
    * Optional icon size.
    */

src/components/Appbar/AppbarBackIcon.tsx

@@ -1,10 +1,16 @@
 import * as React from 'react';
-import { Image, Platform, StyleSheet, View } from 'react-native';
+import { ColorValue, Image, Platform, StyleSheet, View } from 'react-native';
 
 import { useLocale } from '../../core/locale';
 import MaterialCommunityIcon from '../MaterialCommunityIcon';
 
-const AppbarBackIcon = ({ size, color }: { size: number; color: string }) => {
+const AppbarBackIcon = ({
+  size,
+  color,
+}: {
+  size: number;
+  color: ColorValue;
+}) => {
   const { direction } = useLocale();
   const isRTL = direction === 'rtl';
   const iosIconSize = size - 3;

src/components/BottomNavigation/BottomNavigation.tsx

@@ -155,15 +155,15 @@ export type Props<Route extends BaseRoute> = {
   renderIcon?: (props: {
     route: Route;
     focused: boolean;
-    color: string;
+    color: ColorValue;
   }) => React.ReactNode;
   /**
    * Callback which React Element to be used as tab label.
    */
   renderLabel?: (props: {
     route: Route;
     focused: boolean;
-    color: string;
+    color: ColorValue;
   }) => React.ReactNode;
   /**
    * Callback which returns a React element to be used as the touchable for the tab item.

src/components/BottomNavigation/BottomNavigationBar.tsx

@@ -122,15 +122,15 @@ export type Props<Route extends BaseRoute> = {
   renderIcon?: (props: {
     route: Route;
     focused: boolean;
-    color: string;
+    color: ColorValue;
   }) => React.ReactNode;
   /**
    * Callback which React Element to be used as tab label.
    */
   renderLabel?: (props: {
     route: Route;
     focused: boolean;
-    color: string;
+    color: ColorValue;
   }) => React.ReactNode;
   /**
    * Callback which returns a React element to be used as the touchable for the tab item.

src/components/BottomNavigation/utils.ts

@@ -1,13 +1,15 @@
+import type { ColorValue } from 'react-native';
+
 import type { InternalTheme, Theme } from '../../types';
 
 export const getActiveTintColor = ({
   activeColor,
   theme,
 }: {
-  activeColor: string | undefined;
+  activeColor: ColorValue | undefined;
   theme: InternalTheme;
 }) => {
-  if (typeof activeColor === 'string') {
+  if (activeColor != null) {
     return activeColor;
   }
 
@@ -18,10 +20,10 @@ export const getInactiveTintColor = ({
   inactiveColor,
   theme,
 }: {
-  inactiveColor: string | undefined;
+  inactiveColor: ColorValue | undefined;
   theme: InternalTheme;
 }) => {
-  if (typeof inactiveColor === 'string') {
+  if (inactiveColor != null) {
     return inactiveColor;
   }
 
@@ -34,7 +36,7 @@ export const getLabelColor = ({
   focused,
   theme,
 }: {
-  tintColor: string;
+  tintColor: ColorValue;
   hasColor: boolean;
   focused: boolean;
   theme: InternalTheme;

src/components/Button/Button.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import {
   AccessibilityRole,
   Animated,
+  ColorValue,
   GestureResponderEvent,
   Platform,
   PressableAndroidRippleConfig,
@@ -54,15 +55,15 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
    * @deprecated Deprecated in v5.x - use `buttonColor` or `textColor` instead.
    * Custom text color for flat button, or background color for contained button.
    */
-  color?: string;
+  color?: ColorValue;
   /**
    * Custom button's background color.
    */
-  buttonColor?: string;
+  buttonColor?: ColorValue;
   /**
    * Custom button's text color.
    */
-  textColor?: string;
+  textColor?: ColorValue;
   /**
    * Whether to show a loading indicator.
    */

src/components/Button/utils.tsx

@@ -1,4 +1,4 @@
-import type { ViewStyle } from 'react-native';
+import type { ColorValue, ViewStyle } from 'react-native';
 
 import { black, white } from '../../theme/colors';
 import { tokens } from '../../theme/tokens';
@@ -25,7 +25,7 @@ const isDark = ({
   backgroundColor,
 }: {
   dark?: boolean;
-  backgroundColor?: string;
+  backgroundColor?: ColorValue;
 }) => {
   if (typeof dark === 'boolean') {
     return dark;
@@ -44,7 +44,7 @@ const getButtonBackgroundColor = ({
   disabled,
   customButtonColor,
 }: BaseProps & {
-  customButtonColor?: string;
+  customButtonColor?: ColorValue;
 }) => {
   const { colors } = theme as Theme;
   if (customButtonColor && !disabled) {
@@ -81,8 +81,8 @@ const getButtonTextColor = ({
   backgroundColor,
   dark,
 }: BaseProps & {
-  customTextColor?: string;
-  backgroundColor: string;
+  customTextColor?: ColorValue;
+  backgroundColor: ColorValue;
   dark?: boolean;
 }) => {
   const { colors } = theme as Theme;
@@ -145,8 +145,8 @@ export const getButtonColors = ({
 }: {
   theme: InternalTheme;
   mode: ButtonMode;
-  customButtonColor?: string;
-  customTextColor?: string;
+  customButtonColor?: ColorValue;
+  customTextColor?: ColorValue;
   disabled?: boolean;
   dark?: boolean;
 }) => {

src/components/Checkbox/CheckboxAndroid.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {
   Animated,
+  ColorValue,
   GestureResponderEvent,
   StyleSheet,
   View,
@@ -28,11 +29,11 @@ export type Props = $RemoveChildren<typeof TouchableRipple> & {
   /**
    * Custom color for unchecked checkbox.
    */
-  uncheckedColor?: string;
+  uncheckedColor?: ColorValue;
   /**
    * Custom color for checkbox.
    */
-  color?: string;
+  color?: ColorValue;
   /**
    * @optional
    */

src/components/Checkbox/CheckboxIOS.tsx

@@ -1,5 +1,10 @@
 import * as React from 'react';
-import { GestureResponderEvent, StyleSheet, View } from 'react-native';
+import {
+  ColorValue,
+  GestureResponderEvent,
+  StyleSheet,
+  View,
+} from 'react-native';
 
 import { getSelectionControlIOSColor } from './utils';
 import { useInternalTheme } from '../../core/theming';
@@ -23,7 +28,7 @@ export type Props = $RemoveChildren<typeof TouchableRipple> & {
   /**
    * Custom color for checkbox.
    */
-  color?: string;
+  color?: ColorValue;
   /**
    * @optional
    */

src/components/Checkbox/utils.ts

@@ -1,3 +1,5 @@
+import type { ColorValue } from 'react-native';
+
 import { tokens } from '../../theme/tokens';
 import type { InternalTheme } from '../../types';
 
@@ -8,7 +10,7 @@ const getAndroidCheckedColor = ({
   customColor,
 }: {
   theme: InternalTheme;
-  customColor?: string;
+  customColor?: ColorValue;
 }) => {
   if (customColor) {
     return customColor;
@@ -22,7 +24,7 @@ const getAndroidUncheckedColor = ({
   customUncheckedColor,
 }: {
   theme: InternalTheme;
-  customUncheckedColor?: string;
+  customUncheckedColor?: ColorValue;
 }) => {
   if (customUncheckedColor) {
     return customUncheckedColor;
@@ -40,8 +42,8 @@ const getAndroidControlColor = ({
 }: {
   theme: InternalTheme;
   checked: boolean;
-  checkedColor: string;
-  uncheckedColor: string;
+  checkedColor: ColorValue;
+  uncheckedColor: ColorValue;
   disabled?: boolean;
 }) => {
   if (disabled) {
@@ -64,8 +66,8 @@ export const getAndroidSelectionControlColor = ({
   theme: InternalTheme;
   checked: boolean;
   disabled?: boolean;
-  customColor?: string;
-  customUncheckedColor?: string;
+  customColor?: ColorValue;
+  customUncheckedColor?: ColorValue;
 }) => {
   const checkedColor = getAndroidCheckedColor({ theme, customColor });
   const uncheckedColor = getAndroidUncheckedColor({
@@ -94,7 +96,7 @@ const getIOSCheckedColor = ({
   customColor,
 }: {
   theme: InternalTheme;
-  customColor?: string;
+  customColor?: ColorValue;
   disabled?: boolean;
 }) => {
   if (disabled) {
@@ -115,7 +117,7 @@ export const getSelectionControlIOSColor = ({
 }: {
   theme: InternalTheme;
   disabled?: boolean;
-  customColor?: string;
+  customColor?: ColorValue;
 }) => {
   const checkedColor = getIOSCheckedColor({ theme, disabled, customColor });
   const checkedColorOpacity = disabled

src/components/Chip/Chip.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import {
   AccessibilityState,
   Animated,
+  ColorValue,
   GestureResponderEvent,
   Platform,
   PressableAndroidRippleConfig,
@@ -61,7 +62,7 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
    * Note: With theme version 3 `selectedColor` doesn't apply to the `icon`.
    *       If you want specify custom color for the `icon`, render your own `Icon` component.
    */
-  selectedColor?: string;
+  selectedColor?: ColorValue;
   /**
    * @supported Available in v5.x with theme version 3
    * Whether to display overlay on selected chip