Blog

React Native Animations

Here in this blog, we are going to learn about React Native Animations.

React Native provides a powerful animation API through the Animated library that allows developers to create complex animations with ease. This API enables developers to animate any component property including opacity, position, size and as well as create more complex animations involving multiple properties.
To get started with the Animated API, developers can create a new animated value and link it to a component property. For example, to create an animation that changes the opacity of a View component over time, developers can use the following code:

javascriptCopy code

import React, { Component } from 'react';
import { View, Animated } from 'react-native';

class App extends Component {
constructor(props) {
super(props);
this.state = {
opacityValue: new Animated.Value(0),
};
}

componentDidMount() {
Animated.timing(this.state.opacityValue, {
toValue: 1,
duration: 1000,
}).start();
}

render() {
const { opacityValue } = this.state;
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Animated.View style={{ opacity: opacityValue }}>
<Text style={{ fontSize: 20 }}>Hello, World!</Text>
</Animated.View>
</View>
);
}
}

In this example, a new animated value opacityValue is created with an initial value of 0. In the componentDidMount lifecycle method, an animation is triggered using the timing method which changes the opacity value from 0 to 1 over a duration of 1000 milliseconds. The start method is called to begin the animation. Finally, the opacity Value is linked to the opacity style property of the Animated. View the component to create the desired animation effect.
Developers can also use the Animated API to animate position and size properties. For example, to animate a View component from one position to another, developers can use the ValueXY method to create an animated value for the position and use the timing method to animate the position from the starting point to the ending point:

import React, { Component } from 'react';
import { View, Animated } from 'react-native';
App extends Component {
constructor(props) {
super(props);
this.state = {
positionValue: new Animated.ValueXY({ x: 0, y: 0 }),
};
}

componentDidMount() {
Animated.timing(this.state.positionValue, {
toValue: { x: 200, y: 300 },
duration: 1000,
}).start();
}

render() {
const { positionValue } = this.state;
return (
<View style={{ flex: 1 }}>
<Animated.View style={{ position: ‘absolute’, top: positionValue.y, left: positionValue.x }}>
<Text style={{ fontSize: 20 }}>Hello, World!</Text>
</Animated.View>
</View>
);
}
}

In this example, a new animated value positionValue is created with an initial value of { x: 0, y: 0 }. The componentDidMount method triggers an animation using the timing method which changes the position value from { x: 0, y: 0 } to { x: 200, y: 300 } over a duration of 1000 milliseconds. Finally, the position Value is linked to the top and left style properties of the Animated. View the component to create the desired animation effect.
Developers can also create more complex animations involving multiple properties by using parallel or sequence