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 :)

Peter Ambruzs · Accepted Answer · 2020-01-12T21:52:36.633

3

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

edited Jan 12 '20 at 21:52

answered Jan 12 '20 at 18:53

Peter Ambruzs

7,763
3
30
36

Hello I tried for the way you have mentioned above; however, I see no changes in the animation. I have updated the question above. Do you know how to make the animation show up on the screen. Also Thank you for your reply :) – Daniel Kang Jan 12 '20 at 21:27
1

You have to use fade as a style property. I updated my code above. – Peter Ambruzs Jan 12 '20 at 21:54
Thank you. By adding in fade in the style property solved the code! – Daniel Kang Jan 12 '20 at 23:45

Yoel · Answer 2 · 2020-01-12T19:33:47.227

1

add import

import { Animated} from 'react-native'

change

return <Animated.View>

edited Jan 12 '20 at 19:33

answered Jan 12 '20 at 18:33

Yoel

7,555
6
27
59

hello I tried with the Animated.View through import {Animated} from 'react-native'; however, there is no animation on the screen. I changed the opacity from: 0 to from opacity: 0.2; however I see no changes made on the screen – Daniel Kang Jan 12 '20 at 21:20
I got it solved but thank you for the help as well! :) – Daniel Kang Jan 12 '20 at 23:45

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

2 Answers2