From 585b28c5f0a460dc7b8d50cc201776ae9cd290f1 Mon Sep 17 00:00:00 2001 From: tshmieldev Date: Thu, 24 Sep 2026 11:27:37 -0700 Subject: [PATCH] fix(android): skip null gradient color stop positions instead of warning (#58636) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Summary: `processBackgroundImage` emits `position: null` for every color stop that has no explicit position, which is the common case (`linear-gradient(red, blue)`). On Android, `LinearGradient` and `RadialGradient` pass that value straight to `LengthPercentage.setFromDynamic`, which logs ``` W ReactNative: Unsupported type for radius property: Null ``` once per such stop on every props update. A static view logs it on each render; an animated `backgroundImage` (e.g. Reanimated CSS animations) floods logcat at frame rate. The value itself is handled correctly (`null` position → evenly spaced), so this is purely log noise, but it drowns out real warnings. `BackgroundPosition` already guards against `ReadableType.Null` before calling `setFromDynamic`; this change does the same for gradient color stops in both gradient parsers. ## Changelog: [ANDROID] [FIXED] - Stop logging "Unsupported type for radius property: Null" for gradient color stops without an explicit position Pull Request resolved: https://github.com/react/react-native/pull/58636 Test Plan: Built React Native from source (`includeBuild('../node_modules/react-native')`) in an app that animates `backgroundImage` on Android (Pixel 9 Pro emulator, API 37) and counted the warning in `adb logcat` over an identical ~90 s run: - before: 1386 occurrences of `Unsupported type for radius property: Null` - after: 0 occurrences Gradients with and without stop positions render the same as before. `yarn format-check-kotlin` (ktfmt) passes on the changed files. Reviewed By: Abbondanzo Differential Revision: D121621185 Pulled By: javache fbshipit-source-id: 7baeea9e373dd03db9b911c6a57d9cb90e33a866 --- .../com/facebook/react/uimanager/style/LinearGradient.kt | 6 +++++- .../com/facebook/react/uimanager/style/RadialGradient.kt | 6 +++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/style/LinearGradient.kt b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/style/LinearGradient.kt index 57a90bcbc73..41050bf0a35 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/style/LinearGradient.kt +++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/style/LinearGradient.kt @@ -72,7 +72,11 @@ internal class LinearGradient(val direction: Direction, val colorStops: List colorStop.getInt("color") } val colorStopPosition = - LengthPercentage.setFromDynamic(colorStop.getDynamic("position")) + if (colorStop.hasKey("position") && !colorStop.isNull("position")) { + LengthPercentage.setFromDynamic(colorStop.getDynamic("position")) + } else { + null + } stops.add(ColorStop(color, colorStopPosition)) } stops diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/style/RadialGradient.kt b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/style/RadialGradient.kt index 8aef78ebc92..747c22e7c19 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/style/RadialGradient.kt +++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/style/RadialGradient.kt @@ -128,7 +128,11 @@ internal class RadialGradient( else -> colorStop.getInt("color") } val colorStopPosition = - LengthPercentage.setFromDynamic(colorStop.getDynamic("position")) + if (colorStop.hasKey("position") && !colorStop.isNull("position")) { + LengthPercentage.setFromDynamic(colorStop.getDynamic("position")) + } else { + null + } stops.add(ColorStop(color, colorStopPosition)) } stops