How to usereact-native-reanimated library in React Native
In this approach, we will use the react-native-reanimated library to create fadeIn and fadeOut effects in a React Native app. To achieve this, an animated Value is initialized to represent opacity. When the respective button is pressed, the set function updates its value, resulting in smooth transitions between opacity values and the desired fade-in and fade-out animations.
To install the react-native-reanimated library use the following command
npm install react-native-reanimated
package.json for libraries and dependency versions.
{
"dependencies": {
"react-native-paper": "4.9.2",
"@expo/vector-icons": "^13.0.0",
"react-native-reanimated": "^3.5.0",
}
}
Example 1: In this React Native example, an engaging fade-in and fade-out effect is demonstrated using a clickable button. The animation state is managed by a react-native-reanimated called ‘App,’ which effectively utilizes the Animated module to control the opacity of an image, creating a smooth fading transition. When the user presses the “Fade In” button, the image gradually appears, while pressing “Fade Out” causes it to fade away. This interactive demonstration showcases an appealing visual experience within a container featuring rounded corners, button shadow, and text color and a light blue background.
Javascript
// App.js import React from "react"; import { View, Text, TouchableOpacity, StyleSheet, Image, } from "react-native"; import Animated, { useSharedValue, withTiming, Easing, useAnimatedStyle, } from "react-native-reanimated"; const App = () => { const fadeInOpacity = useSharedValue(0); const fadeIn = () => { fadeInOpacity.value = withTiming(1, { duration: 1000, easing: Easing.linear, }); }; const fadeOut = () => { fadeInOpacity.value = withTiming(0, { duration: 1000, easing: Easing.linear, }); }; const animatedStyle = useAnimatedStyle(() => { return { opacity: fadeInOpacity.value, // Use the value directly }; }); const imageUrl = "https://media.w3wiki.org/wp-content/uploads/20230816223829/geeksgforgeeks-logo-1.png"; return ( <View style={styles.container}> <Animated.View style={[ styles.imageContainer, animatedStyle, ]} > <Image source={{ uri: imageUrl }} style={styles.image} /> </Animated.View> <TouchableOpacity onPress={fadeIn} style={styles.button} > <Text style={styles.buttonText}> Fade In </Text> </TouchableOpacity> <TouchableOpacity onPress={fadeOut} style={styles.button} > <Text style={styles.buttonText}> Fade Out </Text> </TouchableOpacity> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, alignItems: "center", justifyContent: "center", backgroundColor: "#f0f0f0", }, imageContainer: { alignItems: "center", }, image: { width: 200, height: 200, borderRadius: 10, }, button: { marginTop: 20, backgroundColor: "blue", paddingVertical: 10, paddingHorizontal: 20, borderRadius: 5, shadowColor: "black", shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.4, shadowRadius: 4, elevation: 4, }, buttonText: { color: "white", fontWeight: "bold", fontSize: 16, }, }); export default App; |
React Native Animated Fade In Fade Out Effect
In this article, we will dwell on the implementation of fade-in and fade-out effects in React Native using the Animated module.
The fade-in and fade-out effect, a timeless animation technique utilized to seamlessly transition an element from invisibility to visibility and vice versa, holds a significant place in the animations.