React Native Animated Fade In Fade Out Effect

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
  },
});

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
  },
});