lottie-react-native: Adding animation source causes app to crash

Description

I used Bodymovin 5.5.2 with after effects 2019 CC. I also tried exporting my animation with Bodymovin 4.5.8 with after effects 2017 CC. But whenever I try to use my json file, app crashes. Code is down below.

import LottieView from 'lottie-react-native';
...
<LottieView source={require("../assets/data.json")} autoPlay
             />
...

json file is down below. {"v":"4.5.8","fr":29.9700012207031,"ip":0,"op":899.000036617021,"w":200,"h":200,"ddd":0,"assets":[{"id":"image_0","w":114,"h":81,"u":"images/","p":"img_0.png"},{"id":"image_1","w":194,"h":131,"u":"images/","p":"img_1.png"}],"layers":[{"ddd":0,"ind":0,"ty":2,"nm":"katman 2","refId":"image_0","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[104.789,88.721,0]},"a":{"a":0,"k":[56.653,40.245,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"ip":0,"op":899.000036617021,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":1,"ty":2,"nm":"katman 1","refId":"image_1","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[100,100.116,0]},"a":{"a":0,"k":[96.649,65.135,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"ip":0,"op":899.000036617021,"st":0,"bm":0,"sr":1}]}

I tried to use another json file that was exported with bodymovin that I found from the internet, which its version was 4.5.8 and it worked. That’s why I downgraded my bodymovin and after effects, but still no use.

It seems the issue is with bodymovin version, but how will I find a version that is working? How can I solve this?

Steps to Reproduce

  1. yarn add lottie-react-native@2.6.1
  2. react-native link lottie-react-native
  3. Add the code in the description.
  4. react-native run-android

Expected behavior: App to work with my animation. Actual behavior: App crashed on the animation page.

Versions

{ barista: ‘0.0.1’, npm: ‘6.5.0’, ares: ‘1.15.0’, brotli: ‘1.0.7’, cldr: ‘34.0’, http_parser: ‘2.8.0’, icu: ‘63.1’, llhttp: ‘1.0.1’, modules: ‘67’, napi: ‘4’, nghttp2: ‘1.34.0’, node: ‘11.9.0’, openssl: ‘1.1.1a’, tz: ‘2018e’, unicode: ‘11.0’, uv: ‘1.25.0’, v8: ‘7.0.276.38-node.16’, zlib: ‘1.2.11’ }

react-native-cli: 2.0.1 react-native: 0.59.5

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 9
  • Comments: 15

Most upvoted comments

I solved it by using the old json format when exporting the animation with Bodymovin from After Effects.

  • In the Bodymovin window, click the Settings gear icon.
  • Scroll down and click Advanced.
  • Check Export old json format (for backwards compatibility).

If you’re coming here from google, just install the latest lottie-react-native

npm install lottie-react-native react-native-safe-module

It will work 😃

Having the same issue but cannot replicate on iOS. Crashes Android only.

Having the same issue. Exporting AE files with bodymovin ~5.5 causes a crash.

Same animations will work after re-exporting with bodymovin 5.3.4 (haven’t tested with ~5.4)

FYI, we went through the painstaking process of updating from 0.59.10 to 0.60.6 just to get this working and after a few days of upgrade hell, Lottie works perfectly now without any monkeying around.

Using Bodymovin 5.6.10. Aside from selecting:

Settings > Advanced export settings > Export old json format (for backwards compatibility)

as mentioned by @HerrR, I also selected:

Settings > Assets > Include in json

Having the same problem with the same versions, any work-around or fix maybe?