title: React-Native Add Fade in Animation
body: <p>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 <code>hooks</code></p>
  <p>This is my component:</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  
  const Home = (props) =&gt; {
    const renderCard = ({ item }) =&gt; {
      return (
        //I am trying to add a fadein to this everytime it loads and fadout when It unmounts
        &lt;View&gt;
          &lt;Text style={styles.day}&gt;{item}&lt;/Text&gt;
          &lt;MealCards
            item={state[item]}
            navigation={navigation}
            onChange={onChange}
          /&gt;
          &lt;View style={styles.divider} /&gt;
        &lt;/View&gt;
      );
    };
    return (
      &lt;FlatList
        data={days}
        keyExtractor={(item) =&gt; item}
        showsHorizontalScrollIndicator={false}
        renderItem={renderCard}
      /&gt;
    );
  };
  </code></pre>