diff --git a/generatedTypes/src/components/skeletonView/index.d.ts b/generatedTypes/src/components/skeletonView/index.d.ts index 06e49c1e0e..4fc9b8726c 100644 --- a/generatedTypes/src/components/skeletonView/index.d.ts +++ b/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 */ diff --git a/src/components/skeletonView/index.tsx b/src/components/skeletonView/index.tsx index 9890abc125..1bb071d72f 100644 --- a/src/components/skeletonView/index.tsx +++ b/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 { getDefaultSkeletonProps = (input?: {circleOverride: boolean; style: StyleProp}) => { 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 { } 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 { showLastSeparator, height, width, + colors, borderRadius, circle, style, @@ -445,6 +451,7 @@ class SkeletonView extends Component { showLastSeparator, height, width, + colors, borderRadius, circle, style, diff --git a/src/components/skeletonView/skeletonView.api.json b/src/components/skeletonView/skeletonView.api.json index 482e8d1e0e..199a1f1783 100644 --- a/src/components/skeletonView/skeletonView.api.json +++ b/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",