refcator color props type to colorValue

src/components/actionBar/index.tsx

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
-import {StyleSheet, ViewStyle} from 'react-native';
+import {StyleSheet, ViewStyle, ColorValue} from 'react-native';
 import {Colors, Shadows} from '../../style';
 import {asBaseComponent} from '../../commons/new';
 import View from '../view';
@@ -14,7 +14,7 @@ export type ActionBarProps = {
   /**
    * action bar background color
    */
-  backgroundColor?: string;
+  backgroundColor?: ColorValue;
   /**
    * actions for the action bar
    */

src/components/avatar/index.tsx

@@ -8,7 +8,8 @@ import {
   ImagePropsBase,
   ImageStyle,
   TextStyle,
-  AccessibilityProps
+  AccessibilityProps,
+  ColorValue
 } from 'react-native';
 import {Colors, BorderRadiuses} from '../../style';
 import {extractAccessibilityProps} from '../../commons/modifiers';
@@ -55,7 +56,7 @@ export type AvatarProps = Pick<AccessibilityProps, 'accessibilityLabel'> &
     /**
      * Background color for Avatar
      */
-    backgroundColor?: string;
+    backgroundColor?: ColorValue;
     /**
      * Badge location on Avatar
      */

src/components/badge/index.tsx

@@ -8,7 +8,8 @@ import {
   TextStyle,
   TouchableOpacityProps,
   ViewStyle,
-  ViewProps
+  ViewProps,
+  ColorValue
 } from 'react-native';
 import {extractAccessibilityProps} from '../../commons/modifiers';
 import {asBaseComponent} from '../../commons/new';
@@ -18,10 +19,9 @@ import Image from '../image';
 import View from '../view';
 import Text from '../text';
 
-
 const LABEL_FORMATTER_VALUES = [1, 2, 3, 4] as const;
 
-type LabelFormatterValues = typeof LABEL_FORMATTER_VALUES[number];
+type LabelFormatterValues = (typeof LABEL_FORMATTER_VALUES)[number];
 
 export type BadgeProps = ViewProps &
   TouchableOpacityProps & {
@@ -33,7 +33,7 @@ export type BadgeProps = ViewProps &
     /**
      * Color of the badge background
      */
-    backgroundColor?: string;
+    backgroundColor?: ColorValue;
     /**
      * the badge size
      */
@@ -100,7 +100,7 @@ export type BadgeProps = ViewProps &
  */
 class Badge extends PureComponent<BadgeProps> {
   static displayName = 'Badge';
-  
+
   styles: ReturnType<typeof createStyles>;
 
   constructor(props: BadgeProps) {

src/components/button/types.ts

@@ -1,4 +1,4 @@
-import {ImageStyle, TextStyle, StyleProp} from 'react-native';
+import {ImageStyle, TextStyle, StyleProp, ColorValue} from 'react-native';
 import {
   BaseComponentInjectedProps,
   ForwardRefInjectedProps,
@@ -65,11 +65,11 @@ export type ButtonProps = TouchableOpacityProps &
     /**
      * Color of the button background
      */
-    backgroundColor?: string;
+    backgroundColor?: ColorValue;
     /**
      * Color of the disabled button background
      */
-    disabledBackgroundColor?: string;
+    disabledBackgroundColor?: ColorValue;
     /**
      * Size of the button [large, medium, small, xSmall]
      */
@@ -142,7 +142,7 @@ export type ButtonProps = TouchableOpacityProps &
      * callback for getting activeBackgroundColor (e.g. (calculatedBackgroundColor, prop) => {...})
      * better set using ThemeManager
      */
-    getActiveBackgroundColor?: (backgroundColor: string, props: any) => string;
+    getActiveBackgroundColor?: (backgroundColor: ColorValue, props: any) => ColorValue;
     /**
      * should animate layout change
      * Note?: For Android you must set 'setLayoutAnimationEnabledExperimental(true)' via RN's 'UIManager'

src/components/card/CardSection.tsx

@@ -1,13 +1,12 @@
 import _ from 'lodash';
 import React, {PureComponent} from 'react';
-import {StyleSheet, ViewStyle, ImageStyle, ImageSourcePropType, StyleProp} from 'react-native';
+import {StyleSheet, ViewStyle, ImageStyle, ImageSourcePropType, StyleProp, ColorValue} from 'react-native';
 import {asBaseComponent} from '../../commons/new';
 import View, {ViewProps} from '../view';
 import Text, {TextProps} from '../text';
 import Image, {ImageProps} from '../image';
 import asCardChild, {asCardChildProps} from './asCardChild';
 
-
 type ContentType = TextProps & {text?: string};
 
 export type CardSectionProps = ViewProps & {
@@ -23,7 +22,7 @@ export type CardSectionProps = ViewProps & {
   /**
    * Give the section a background color
    */
-  backgroundColor?: string;
+  backgroundColor?: ColorValue;
   /**
    * Image props for a leading icon to render before the text
    */

src/components/card/index.tsx

@@ -3,7 +3,14 @@ import React, {PureComponent} from 'react';
 import {StyleSheet, Animated, StyleProp, ViewStyle, type DimensionValue} from 'react-native';
 import {Colors, BorderRadiuses} from '../../style';
 // import {PureBaseComponent} from '../../commons';
-import {Constants, asBaseComponent, forwardRef, BaseComponentInjectedProps, ForwardRefInjectedProps, MarginModifiers} from '../../commons/new';
+import {
+  Constants,
+  asBaseComponent,
+  forwardRef,
+  BaseComponentInjectedProps,
+  ForwardRefInjectedProps,
+  MarginModifiers
+} from '../../commons/new';
 import View, {ViewProps} from '../view';
 import TouchableOpacity, {TouchableOpacityProps} from '../touchableOpacity';
 import Icon from '../icon';
@@ -38,7 +45,8 @@ export interface CardSelectionOptions {
 
 export {CardSectionProps};
 export type CardProps = ViewProps &
-  TouchableOpacityProps & MarginModifiers & {
+  TouchableOpacityProps &
+  MarginModifiers & {
     /**
      * card custom width
      */
@@ -188,7 +196,7 @@ class Card extends PureComponent<PropTypes, State> {
   get backgroundStyle() {
     const {enableBlur, backgroundColor = Colors.$backgroundElevated} = this.props;
 
-    if (Constants.isIOS && enableBlur) {
+    if (Constants.isIOS && enableBlur && typeof backgroundColor === 'string') {
       return {backgroundColor: Colors.rgba(backgroundColor, 0.85)};
     } else {
       return {backgroundColor};

src/components/chip/index.tsx

@@ -1,6 +1,15 @@
 import _ from 'lodash';
 import React, {useCallback} from 'react';
-import {StyleSheet, StyleProp, ViewStyle, ViewProps, ImageStyle, TextStyle, ImageSourcePropType} from 'react-native';
+import {
+  StyleSheet,
+  StyleProp,
+  ViewStyle,
+  ViewProps,
+  ImageStyle,
+  TextStyle,
+  ImageSourcePropType,
+  ColorValue
+} from 'react-native';
 import Assets from '../../assets';
 import {asBaseComponent} from '../../commons/new';
 import {BorderRadiuses, Spacings, Colors} from 'style';
@@ -25,7 +34,7 @@ export type ChipProps = ViewProps &
     /**
      * Chip's background color
      */
-    backgroundColor?: string;
+    backgroundColor?: ColorValue;
     /**
      * The Chip borderRadius
      */

src/components/colorPalette/index.tsx

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import memoize from 'memoize-one';
 import React, {PureComponent} from 'react';
-import {StyleSheet, StyleProp, ViewStyle} from 'react-native';
+import {StyleSheet, StyleProp, ViewStyle, ColorValue} from 'react-native';
 import {Colors} from '../../style';
 import {Constants} from '../../commons/new';
 import View from '../view';
@@ -56,7 +56,7 @@ interface Props {
   /**
    * The ColorPalette's background color
    */
-  backgroundColor?: string;
+  backgroundColor?: ColorValue;
 }
 export type ColorPaletteProps = Props;
 

src/components/colorPicker/index.tsx

@@ -1,5 +1,5 @@
 import React, {useCallback, useState} from 'react';
-import {StyleSheet} from 'react-native';
+import {StyleSheet, ColorValue} from 'react-native';
 import {asBaseComponent} from '../../commons/new';
 import Assets from '../../assets';
 import {Colors} from '../../style';
@@ -42,7 +42,7 @@ interface Props extends ColorPickerDialogProps, Pick<ColorPaletteProps, 'onValue
   /**
    * The ColorPicker's background color
    */
-  backgroundColor?: string;
+  backgroundColor?: ColorValue;
 }
 export type ColorPickerProps = Props;
 

src/components/dialog/OverlayFadingBackground.tsx

@@ -1,12 +1,12 @@
 import React, {useRef, useEffect, useCallback, useMemo} from 'react';
 import View from '../view';
-import {Animated} from 'react-native';
+import {Animated, ColorValue} from 'react-native';
 
 interface Props {
   testID?: string;
   dialogVisibility?: boolean;
   modalVisibility?: boolean;
-  overlayBackgroundColor?: string;
+  overlayBackgroundColor?: ColorValue;
   onFadeDone?: () => void;
   fadeOut?: boolean;
 }
@@ -34,7 +34,8 @@ const OverlayFadingBackground = ({
       duration: 400,
       useNativeDriver: true
     }).start(onFadeDone);
-  }, [fadeAnimation, onFadeDone]);
+  },
+  [fadeAnimation, onFadeDone]);
 
   useEffect(() => {
     if (!isAnimating.current && (!dialogVisibility || fadeOut)) {

src/components/dialog/index.tsx

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
-import {StyleSheet, StyleProp, ViewStyle, ModalPropsIOS, AccessibilityProps, type DimensionValue} from 'react-native';
+import {StyleSheet, StyleProp, ViewStyle, ModalPropsIOS, AccessibilityProps, ColorValue, type DimensionValue} from 'react-native';
 import {Colors} from '../../style';
 import {AlignmentModifiers, extractAlignmentsValues} from '../../commons/modifiers';
 import {Constants, asBaseComponent} from '../../commons/new';
@@ -38,7 +38,7 @@ export interface DialogProps extends AlignmentModifiers, RNPartialProps {
   /**
    * The color of the overlay background
    */
-  overlayBackgroundColor?: string;
+  overlayBackgroundColor?: ColorValue;
   /**
    * The dialog width (default: 90%)
    */

src/components/icon/index.tsx

@@ -1,6 +1,6 @@
 import isUndefined from 'lodash/isUndefined';
 import React, {useMemo, forwardRef} from 'react';
-import {Image, ImageProps as RNImageProps, StyleSheet, StyleProp, ViewStyle} from 'react-native';
+import {Image, ImageProps as RNImageProps, StyleSheet, StyleProp, ViewStyle, ColorValue} from 'react-native';
 import {asBaseComponent, BaseComponentInjectedProps, MarginModifiers, Constants} from '../../commons/new';
 import {ComponentStatics} from '../../typings/common';
 import {getAsset, isSvg, isBase64ImageContent} from '../../utils/imageUtils';
@@ -27,7 +27,7 @@ export type IconProps = Omit<RNImageProps, 'source' | 'tintColor'> &
     /**
      * the icon tint
      */
-    tintColor?: string | null;
+    tintColor?: ColorValue | null;
     /**
      * the icon size
      */

src/components/image/index.tsx

@@ -8,7 +8,8 @@ import {
   ImageBackground,
   ImageBackgroundProps,
   NativeSyntheticEvent,
-  ImageErrorEventData
+  ImageErrorEventData,
+  ColorValue
 } from 'react-native';
 import {
   Constants,
@@ -46,7 +47,7 @@ export type ImageProps = Omit<RNImageProps, 'source'> &
     /**
      * the asset tint
      */
-    tintColor?: string;
+    tintColor?: ColorValue;
     /**
      * whether the image should flip horizontally on RTL locals
      */
@@ -71,7 +72,7 @@ export type ImageProps = Omit<RNImageProps, 'source'> &
     /**
      * Pass a custom color for the overlay
      */
-    overlayColor?: string;
+    overlayColor?: ColorValue;
     /**
      * Render an overlay with custom content
      */

src/components/loaderScreen/types.ts

@@ -1,32 +1,32 @@
-import {ActivityIndicatorProps, TextStyle, ViewStyle} from 'react-native';
+import {ActivityIndicatorProps, TextStyle, ViewStyle, ColorValue} from 'react-native';
 
 export type LoaderScreenProps = ActivityIndicatorProps & {
-    /**
-     * Color of the loading indicator
-     */
-    loaderColor?: string;
-    /**
-     * Custom loader
-     */
-    customLoader?: React.ReactChild;
-    /**
-     * Color of the loader background (only when passing 'overlay')
-     */
-    backgroundColor?: string;
-    /**
-     * loader message
-     */
-    message?: string;
-    /**
-     * message style
-     */
-    messageStyle?: TextStyle,
-    /**
-     * Show the screen as an absolute overlay
-     */
-    overlay?: boolean;
-     /**
-     * Custom container style
-     */
-    containerStyle?: ViewStyle;
+  /**
+   * Color of the loading indicator
+   */
+  loaderColor?: string;
+  /**
+   * Custom loader
+   */
+  customLoader?: React.ReactChild;
+  /**
+   * Color of the loader background (only when passing 'overlay')
+   */
+  backgroundColor?: ColorValue;
+  /**
+   * loader message
+   */
+  message?: string;
+  /**
+   * message style
+   */
+  messageStyle?: TextStyle;
+  /**
+   * Show the screen as an absolute overlay
+   */
+  overlay?: boolean;
+  /**
+   * Custom container style
+   */
+  containerStyle?: ViewStyle;
 };