Feat/ support passing colors to skeletonView (#1905)

* support passing colors to skeletonView

* fix description

* add prop to api file

* update description

* description fix

Author: lidord-wix

generatedTypes/src/components/skeletonView/index.d.ts

@@ -112,6 +112,11 @@ export interface SkeletonViewProps extends AccessibilityProps, MarginModifiers {
      * The width of the skeleton view
      */
     width?: number;
+    /**
+     * The colors of the skeleton view, the array length has to be >=2
+     * default: [Colors.grey70, Colors.grey60, Colors.grey70]
+     */
+    colors?: string[];
     /**
      * The border radius of the skeleton view
      */

src/components/skeletonView/index.tsx

@@ -128,6 +128,11 @@ export interface SkeletonViewProps extends AccessibilityProps, MarginModifiers {
    * The width of the skeleton view
    */
   width?: number;
+  /**
+   * The colors of the skeleton view, the array length has to be >=2
+   * default: [Colors.grey70, Colors.grey60, Colors.grey70]
+   */
+  colors?: string[]
   /**
    * The border radius of the skeleton view
    */
@@ -229,7 +234,7 @@ class SkeletonView extends Component<InternalSkeletonViewProps, SkeletonState> {
 
   getDefaultSkeletonProps = (input?: {circleOverride: boolean; style: StyleProp<ViewStyle>}) => {
     const {circleOverride, style} = input || {};
-    const {circle, width = 0, height = 0} = this.props;
+    const {circle, colors, width = 0, height = 0} = this.props;
     let {borderRadius} = this.props;
     let size;
     if (circle || circleOverride) {
@@ -238,7 +243,7 @@ class SkeletonView extends Component<InternalSkeletonViewProps, SkeletonState> {
     }
 
     return {
-      shimmerColors: [Colors.grey70, Colors.grey60, Colors.grey70],
+      shimmerColors: colors || [Colors.grey70, Colors.grey60, Colors.grey70],
       isReversed: Constants.isRTL,
       style: [{borderRadius}, style],
       width: size || width,
@@ -425,6 +430,7 @@ class SkeletonView extends Component<InternalSkeletonViewProps, SkeletonState> {
       showLastSeparator,
       height,
       width,
+      colors,
       borderRadius,
       circle,
       style,
@@ -445,6 +451,7 @@ class SkeletonView extends Component<InternalSkeletonViewProps, SkeletonState> {
       showLastSeparator,
       height,
       width,
+      colors,
       borderRadius,
       circle,
       style,

src/components/skeletonView/skeletonView.api.json

@@ -37,6 +37,12 @@
     {"name": "timesKey", "type": "string", "description": "A key prefix for the duplicated SkeletonViews"},
     {"name": "height", "type": "number", "description": "The height of the skeleton view"},
     {"name": "width", "type": "number", "description": "The width of the skeleton view"},
+    {
+      "name": "colors",
+      "type": "string[]",
+      "description": "The colors of the skeleton view, the array length has to be >=2",
+      "default": "[Colors.grey70, Colors.grey60, Colors.grey70]"
+    },
     {"name": "borderRadius", "type": "number", "description": "The border radius of the skeleton view"},
     {
       "name": "circle",