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

Question

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

React Native: 0.80
lottie-react-native: 7.2.2
Platform: Android
Build tool: Gradle/Kotlin

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.

Nijat Aliyev · Accepted Answer · 2025-06-16 08:15:07Z

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

Update Dependencies: Check if newer versions of lottie-react-native support React Native 0.80
Downgrade React Native: If feasible, use an older React Native version compatible with your lottie-react-native version
Fork and Fix: Fork the lottie-react-native repository, apply the fix, and use your fork until the official fix is released

Additional Notes

This is a common issue when React Native updates introduce stricter type safety
The fix provides a safe fallback (transparent color) when color conversion fails
Always test your Lottie animations after applying this fix to ensure they render correctly

Tested On

✅ React Native 0.80.x
✅ lottie-react-native 7.2.2
✅ Android builds

Collectives™ on Stack Overflow

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

Problem

Environment

Root Cause

1 Answer 1

Quick Fix

Alternative Solutions

Additional Notes

Tested On

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Problem

Environment

Root Cause

1 Answer 1

Quick Fix

Alternative Solutions

Additional Notes

Tested On

Comments

Your Answer

Sign up or log in

Post as a guest

Related