The project comes with some default animations located in src/animation. It simply animates the placeholder with visual effects while waiting the real content to appear.
Adding an animation is possible using the React Native Animated component.
You can contribute by creating your own placeholder animations and submitting a pull request.
Recently, the project has allowed to use custom animations by using the HoC props : customAnimate
. It accepts a React.Component
representing an Animation.
From the Example Folder, we have created a simple animation based on color transitions.
To use this in the code, simply use a Placeholder
component with the customAnimate
props :
<Placeholder.Media onReady={this.state.isReadyMedia} customAnimate={CustomAnimation}>
<Text>Media loaded</Text>
</Placeholder.Media>