Description

LottieView is implemented as:

<View style={[aspectRatioStyle, sizeStyle, style]}>
    <AnimatedNativeLottieView style={[
            aspectRatioStyle,
            sizeStyle || { width: '100%', height: '100%' },
            style,
          ]}
    />
</View>

Here we can see the incoming style property is applied twice, once to outer view and again to the native control. This means that if the style contains positional settings, such as { left: 50 }, they first cause the outer View container to be translated relative to its parent, and then the animation itself to be translated further.

Steps to Reproduce

<View style={{ backgroundColor: "blue"}}>
    <LottieView style={ { left: 50, width: 50, height: 50, backgroundColor: "red" } } />
</View>

Expected behavior: Animation is positioned 50 units way from the left side of the surrounding blue box, and the red color is only behind the animation.

Actual behavior: Red box is positioned 50 units from the left of the surrounding blue box top-left corner, animation is positioned a further 50 units to the right.

Versions

lottie-react-native: 5.1.5
react: 18.0
react-native: 0.69.3
react-native-windows: 0.69.19

Tested on Windows only

Thoughs on a fix

The View wrapper is needed to support attributes like backgroundColor or accessibility props that aren't directly supported on the native control. Since the View already has the sizing and positioning styles applied, could the native control just be set to fill 100% of the space of the View container?

<View style={[aspectRatioStyle, sizeStyle, style]}>
    <AnimatedNativeLottieView style={StyleSheet.absoluteFill} />
</View>