[MOO-2431]: Refactor BackgroundGradient

packages/pluggableWidgets/background-gradient-native/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Changed
+
+-   We removed the library of `react-native-linear-gradient` in favor of a react-native View with linear-gradient type background.
+
 ## [2.2.1] - 2026-1-19
 
 -   We fixed an issue where the `background-gradient-native` widget would not render correctly with the new RN architecture upgrade.

packages/pluggableWidgets/background-gradient-native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "background-gradient-native",
   "widgetName": "BackgroundGradient",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/mendix/native-widgets.git"
@@ -22,7 +22,6 @@
     "@mendix/pluggable-widgets-tools": "*"
   },
   "dependencies": {
-    "@mendix/piw-utils-internal": "*",
-    "react-native-linear-gradient": "2.8.3"
+    "@mendix/piw-utils-internal": "*"
   }
 }

packages/pluggableWidgets/background-gradient-native/src/BackgroundGradient.tsx

@@ -1,6 +1,5 @@
 import { ReactElement } from "react";
-import { Pressable } from "react-native";
-import LinearGradient from "react-native-linear-gradient";
+import { Pressable, View } from "react-native";
 import { all } from "deepmerge";
 import { executeAction } from "@mendix/piw-utils-internal";
 import defaultStyle, { CustomStyle } from "./ui/Styles";
@@ -40,7 +39,9 @@ export function BackgroundGradient({ name, colorList, content, onClick, style }:
     const angle = angleValidation(styles.angle);
     const opacity = opacityValidation(styles.opacity);
 
-    let sortedColorList = (styles.colorList && colorList.length === 0 ? styles.colorList : colorList).sort(
+    // Extracted before deepmerge to avoid corrupting Big instances in colorList offsets
+    const styleColorList = style.flatMap(s => s.colorList ?? []);
+    let sortedColorList = (styleColorList.length > 0 && colorList.length === 0 ? styleColorList : colorList).sort(
         (a, b) => Number(a.offset) - Number(b.offset)
     );
 
@@ -67,9 +68,25 @@ export function BackgroundGradient({ name, colorList, content, onClick, style }:
                 opacity: onClick?.canExecute && pressed ? opacity * 0.3 : opacity
             })}
         >
-            <LinearGradient colors={colors} locations={offsets} useAngle angle={angle} style={styles.container}>
+            <View
+                style={[
+                    styles.container,
+                    {
+                        experimental_backgroundImage: [
+                            {
+                                type: "linear-gradient" as const,
+                                direction: `${angle}deg`,
+                                colorStops: colors.map((color, index) => ({
+                                    color,
+                                    positions: [`${offsets[index] * 100}%`]
+                                }))
+                            }
+                        ]
+                    }
+                ]}
+            >
                 {content}
-            </LinearGradient>
+            </View>
         </Pressable>
     );
 }