Custom animation
rn-placeholder
exposes a customAnimate
props
through its HOC so that you can build your own animation.
For example, the following animation :
import React from "react";
import { Animated } from "react-native";
const Colors = ({ children }) => {
const animation = new Animated.Value(0);
function start() {
return Animated.timing(animation, {
toValue: 100,
duration: 1500
}).start(e => {
if (e.finished) {
start();
}
});
}
start();
const backgroundColor = animation.interpolate({
inputRange: [0, 50, 100],
outputRange: ["yellow", "orange", "blue"]
});
const style = { backgroundColor, padding: 20 };
return <Animated.View style={style}>{children}</Animated.View>;
};
export default Colors;
provides a custom animation that switches color when loading. It's possible to use it this way :
<Placeholder.ImageContent
onReady={isLoaded}
lineNumber={2}
customAnimate={ColorAnimation}
lastLineWidth="40%"
>
<ComponentToRenderAfterAsyncStuff />
</Placeholder.ImageContent />