androidreact-nativekotlinlottiebuild-error

lottie-react-native 7.2.2 Build Error with React Native 0.80 - Kotlin Type Mismatch

Problem

When building a React Native 0.80 project with lottie-react-native version 7.2.2, the build fails with the following Kotlin compilation errors:

> Task :lottie-react-native:compileDebugKotlin FAILED

e: file:///path/to/node_modules/lottie-react-native/android/src/main/java/com/airbnb/android/react/lottie/LottieAnimationViewPropertyManager.kt:249:26 
Initializer type mismatch: expected 'Int', actual 'Int?'.

e: file:///path/to/node_modules/lottie-react-native/android/src/main/java/com/airbnb/android/react/lottie/LottieAnimationViewPropertyManager.kt:250:13 
Type mismatch: inferred type is 'Int?', but 'Int' was expected.

Environment

Root Cause

The issue occurs in the parseColorFilter method of LottieAnimationViewPropertyManager.kt. The problem is that ColorPropConverter.getColor() now returns a nullable Int? type, but the code expects a non-nullable Int.

This is due to React Native 0.80's updated APIs becoming more null-safe, while the lottie-react-native library hasn't been updated to handle the new type signatures.

Solution

  • Quick Fix

    Navigate to the problematic file:

    node_modules/lottie-react-native/android/src/main/java/com/airbnb/android/react/lottie/LottieAnimationViewPropertyManager.kt

    Find the parseColorFilter method (around line 245-250) and change this line:

    Before:

    val color: Int = if (colorFilter.getType("color") == ReadableType.Map) {
    ColorPropConverter.getColor(colorFilter.getMap("color"), view.context)
} else {
    colorFilter.getInt("color")
}

    After:

    val color: Int = if (colorFilter.getType("color") == ReadableType.Map) {
    ColorPropConverter.getColor(colorFilter.getMap("color"), view.context) ?: 0
} else {
    colorFilter.getInt("color")
}

    The key change is adding ?: 0 to provide a default value (transparent) when the color conversion returns null.

    Alternative Solutions

    1. Update Dependencies: Check if newer versions of lottie-react-native support React Native 0.80

    2. Downgrade React Native: If feasible, use an older React Native version compatible with your lottie-react-native version

    3. Fork and Fix: Fork the lottie-react-native repository, apply the fix, and use your fork until the official fix is released

    Additional Notes

    Tested On