React Native Lottie .lottie files not working on Android (but work on iOS)

Question

I'm using React Native (expo) with Lottie animations. When I use .lottie files, the animations do not show up on Android. However, they work perfectly fine on iOS.

If I switch to JSON files instead of .lottie, the animations start working on Android too.

My Code:

    <View className="absolute top-0 left-0 w-[100vw] h-[100vh] opacity-100 flex flex-col">
      <View className="w-full bg-black" style={{ height: `${size}%` }} />
      <LottieView
        source={require("@/assets/lottie/wave.lottie")}
        style={{
          height: "26%",
          transform: [{ rotate: "180deg" }],
          marginTop: -5,
        }}
        autoPlay
        loop
      />
    </View>

Has anyone encountered this issue? Is there a known limitation with .lottie files on Android? Any workarounds?

Answer 1

As per the official docs.

If you want to use .lottie files You need to modify your metro.config.js file accordingly by adding lottie extension to the assetExts array:

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

const defaultConfig = getDefaultConfig(__dirname);
/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
  resolver: {
    assetExts: [...defaultConfig.resolver.assetExts, 'lottie'],
  },
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

Setup jest for dotLottie files Create a file in the following path __mocks__/lottieMock.js and add the following code:

module.exports = 'lottie-test-file-stub';
Then add the following to your jest.config.js file:

module.exports = {
  ...
  moduleNameMapper: {
    ...,
    '\\.(lottie)$': '<rootDir>/jest/__mocks__/lottieMock.js',
  },
  ...
}

Hope it helps.