refactor: replace string with ColorValue for ThemeColors

Author: adrcotfas

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 type { ThemeProp } from 'src/types';
 
@@ -13,7 +19,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.
    */