React-Spring Error: 'animated' library from react-spring returns ERROR element type is invalid

Question

I am trying to make a simple animation where my image will fade in.

Code below I am importing {useSpring, animated} from 'react-spring'. I create simple useSpring function logoLoadingScreen. Then I add the function inside the styling for IMAGE; however, there is no animation shown.

import React from 'react';
import {useSpring, animated} from 'react-spring'
import {View,Text,StyleSheet,Image} from 'react-native';

const logoReParty = () =>{
    require('../img/img1.jpg')
}

const logoLoadingScreen = () => {

    //react Native ANIMATION from 'react-spring'
    const fade = useSpring({
        from:{
            opacity: 0
        },
        to: {
            opacity: 1
        }
    });


    return <View>

       <Image source={require('../img/img1.jpg')} 
       style={[styles.logoBackground, logoLoadingScreen]}
       resizeMode={"contain"}

       />
       <Text style={styles.loadingLogo}>Loading Screen</Text>
    </View>
};

Additionally I tried out this method below to utilized 'animated' library to wrap the VIEW content. However I get an error message stating 'Invariant Violation: Element type is invalid expected a string or a class/function but got: undefined.

    return <animated.View>

       <Image source={require('../img/img1.jpg')} 
       style={[styles.logoBackground, logoLoadingScreen]}
       resizeMode={"contain"}

       />
       <Text style={styles.loadingLogo}>Loading Screen</Text>
    </animated.View>
};

How can I show a fade animation on the image using react-spring? Additionally, how can I show a fade animation for the whole screen?

Thank you :)

UPDATE

---

Like mentioned below I created new const AnimatedView = animated(View). However the opacity of the screen does not change and I see no change in the animation.

const AnimatedView = animated(View);

const logoLoadingScreen = () => {

    //react Native ANIMATION from 'react-spring'
    const fade = useSpring({
        from:{
            opacity: 0
        },
        to: {
            opacity: 0.2
        }
    });


    return <AnimatedView style={logoLoadingScreen}>

       <Image source={require('../img/img1.jpg')} 
       style={[styles.logoBackground, logoLoadingScreen]}
       resizeMode={"contain"}

       />
       <Text style={styles.loadingLogo}>Loading Screen</Text>
    </AnimatedView>
};

What would be the possible reason animation not showing up on the screen? FYI: there is no more error but instead no animation showing up on the screen. Again Thank You for your help! ^^

SOLVED

---

Add the fade inside style which solved my issue with having animation.

return <AnimatedView style={logoLoadingScreen,fade}>

THANKS FOR THOSE WHO HELPED ME :)

Answer 1

Only the html elements are accessible as constant in animated. For example the div is accessible as animated.div. For react native and for your own components there are no such constants. You have to create a new component with animated. And you have to use this new one instead of plain View.

Create a new component:

const AnimatedView = animated(View)

return <AnimatedView style={logoLoadingScreen, ...fade}>