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>This is deprecated since v1.0.0, use component instead of this API while working on version >=v1.0.0
Here's the constraints needed to use Animations inside of rn-placeholder
start
Type: function
Start the animation
style
Type: object
Style of the application
Example
/**
* Create a repetitive fadein / fadeout animation
*/
export default () => {
const START_VALUE = 0.5;
const animation = new Animated.Value(START_VALUE);
function start() {
return Animated.sequence([
Animated.timing(animation, {
toValue: 1,
duration: 500,
}),
Animated.timing(animation, {
toValue: START_VALUE,
duration: 500,
}),
]).start((e) => {
if (e.finished) {
start();
}
});
}
/**
* The two mandatory properties to return
*/
return {
style: { opacity: animation },
start,
};
};