Skip to content

Commit

Permalink
Merge pull request #57 from Zeikko/add-testID
Browse files Browse the repository at this point in the history 
Add testID for easier testing
  • Loading branch information
@tomzaku
tomzaku committed Mar 4, 2021
2 parents 5ac7210 + bf2f1de commit 23238f8
Show file tree
Hide file tree
Showing 3 changed files with 34 additions and 19 deletions.
35 changes: 19 additions & 16 deletions README.md
View file
Expand Up @@ -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 |
Expand Down
5 changes: 4 additions & 1 deletion index.d.ts
View file
@@ -1,7 +1,7 @@
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 {
width?: number | string;
Expand All @@ -19,6 +19,9 @@ declare module 'react-native-shimmer-placeholder' {
contentStyle?: any;
isInteraction?: boolean;
LinearGradient?: React.ComponentClass<any>;
containerProps?: ViewProps
shimmerContainerProps?: ViewProps
childrenContainerProps?: ViewProps
}

class ShimmerPlaceholder extends React.Component<ShimmerPlaceholderProps, any> {
Expand Down
13 changes: 11 additions & 2 deletions lib/ShimmerPlaceholder.js
View file
Expand Up @@ -54,6 +54,9 @@ const BasedShimmerPlaceholder = (props) => {
animatedValue,
beginShimmerPosition,
shimmerWidthPercent = 1,
containerProps,
shimmerContainerProps,
childrenContainerProps
} = props

const linearTranslate = beginShimmerPosition.interpolate({
Expand Down Expand Up @@ -82,12 +85,18 @@ const BasedShimmerPlaceholder = (props) => {
return (
<View
style={[!visible && { height, width }, styles.container, !visible && shimmerStyle, style]}
{...containerProps}
>
{/* Force render children to restrict rendering twice */}
<View style={[!visible && { width: 0, height: 0, opacity: 0 }, visible && contentStyle]}>{children}</View>
<View
style={[!visible && { width: 0, height: 0, opacity: 0 }, visible && contentStyle]}
{...childrenContainerProps}
>
{children}
</View>
{
!visible && (
<View style={{ flex: 1, backgroundColor: shimmerColors[0] }}>
<View style={{ flex: 1, backgroundColor: shimmerColors[0] }} {...shimmerContainerProps}>
<Animated.View
style={{ flex: 1, transform: [{ translateX: linearTranslate }] }}
>
Expand Down

0 comments on commit 23238f8

Please sign in to comment.