React-Native Add Fade in Animation

Question

I am trying to make this card fade in every time the component loads and fade out after it unmount's using hooks but I am failing to do so and desperately need someones help. Please can you show me how to animate this card every-time it's loaded and unmounted using hooks

This is my component:

    import React, { useState } from "react";
    
    const Home = (props) => {
      const renderCard = ({ item }) => {
        return (
          //I am trying to add a fadein to this everytime it loads and fadout when It unmounts
          <View>
            <Text style={styles.day}>{item}</Text>
            <MealCards
              item={state[item]}
              navigation={navigation}
              onChange={onChange}
            />
            <View style={styles.divider} />
          </View>
        );
      };
      return (
        <FlatList
          data={days}
          keyExtractor={(item) => item}
          showsHorizontalScrollIndicator={false}
          renderItem={renderCard}
        />
      );
    };

Answer 1

I think that the best way to do this is using Reanimated.

import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';

<Animated.View
  key={'uniqueKey'}
  entering={FadeIn.duration(400)}
  exiting={FadeOut.duration(400)}
/>

Extra tip: If you want to retrigger the animation you could just change the component key prop ;)