Skip to content

Commit

Permalink
fixing animations
Browse files Browse the repository at this point in the history
  • Loading branch information
Marvin Frachet committed Apr 27, 2019
1 parent e06a85b commit c12bb1e
Show file tree
Hide file tree
Showing 2 changed files with 15 additions and 6 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ Fully compatible with [Expo](https://expo.io/) and [react-native-web](https://gi
- <a href="#usage">How to use it ?</a>
- [Components available](./docs/COMPONENTS.md)
- [Using default animations](./docs/ANIMATIONS.md#default)
- [Using a custom animation](./ANIMATIONS.md#custom)
- [Using a custom animation](./docs/ANIMATIONS.md#custom-animations)

<h1 name="#usage">Usage</h1>

Expand Down
19 changes: 14 additions & 5 deletions docs/ANIMATIONS.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,26 @@

## Default animations

The project comes with some default animations located in [src/animation](./src/animation). It simply animates the placeholder with visual effects while waiting the real content to appear.
There are two built-in animations inside this library `shine` and `fade`. They can be used by passing them inside the `animation` prop:

Adding an animation is possible using the [React Native Animated](https://facebook.github.io/react-native/docs/animations.html) component.

You can contribute by creating your own placeholder animations and submitting a pull request.
```javascript
<Placeholder
animation="fade"
isReady={isReady}
whenReadyRender={ComponentLoaded}
>
<Line width="70%" />
<Line />
<Line />
<Line width="30%" />
</Placeholder>
```

## Custom animations

It's also possible to create custom animations using the `customAnimation` props of the `Placeholder` component:

```jsx
```javascript
<Placeholder
customAnimation={ColorAnimation}
isReady={isReady}
Expand Down

0 comments on commit c12bb1e

Please sign in to comment.