From 1dd40410093433e177db1c4b11ff49adfae8444b Mon Sep 17 00:00:00 2001 From: Jaakko Ojalehto Date: Tue, 2 Mar 2021 09:24:43 +0200 Subject: [PATCH 1/3] Add testID for easier testing --- index.d.ts | 1 + lib/ShimmerPlaceholder.js | 2 ++ 2 files changed, 3 insertions(+) diff --git a/index.d.ts b/index.d.ts index 4f65de3..1030a22 100644 --- a/index.d.ts +++ b/index.d.ts @@ -19,6 +19,7 @@ declare module 'react-native-shimmer-placeholder' { contentStyle?: any; isInteraction?: boolean; LinearGradient?: React.ComponentClass; + testID?: string; } class ShimmerPlaceholder extends React.Component { diff --git a/lib/ShimmerPlaceholder.js b/lib/ShimmerPlaceholder.js index 2d27772..68d94de 100644 --- a/lib/ShimmerPlaceholder.js +++ b/lib/ShimmerPlaceholder.js @@ -54,6 +54,7 @@ const BasedShimmerPlaceholder = (props) => { animatedValue, beginShimmerPosition, shimmerWidthPercent = 1, + testID } = props const linearTranslate = beginShimmerPosition.interpolate({ @@ -82,6 +83,7 @@ const BasedShimmerPlaceholder = (props) => { return ( {/* Force render children to restrict rendering twice */} {children} From a4afdefb9a2a5763cc5dc7aec5fd82426361753a Mon Sep 17 00:00:00 2001 From: Jaakko Ojalehto Date: Tue, 2 Mar 2021 11:29:35 +0200 Subject: [PATCH 2/3] Pass restProps to view --- index.d.ts | 5 ++--- lib/ShimmerPlaceholder.js | 4 ++-- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/index.d.ts b/index.d.ts index 1030a22..78a8d62 100644 --- a/index.d.ts +++ b/index.d.ts @@ -1,9 +1,9 @@ declare module 'react-native-shimmer-placeholder' { import * as React from 'react'; - import { Animated } from 'react-native'; + import { Animated, ViewProps } from 'react-native'; - export interface ShimmerPlaceholderProps { + export interface ShimmerPlaceholderProps extends ViewProps { width?: number | string; height?: number | string; shimmerWidthPercent?: number; @@ -19,7 +19,6 @@ declare module 'react-native-shimmer-placeholder' { contentStyle?: any; isInteraction?: boolean; LinearGradient?: React.ComponentClass; - testID?: string; } class ShimmerPlaceholder extends React.Component { diff --git a/lib/ShimmerPlaceholder.js b/lib/ShimmerPlaceholder.js index 68d94de..1512950 100644 --- a/lib/ShimmerPlaceholder.js +++ b/lib/ShimmerPlaceholder.js @@ -54,7 +54,7 @@ const BasedShimmerPlaceholder = (props) => { animatedValue, beginShimmerPosition, shimmerWidthPercent = 1, - testID + ...restProps } = props const linearTranslate = beginShimmerPosition.interpolate({ @@ -83,7 +83,7 @@ const BasedShimmerPlaceholder = (props) => { return ( {/* Force render children to restrict rendering twice */} {children} From bf2f1de03fe0cf2ad0b7fb718bc902a044c22815 Mon Sep 17 00:00:00 2001 From: Jaakko Ojalehto Date: Tue, 2 Mar 2021 15:18:48 +0200 Subject: [PATCH 3/3] Replace restProps with 3 separate ViewProps which are passed to different views --- README.md | 35 +++++++++++++++++++---------------- index.d.ts | 5 ++++- lib/ShimmerPlaceholder.js | 15 +++++++++++---- 3 files changed, 34 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index a551524..7a6f41c 100644 --- a/README.md +++ b/README.md @@ -134,22 +134,25 @@ More Detail see [this](https://github.com/tomzaku/react-native-shimmer-placehold ### Props -| Prop | Description | Type | Default | -| ------------------------- | ------------------------------------------------------------------------------------------------------ | --------- | ------------------------------------------------- | -| **`LinearGradient`** | Linear Gradient components ('react-native-linear-gradient' or 'expo-linear-gradient') | Component | global.Expo.LinearGradient | -| **`visible`** | Visible child components | boolean | false | -| **`style`** | Container Style | Style | `{backgroundColor: '#ebebeb',overflow: 'hidden'}` | -| **`shimmerStyle`** | Shimmer Style only | Style | {} | -| **`contentStyle`** | Content Style when visible | Style | {} | -| **`location`** | Locations of shimmer | number[] | *[0.3, 0.5, 0.7]* | -| **`width`** | Width of row | number | 200 | -| **`duration`** | Duration of shimmer over a row | number | 1000 | -| **`height`** | Height of row | number | 15 | -| **`shimmerWidthPercent`** | Percent of shimmer width | number | 1.0 | -| **`isReversed`** | Reverse direction of animation | boolean | `false` | -| **`stopAutoRun`** | Stop running shimmer animation at beginning | boolean | `false` | -| **`isInteraction`** | Defines whether or not the shimmer animation creates an interaction handle on the `InteractionManager` | boolean | `true` | -| **`shimmerColors`** | Colors of the shimmer. | string[] | *['#ebebeb', '#c5c5c5', '#ebebeb']* | +| Prop | Description | Type | Default | +| ---------------------------- | ------------------------------------------------------------------------------------------------------ | --------- | ------------------------------------------------- | +| **`LinearGradient`** | Linear Gradient components ('react-native-linear-gradient' or 'expo-linear-gradient') | Component | global.Expo.LinearGradient | +| **`visible`** | Visible child components | boolean | false | +| **`style`** | Container Style | Style | `{backgroundColor: '#ebebeb',overflow: 'hidden'}` | +| **`shimmerStyle`** | Shimmer Style only | Style | {} | +| **`contentStyle`** | Content Style when visible | Style | {} | +| **`location`** | Locations of shimmer | number[] | *[0.3, 0.5, 0.7]* | +| **`width`** | Width of row | number | 200 | +| **`duration`** | Duration of shimmer over a row | number | 1000 | +| **`height`** | Height of row | number | 15 | +| **`shimmerWidthPercent`** | Percent of shimmer width | number | 1.0 | +| **`isReversed`** | Reverse direction of animation | boolean | `false` | +| **`stopAutoRun`** | Stop running shimmer animation at beginning | boolean | `false` | +| **`isInteraction`** | Defines whether or not the shimmer animation creates an interaction handle on the `InteractionManager` | boolean | `true` | +| **`shimmerColors`** | Colors of the shimmer. | string[] | *['#ebebeb', '#c5c5c5', '#ebebeb']* | +| **`containerProps`** | Props passed to the outermost View | ViewProps | undefined | +| **`shimmerContainerProps`** | Props passed to the View which contains the loading animation | ViewProps | undefined | +| **`childrenContainerProps`** | Props passed to the View which contains the children | ViewProps | undefined | ### Methods | Method | Description | Type | diff --git a/index.d.ts b/index.d.ts index 78a8d62..ea18f7b 100644 --- a/index.d.ts +++ b/index.d.ts @@ -3,7 +3,7 @@ declare module 'react-native-shimmer-placeholder' { import * as React from 'react'; import { Animated, ViewProps } from 'react-native'; - export interface ShimmerPlaceholderProps extends ViewProps { + export interface ShimmerPlaceholderProps { width?: number | string; height?: number | string; shimmerWidthPercent?: number; @@ -19,6 +19,9 @@ declare module 'react-native-shimmer-placeholder' { contentStyle?: any; isInteraction?: boolean; LinearGradient?: React.ComponentClass; + containerProps?: ViewProps + shimmerContainerProps?: ViewProps + childrenContainerProps?: ViewProps } class ShimmerPlaceholder extends React.Component { diff --git a/lib/ShimmerPlaceholder.js b/lib/ShimmerPlaceholder.js index 1512950..7d4525a 100644 --- a/lib/ShimmerPlaceholder.js +++ b/lib/ShimmerPlaceholder.js @@ -54,7 +54,9 @@ const BasedShimmerPlaceholder = (props) => { animatedValue, beginShimmerPosition, shimmerWidthPercent = 1, - ...restProps + containerProps, + shimmerContainerProps, + childrenContainerProps } = props const linearTranslate = beginShimmerPosition.interpolate({ @@ -83,13 +85,18 @@ const BasedShimmerPlaceholder = (props) => { return ( {/* Force render children to restrict rendering twice */} - {children} + + {children} + { !visible && ( - +