React-native-reanimated: Assign animated style to more than one element?

[wcandillon]

With @JonnyBurger we had a discussion today where we were wondering if we could assign a style to more than one element? We have styles for animations that we have to duplicate everywhere. Currently, we factorize these into useDerivedValue but it's only the values, not the properties.

If this would be possible, it would also make sense for animatedProps to support an array:

animatedProps={[strokeAnimation, rotateAnimation]}

[JonnyBurger]

Specifically, I had previously some struggles with reusing a style for multiple elements.

For example I had to do this:

    const backdropStyle = useAnimatedStyle(() => {
        return {
            opacity: opacity.value,
        };
    });
    const modalStyle = useAnimatedStyle(() => {
        return {
            opacity: opacity.value,
        };
    });
    ...
    return (
        <Animated.View style={backdropStyle}>
            <Animated.View style={modalStyle}>
            </Animated.View>
        </Animated.View>
    )

otherwise it would be iffy. Can try to make a repro if needed.

[terrysahaidak]

You can extract the callback here and pass it multiple times to each useAnimatedStyle, as a workaround

Don't forget to mark it as worklet

[wcandillon]

@terrysahaidak great tip thanks! Could there be some potential memorisation issues?

[terrysahaidak]

I don't think so. Each worklet represents with a hash so if you change it - hash changes and it should case a rerender (fast refresh).

But using same animated styles isn't something impossible to implement, just requires some time for refactoring that part I guess.

Abiliti to use an array for animated props is a great feature though.

[wcandillon]

Thanks a lot @terrysahaidak

[terrysahaidak]

I think there is already opened issue for this and @karol-bisztyga wanted to address this in the future.

But still can you open another one for animated props?

[karol-bisztyga]

It's been discussed before we postponed implementing this having difficulties coming from shared value being async. However we might get back to this in the future.

As for the props if you really need this, feel free to open an issue with feature request.