Mastering Animated React-Native: Elevate Your App’s User Experience
Are you looking to add some life and personality to your React Native app? Animations can be the perfect touch to take your app to the next level. But where do you start? In this step-by-step guide, we’ll walk you through the basics of animating your React Native app. From simple fade-ins to complex transitions, we’ll cover it all. We’ll even show you how to use popular animation libraries like Animated and Reanimated to make your animations even smoother. Plus, we’ll provide tips on optimizing your animations for performance and user experience. Whether you’re an experienced React Native developer or just starting out, this guide is a must-read for anyone looking to add some flair to their app. So grab your coffee and let’s get animating!
Update: This article is part of a series. Check out the full series: Part 1, Part 2, Part 3, Part 4, Part 5, Part 6, Part 7, and Part 8!
Part 1: Hello World Animation!
We will move the position of the box using Animated.Value from the current position to another location. The animation focuses on the declarative relationship between input and outputs, with the configurable transform in between, and start/stop methods to control time-based animation execution.
Animated.timing(xposition, {
toValue: 100,
easing: Easing.back(),
duration: 2000,
useNativeDriver: true,
}).start();For this basic example, we are using the Animated.timing(). The position property on the View is mapped to toValue. at this time, we can clearly move the toValue 100(current position to 100-pixel move). Config this as an object, these are the following options:
duration: Length of animation (milliseconds). Default 500.easing: Easing function to define the curve. Default isEasing.inOut(Easing.ease).delay: Start the animation after delay (milliseconds). Default 0.isInteraction: Whether or not this animation creates an "interaction handle" on theInteractionManager. Default true.useNativeDriver: Uses the native driver when true. Required.
Easing functions are typically used in animation to convey the gradual acceleration and deceleration of objects.
So let’s make it, a little bit more complex. We can move this in any direction, For example, if you have a graph, we need to move the next X-Y position, the same thing we are applying for this. we change toValue: {x: 100, y: 100} and Animated.ValueXY().
example:- (0,0) Current position-> (100,100)
To smoothly move this we need the values,
(0,0) -> (1,1) -> …. ->(50,50) -> …. ->(100,100)
import React, {useState} from 'react';
import {View, Animated, TouchableOpacity, Easing, Text} from 'react-native';
const App = () => {
const value = useState(new Animated.ValueXY({x: 0, y: 0}))[0];
const moveBall = () => {
Animated.timing(value, {
toValue: {x: 100, y: 100},
easing: Easing.back(0),
duration: 2000,
useNativeDriver: false,
}).start();
};
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Animated.View style={value.getLayout()}>
<View
style={{
width: 100,
height: 100,
borderRadius: 100 / 2,
backgroundColor: 'red',
}}
/>
<TouchableOpacity onPress={moveBall}>
<Text>Hey Click ME</Text>
</TouchableOpacity>
</Animated.View>
</View>
);
};
export default App;
The process of combining animations and playing them either sequentially or in parallel is a possibility. In the case of sequential animations, they can be set to commence either immediately after the previous animation has concluded, or alternatively, they can be made to initiate after a specified delay. To facilitate this functionality, the Animated API offers the “sequence()” method, which takes an array of animations as input and then automatically executes the start()/stop() commands as required.
Sequence Animation
Alright, before delving into the code implementation, let’s establish a basic scenario. We have a circle situated at the bottom of the screen that we desire to shift toward the top, constituting the first animation, and then proceed to move it down, completing the second animation.
import React, {useRef, useState} from 'react';
import {
View,
Animated,
TouchableOpacity,
Easing,
Text,
Dimensions,
} from 'react-native';
import {transformer} from './metro.config';
const App = () => {
let valueRight = useRef(new Animated.Value(0)).current;
const windowHeight = Dimensions.get('window').height;
const positionInterpolate = valueRight.interpolate({
inputRange: [0, 1, 2],
outputRange: [0, -windowHeight + 100, 0],
extrapolate: 'clamp',
});
const moveBall = () => {
Animated.sequence([
Animated.timing(valueRight, {
toValue: 1,
duration: 1000,
useNativeDriver: true,
}),
Animated.timing(valueRight, {
toValue: 2,
duration: 1000,
useNativeDriver: true,
}),
]).start(() => {});
};
return (
<View style={{flex: 1, justifyContent: 'flex-end', alignItems: 'center'}}>
<Animated.View
style={[
{
width: 100,
height: 100,
borderRadius: 100 / 2,
backgroundColor: 'red',
transform: [{translateY: positionInterpolate}],
},
]}
/>
<TouchableOpacity onPress={moveBall}>
<Text>Hey Click ME</Text>
</TouchableOpacity>
</View>
);
};
export default App;Here, we are using interpolate(), this function allows us to input ranges to map different ranges of the output ranges. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.
inputRange: an array of numbersoutputRange: an array of numbers or stringseasing(optional): a function that returns a number, given an input numberextrapolate(optional): a string such as 'extend', 'identity', or 'clamp'extrapolateLeft(optional): a string such as 'extend', 'identity', or 'clamp'extrapolateRight(optional): a string such as 'extend', 'identity', or 'clamp'
Parallel Animation
Very well! Allow me to provide a straightforward example for parallel animation. This is a React Native app that uses the Animated API to animate two red balls that move vertically in opposite directions. The animation is triggered by pressing a button in the center of the screen.
const moveBall = () => {
Animated.parallel([
Animated.sequence([
Animated.timing(valueRight, {
toValue: 1,
duration: 1000,
useNativeDriver: true,
}),
Animated.timing(valueRight, {
toValue: 2,
duration: 1000,
useNativeDriver: true,
}),
]),
Animated.sequence([
Animated.timing(valueLeft, {
toValue: 1,
duration: 1000,
useNativeDriver: true,
}),
Animated.timing(valueLeft, {
toValue: 2,
duration: 1000,
useNativeDriver: true,
}),
]),
]).start();
};Full code:- https://github.com/alokaLimark/animation/tree/tutorial_1/paralell_animation
In the App component, two useRef hooks are used to create two Animated.Value objects, which will be used to animate the position of the balls. The windowHeight and windowWidth variables are created using the Dimensions API to get the dimensions of the device's screen.
Two interpolate methods are then used to create two animated position values for the balls. These values are used to set the position of the balls using the transform property of the Animated.View component.
The moveBall function is called when the button is pressed, triggering a parallel animation sequence using the Animated.parallel method. This sequence includes two nested Animated.sequence methods, each of which animates one of the balls.
The app then renders two View components, each containing an Animated.View component that displays one of the red balls. The balls are positioned on opposite sides of the screen using the flex property of the View components.
Finally, a TouchableOpacity component is rendered in the center of the screen, with a Text component that reads "Hey Click ME". Pressing this button triggers the animation sequence.
Conclusion
Animated React-Native is an essential tool for creating engaging and interactive user interfaces. It allows developers to add animations to their apps, enhancing the user experience and making the app more visually appealing. By following the strategies outlined in this article, you can revamp your React-Native app to ensure seamless navigation and a top-notch user experience. From creating basic animations to integrating Animated React-Native into your app, these tips will help you take your app to the next level and stand out in a crowded market. So, get started today and elevate your React-Native app for mobile devices!
