lottie-react-native: Android doesn't scale

Yes, resizeMode=‘cover’ fixed the Android size issue for me as well. 🎉

For iOS, provide width and height in the style obj. For android, add flexGrow: 1 and aspectRatio: width / height(or in a way that does not mess up iOS). Good luck!

@peal This does not seem solved for me. As soon as I set the width or height larger than the screen dimensions in Android (which works perfectly fine on iOS), the animation does not show up at all. I tried several resizeMode configurations – but this did not help.

The following works fine on iOS, but not on Android. Would be great if anybody has a hint.

import React from 'react'
import { Animated, Dimensions, ScrollView} from 'react-native'
import LottieView from 'lottie-react-native'

const {height, width} = Dimensions.get('window')
const sourceWidth = 1875 // the width of the animation
const sourceHeight = 10005 // the height of the animation

export default class App extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      progress: new Animated.Value(0)
    }
  }

  componentDidMount () {
    Animated.timing(this.state.progress, {
      toValue: 1,
      duration: 5000
    }).start()
  }

  render () {
    return (
      <ScrollView
        contentContainerStyle={{ width: width, height: width * sourceHeight / sourceWidth}}>
        <LottieView source={require('./data/AnimationNeuTest2.json')}
          style={{width: width, height: width * sourceHeight / sourceWidth}}
          // resizeMode='cover'
          imageAssetsFolder='lottie'
          progress={this.state.progress} />
      </ScrollView>
    )
  }
}

I think the above will solve this. Feel free to reopen if it doesn’t.

@dvolland The sizes are dps on Android which means they’ll be ~2.6x the number of pixels on an average Android device. If your animation is that large, Android will try and allocate a backing buffer that’s 4800x30,000 pixels which is larger than it can and it will silently fail. It may log to logcat though so check that. can you make your animation smaller?

Using resizemode=“cover”, I’ve found a solution to not make it look blurry on Android. Increasing the size of the animation in the json file.

{
    "v": "5.5.1",
    "fr": 60,
    "ip": 0,
    "op": 120,
    "w": 1000, // was 100 increased it 10x and now it looks good
    "h": 1000, // was 100 increased it 10x and now it looks good
    "nm": "barcode",
    "ddd": 0,
    "assets": [],
    "layers": [
........

experiencing the same issue with blurry lottie view on Android