We use mostly a declarative library called Animated API.
The steps to create a basic animation:
state = {
animatedValue: new Animated.Value(0)
}
Animated.timing(
this.state.animatedValue, // The value to drive
{
toValue: 100, // Animate to final value of 1
duration: 1000, // over 1 sec.
}
).start(); // Start the animation
<Animated.View
style={{
width: 100,
height: 100,
backgroundColor: "steelblue",
transform: [
{
translateX: this.state.animatedValue
}
]
}}
/>
- Animated.Image
- Animated.ScrollView
- Animated.Text
- Animated.View
If you are stuck, then have a look at the source code.