Ошибка React-Spring: анимированная библиотека из React-Spring возвращает недопустимый тип элемента ERROR

Я пытаюсь сделать простую анимацию, в которой мое изображение будет исчезать.

Код ниже Я импортирую {useSpring, animated} from 'react-spring'. Я создаю простую функцию useSpring logoLoadingScreen. Затем я добавляю функцию внутри стиля для ИЗОБРАЖЕНИЯ; однако анимация не отображается.

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

Кроме того, я опробовал этот метод ниже, чтобы использовать «анимированную» библиотеку для обертывания содержимого VIEW. Однако я получаю сообщение об ошибке 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>
};

Как я могу показать анимацию затухания на изображении с помощью react-spring? Кроме того, как я могу показать анимацию затухания для всего экрана?

Спасибо :)

ОБНОВИТЬ

Как упоминалось ниже, я создал новый const AnimatedView = animated (View). Однако непрозрачность экрана не меняется, и я не вижу изменений в анимации.

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

В чем может быть причина, по которой анимация не отображается на экране? К вашему сведению: больше нет ошибок, но вместо этого на экране не отображается анимация. Еще раз спасибо за вашу помощь! ^^

Решено

Добавьте стиль fade inside, который решил мою проблему с анимацией.

return <AnimatedView style={logoLoadingScreen,fade}>

СПАСИБО ЗА ТЕМ, КТО МНЕ ПОМОГИЛ :)