lottie-react-native: Size of lottie animations don't fill up the container

It seems the animations from .json require excessive padding/margins to be viewable:

screen shot 2018-01-01 at 6 17 27 pm

      import Animation from 'lottie-react-native';
      // a bunch of other code
      <Animation
        style={{
          backgroundColor: 'red',
          width: 100,
          height: 100,
          resizeMode: 'contain',
        }}
        source={lottieLoader}
        progress={this.state.progress}
      />

This doesn’t show up in the container, however if I add excessive padding it does:

screen shot 2018-01-01 at 6 19 04 pm

      import Animation from 'lottie-react-native';
      // a bunch of other code

      <Animation
        style={{
          backgroundColor: 'red',
          width: 100,
          height: 100,
          paddingTop: 100,
          paddingRight: 300,
          resizeMode: 'contain',
        }}
        source={lottieLoader}
        progress={this.state.progress}
      />

Using the following share animation: https://www.lottiefiles.com/search?q=share

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 16

Most upvoted comments

<Lottie
...
resizeMode="cover"
/>

@arjunpola Above is solution for you

+117

Winglonelion on Jul 24, 2018

aghhh I thought that was the issue but was hoping there was a way to get rid of the empty padding, that’s crazy how on earth would we then scale it to zoom and properly position itself amongst our other icons/textfields.

VicFrolov on Jan 12, 2018

I can’t seem to get the animation itself to fit in it’s parent view edge to edge, which makes it hard to position them side by side:

  <TouchableOpacity
    onPress={this.animate}
    underlayColor="transparent"
    disabled={this.state.midAnimation}
    style={{ height: 100, width: 100 }}
  >
    <Animation
      style={{
        backgroundColor: 'red',
        flex: 1,
        height: 100,
        width: 100,
        padding: 0,
        margin: 0,
      }}
      source={LottieAnimation}
      progress={this.state.progress}
    />
  </TouchableOpacity>

the red background is TouchableOpacity which is 100x100, but the ticket itself has way too much padding on the inside, and makes it basically impossible to line these up as a list.

VicFrolov on Jan 12, 2018

Use aspectRatio in Lottie styles as aspectRatio: deviceWidth/deviceHeight

AnandKuhar1100 on Apr 16, 2021

@monotv, try Keyshape

galechus on Mar 15, 2018

Googling for a similar error brought me here. I also saw my animation being displayed outside the container. Wrapping the <Animation> in a <View> fixed it for me in the end. e.g:

<View>
  <Animation
        style={{
          backgroundColor: 'red',
          width: 100,
          height: 100
        }}
        source={lottieLoader}
        progress={this.state.progress}
      />
</View>

redpandatronicsuk on Jan 6, 2018