lottie-react-native: Lottie Editor-generated file crashes application on Android Expo app but not iOS Expo app

downloading and using a Json from lottiefiles.com directly works fine, but when you open it in the editor and download it from there, it crashes the app.

For those who are using their own dev client instead of expo go (you bundle your app with dev-client build) and not seeing any animation following this guide from Expo: https://docs.expo.dev/versions/latest/sdk/lottie/ , try to rebuild your dev-client build and install again. This works for me.

I guess it’s because our build doesn’t have the native component that’s required. It’s weird that it doesn’t throw any error or warning but instead render a blank component.

Hope this helps

Lottie is now updated for Expo Go in the next release of Expo SDK. However, those who are using Expo Prebuilt should not have any problems. Cheers!

Here is how I finally did it :

• download the target Lottie JSON from https://lottiefiles.com (or any other platforms such as https://lordicon.com/icons)
• if want to remove anything from the animation :
  • open it in a editor (I’m using https://lottielab.com/)
  • check out the name of the element to remove
  • open the target Lottie JSON and pretty print it (I’m using Sublime Text to do this but you can any tool like http://jsonprettyprint.net/)
  • find the element and remove it from assets and layers arrays
  • you can also adjust the length of the animation by tweaking the op property (in seconds)
• paste the JSON in https://colorize-react-native-lottie.netlify.app/
• find out what colors you want to change and their respective path
• create an utility function like described in https://github.com/lottie-react-native/lottie-react-native/issues/671#issuecomment-823157024

import Color from 'color';
import set from 'lodash.set';

export const colouriseLottie = (json: unknown, colorByPath: { [k: string]: string }) => {
  const nextJson = JSON.parse(JSON.stringify(json));

  Object.entries(colorByPath).forEach(([path, color]) => {
    // incase undefined/null/falsy is passed to color
    if (!color) return;
    const rgbValues = Color(color).object();
    const rFraction = rgbValues.r / 255;
    const gFraction = rgbValues.g / 255;
    const bFraction = rgbValues.b / 255;

    const pathParts = path.split('.');
    set(nextJson, [...pathParts, 0], rFraction);
    set(nextJson, [...pathParts, 1], gFraction);
    set(nextJson, [...pathParts, 2], bFraction);
  });

  return nextJson;
};

• then apply it to the your animation

import LottieView from 'lottie-react-native';
import React, { useMemo } from 'react';
import WelcomingSquare from '@/assets/animations/welcoming-square.json';
import { colouriseLottie } from '@/helpers/colors';

const WelcomeAnimation = ({ color, ...props }: { color?: string }) => {
  const colorizedSource = useMemo(
    () =>
      colouriseLottie(WelcomingSquare, {
        // Shape Layer 1.Shape 1.Stroke 1
        'assets.0.layers.14.shapes.0.it.1.c.k': color || '#D4E0FF',
      }),
    [],
  );

  return <LottieView autoPlay loop source={colorizedSource} {...props} />;
};

export default WelcomeAnimation;

Hopefully it helps someone else

I’m experiencing the same problem. lottie-react-native @5.1.4

I have the same problem. Even with lottie-react-native@6.0.0-rc.3