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

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?

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.