Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Animated masked view no longer works on android <= 9 #117

Closed
LouiseBC opened this issue Apr 30, 2021 · 4 comments · Fixed by #127
Closed

Animated masked view no longer works on android <= 9 #117

LouiseBC opened this issue Apr 30, 2021 · 4 comments · Fixed by #127

Comments

@LouiseBC
Copy link

LouiseBC commented Apr 30, 2021

The problem:
I use MaskedView with an animating circle as a mask to animate a component's background in and out. The mask still works, but the animation doesn't. I.e., I need to reload the page to see the state change (background visible/invisible)

This was introduced by #116 -- I've checked that reverting this change solves the problem.

@clintjansen
Copy link

Also facing this issue, anything animated inside of MaskedView does not animate on Android.
This seemed to be an issue before: #22

@k-ibr
Copy link

k-ibr commented May 14, 2021

@LouiseBC can you perhaps share an example project, I tried to recreate this but unsuccessful, we managed to animate our objects. With it I can investigate further.

@clintjansen
Copy link

clintjansen commented May 16, 2021

import { Animated, Image } from 'react-native';
import MaskedView from '@react-native-masked-view/masked-view';

...

    const loadingProgress = useRef(new Animated.Value(0)).current;
           
    useEffect(() => {
        Animated.timing(loadingProgress, {
            toValue: 100,
            duration: 1000,
            useNativeDriver: true,
        }).start()
    }, []);

    <MaskedView
        style={{ flex: 1, height: '100%' }}
        maskElement={
            <Animated.Image
                source={imageSource}
                style={[
                    {
                        width: 255,
                        height: 255,
                    },
                    {
                        transform: [
                            {
                                scale: loadingProgress.interpolate({
                                    inputRange: [0, 10, 100],
                                    outputRange: [1, 0.8, 70],
                                }),
                            },
                        ],
                    },
                ]}
            />
        }>
        {/* Content */}
    </MaskedView>

The image animates when I place it out of MaskedView.
And it also animates with the first release of this package, albeit with very laggy performance

@k-ibr
Copy link

k-ibr commented May 26, 2021

I have tried to look for solutions but haven't been able to find anything that solves this with good performance. Perhaps that one of the maintainers can have an in-depth look at this?

@FonDorn @Naturalclar ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants