React Native Animated Fade In Fade Out Effect

Now, we will implement fade-in and fade-out effects in React Native using the Animated module. These animation effects allow elements to smoothly transition between invisible and visible states, improving the user experience.

The Animated module is used to create smooth fade-in and fade-out animations.
Opacity is animated to control the visibility of a component.
These effects enhance UI appearance by making transitions more visually appealing.

Step-by-Step Implementation

Step 1: Create a React Native Project

Now, create a project with the following command.

npx create-expo-app app-name --template

Note: Replace the app-name with your app name for example : react-native-demo-app

Next, you might be asked to choose a template. Select one based on your preference as shown in the image below. I am selecting the blank template because it will generate a minimal app, as clean as an empty canvas in JavaScript.

It completes the project creation and displays a message: "Your Project is ready!" as shown in the image below.

Now go into your project folder, i.e., react-native-demo

cd app-name

Project Structure

Step 2: Run Application

Start the server by using the following command.

npx expo start

Then, the application will display a QR code.

1. For the Android users,

For the Android Emulator, press "a" as mentioned in the image below.
For Physical Device, Download the "Expo Go" app from the Play Store. Open the app, and you will see a button labeled "Scan QR Code." Click that button and scan the QR code; it will automatically build the Android app on your device.

2. For iOS users, simply scan the QR code using the Camera app.

3. If you're using a web browser, it will provide a local host link that you can use as mentioned in the image below.

Step 3: Start Coding

- Approach 1: Using the react-native-reanimated library

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:

This React Native example demonstrates fade-in and fade-out animation using buttons and the Animated module. The image smoothly appears when "Fade In" is pressed and disappears when "Fade Out" is pressed by animating its opacity.

App.js:

App.js

import React from "react"; // Import React library
import {
  View, // Import View component for layout
  Text, // Import Text component for displaying text
  TouchableOpacity, // Import TouchableOpacity for button functionality
  StyleSheet, // Import StyleSheet for styling components
  Image, // Import Image component for displaying images
} from "react-native"; // Import React Native components
import Animated, { // Import Animated from react-native-reanimated to create animations
  useSharedValue, // Hook to create shared values for animations
  withTiming,// Function to create a timing animation
  Easing, // Easing function for smooth animations
  useAnimatedStyle, // Hook to create animated styles
} from "react-native-reanimated"; // Import animation utilities from react-native-reanimated


// Define the main App component
export default App = () => {
  // Shared value to control the opacity of the image
  const fadeInOpacity = useSharedValue(0);

  // Function to animate the fade-in effect
  const fadeIn = () => {
    fadeInOpacity.value = withTiming(1, {
      duration: 1000, // Animation duration in milliseconds
      easing: Easing.linear, // Linear easing for smooth animation
    });
  };

  // Function to animate the fade-out effect
  const fadeOut = () => {
    fadeInOpacity.value = withTiming(0, {
      duration: 1000, // Animation duration in milliseconds
      easing: Easing.linear, // Linear easing for smooth animation
    });
  };

  // Animated style to bind the opacity value to the image container
  const animatedStyle = useAnimatedStyle(() => {
    return {
      opacity: fadeInOpacity.value, // Use the shared value for opacity
    };
  });

  // URL of the image to display
  const imageUrl =
    "https://media.geeksforgeeks.org/wp-content/uploads/20230816223829/geeksgforgeeks-logo-1.png";

  // Render the UI
  return (
    <View style={styles.container}>
      {/* Animated container for the image */}
      <Animated.View
        style={[
          styles.imageContainer, // Static styles
          animatedStyle, // Animated styles
        ]}
      >
        {/* Display the image */}
        <Image
          source={{ uri: imageUrl }} // Load image from the URL
          style={styles.image} // Apply styles to the image
        />
      </Animated.View>

      {/* Button to trigger the fade-in animation */}
      <TouchableOpacity
        onPress={fadeIn} // Call fadeIn function on press
        style={styles.button} // Apply button styles
      >
        <Text style={styles.buttonText}>
          Fade In
        </Text>
      </TouchableOpacity>

      {/* Button to trigger the fade-out animation */}
      <TouchableOpacity
        onPress={fadeOut} // Call fadeOut function on press
        style={styles.button} // Apply button styles
      >
        <Text style={styles.buttonText}>
          Fade Out
        </Text>
      </TouchableOpacity>
    </View>
  );
};

// Define styles for the components
const styles = StyleSheet.create({
  container: {
    flex: 1, // Take up the full screen
    alignItems: "center", // Center items horizontally
    justifyContent: "center", // Center items vertically
    backgroundColor: "#f0f0f0", // Light gray background color
  },
  imageContainer: {
    alignItems: "center", // Center the image horizontally
  },
  image: {
    width: 200, // Image width
    height: 200, // Image height
    borderRadius: 10, // Rounded corners for the image
  },
  button: {
    marginTop: 20, // Space above the button
    backgroundColor: "blue", // Button background color
    paddingVertical: 10, // Vertical padding inside the button
    paddingHorizontal: 20, // Horizontal padding inside the button
    borderRadius: 5, // Rounded corners for the button
    shadowColor: "black", // Shadow color
    shadowOffset: { width: 0, height: 2 }, // Shadow offset
    shadowOpacity: 0.4, // Shadow opacity
    shadowRadius: 4, // Shadow blur radius
    elevation: 4, // Elevation for Android shadow
  },
  buttonText: {
    color: "white", // Text color
    fontWeight: "bold", // Bold text
    fontSize: 16, // Font size
  },
});

Output

- Approach 2: Using react-native-animatable Library

In this approach, we'll use the `react-native-animatable` library to introduce fadeIn and fadeOut effects within a React Native application. This technique involves enclosing the desired component with an `Animatable.View` as well as utilizing functions such as `fadeIn` and `fadeOut`. By pressing the corresponding button, these animations are triggered, modifying the component's opacity.

To install the react-native-animatable library, use the following command

npm install react-native-animatable

package.json

{
    "dependencies": {
        "react-native-paper": "4.9.2",
        "@expo/vector-icons": "^13.0.0",
        "react-native-animatable": "*"
    }
}

Example:

Here, the App uses a functional component with hooks and the react-native-animatable module to control the opacity of a card. The card smoothly appears when the "Fade In" button is pressed and disappears when the "Fade Out" button is pressed.

JavaScript

import React, { useState } from "react"; // Import React and useState hook for managing state
import {
  View,             // Import View component for layout
  Text,             // Import Text component for displaying text
  TouchableOpacity, // Import TouchableOpacity for button-like functionality
  StyleSheet,       // Import StyleSheet for styling components
} from "react-native"; // Import necessary components from React Native
import * as Animatable from "react-native-animatable"; // Import Animatable for animations

// Define the main App component
export default App = () => {
  // State to track visibility of content
  const [isContentVisible, setIsContentVisible] = useState(false);

  // Function to show content with fade-in animation
  const fadeIn = () => {
    setIsContentVisible(true);
  };

  // Function to hide content with fade-out animation
  const fadeOut = () => {
    setIsContentVisible(false);
  };

  return (
    <View style={styles.container}> {/* Main container */}
      <Animatable.View
        animation={
          isContentVisible ? "fadeIn" : "fadeOut"
        } // Apply fadeIn or fadeOut animation based on state
        duration={1000} // Animation duration set to 1 second
        style={styles.card} // Apply card styling
      >
        <Text style={styles.heading}>
          Welcome to Geeksforgeeks!!
        </Text> {/* Heading text */}

        <Text style={styles.paragraph}>
          A Computer Science portal for geeks. It
          contains well-written, well-thought, and
          well-explained computer science and
          programming articles.
        </Text> {/* Paragraph text */}
      </Animatable.View>
      <TouchableOpacity
        onPress={fadeIn} // Trigger fadeIn function on press
        style={styles.button} // Apply button styling
      >
        <Text style={styles.buttonText}>
          Fade In
        </Text> {/* Button text for fade-in */}
      </TouchableOpacity>
      <TouchableOpacity
        onPress={fadeOut} // Trigger fadeOut function on press
        style={styles.button} // Apply button styling
      >
        <Text style={styles.buttonText}>
          Fade Out
        </Text> {/* Button text for fade-out */}
      </TouchableOpacity>
    </View>
  );
};

// Define styles for the components
const styles = StyleSheet.create({
  container: {
    flex: 1, // Take up the entire screen
    alignItems: "center", // Center items horizontally
    justifyContent: "center", // Center items vertically
    backgroundColor: "#f0f0f0", // Light gray background color
  },
  card: {
    backgroundColor: "white", // White background for the card
    padding: 20, // Padding inside the card
    borderRadius: 10, // Rounded corners
    elevation: 4, // Shadow for Android
    shadowColor: "black", // Shadow color for iOS
    shadowOffset: { width: 0, height: 2 }, // Shadow offset for iOS
    shadowOpacity: 0.2, // Shadow opacity for iOS
    shadowRadius: 5, // Shadow blur radius for iOS
    alignItems: "center", // Center content inside the card
  },
  heading: {
    fontSize: 20, // Font size for heading
    fontWeight: "bold", // Bold text
    marginBottom: 10, // Space below the heading
    color: "green", // Green text color
  },
  paragraph: {
    fontSize: 14, // Font size for paragraph
    textAlign: "center", // Center align text
    paddingHorizontal: 20, // Horizontal padding
    color: "gray", // Gray text color
  },
  button: {
    marginTop: 20, // Space above the button
    backgroundColor: "green", // Green background color
    paddingVertical: 10, // Vertical padding
    paddingHorizontal: 20, // Horizontal padding
    borderRadius: 5, // Rounded corners
  },
  buttonText: {
    color: "white", // White text color
    fontWeight: "bold", // Bold text
    fontSize: 16, // Font size for button text
  },
});

Output