Can't animate opacity when using whileHover on web

[mathias-berg]

There seems to be some issues with whileHover and whileTap on web.

If I just create a simple app/component looking like this:

const App = () => {
    return (
        <Motion.Pressable>
                <Motion.View
                    initial={{
                        opacity: 0,
                    }}
                    whileHover={{ opacity: 1 }} // Or whileTap={{ opacity: 1 }}
                    style={{
                        backgroundColor: '#CC22EE',
                        width: 100,
                        height: 100,
                    }}
                />
            </Motion.Pressable>
    );
}

If I have whileHover I get this error as soon as I hover over the component.

If I instead use whileTap, I get this error as soon as I hover (yes, hover, not clicking) over the component and it doesn't matter if it is opacity, x or scale that I try to animate, everything I try throws this error.

I'm using version 2.0.0.

[jmeistrich]

This will be fixed in 2.1.0 (which adds AnimatePresence and has some performance optimizations). Can you try the pre-release 2.1.0-next.1 to fix this? I think it's ready to release but don't have time today to fully finish testing and documenting the new features.

[mathias-berg]

It works with the new version!

I will test the AnimationPresence feature later tonight.

Really great library by the way!

[jmeistrich]

Released 2.1.0 which fixes this bug.

Thanks @mathias-berg!