diff --git a/packages/pluggableWidgets/background-gradient-native/CHANGELOG.md b/packages/pluggableWidgets/background-gradient-native/CHANGELOG.md
index 125ead78b..2a4517c0f 100644
--- a/packages/pluggableWidgets/background-gradient-native/CHANGELOG.md
+++ b/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.
diff --git a/packages/pluggableWidgets/background-gradient-native/package.json b/packages/pluggableWidgets/background-gradient-native/package.json
index e934bc5b6..709b18b12 100644
--- a/packages/pluggableWidgets/background-gradient-native/package.json
+++ b/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": "*"
   }
 }
diff --git a/packages/pluggableWidgets/background-gradient-native/src/BackgroundGradient.tsx b/packages/pluggableWidgets/background-gradient-native/src/BackgroundGradient.tsx
index 1dee57607..1aa86366f 100644
--- a/packages/pluggableWidgets/background-gradient-native/src/BackgroundGradient.tsx
+++ b/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>
     );
 }
diff --git a/packages/pluggableWidgets/background-gradient-native/src/__tests__/__snapshots__/backgroundGradient.spec.tsx.snap b/packages/pluggableWidgets/background-gradient-native/src/__tests__/__snapshots__/backgroundGradient.spec.tsx.snap
index 5178a027c..aaa4ed357 100644
--- a/packages/pluggableWidgets/background-gradient-native/src/__tests__/__snapshots__/backgroundGradient.spec.tsx.snap
+++ b/packages/pluggableWidgets/background-gradient-native/src/__tests__/__snapshots__/backgroundGradient.spec.tsx.snap
@@ -40,57 +40,34 @@ exports[`Background gradient render background gradient with custom style 1`] =
   testID="test"
 >
   <View
-    style={{}}
-  >
-    <BVLinearGradient
-      angle={0}
-      borderRadii={
-        [
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-        ]
-      }
-      colors={
-        [
-          -1,
-          -16777216,
-        ]
-      }
-      endPoint={
-        [
-          0.5,
-          1,
-        ]
-      }
-      locations={
-        [
-          NaN,
-          NaN,
-        ]
-      }
-      startPoint={
-        [
-          0.5,
-          0,
-        ]
-      }
-      style={
+    style={
+      [
+        {},
         {
-          "bottom": 0,
-          "left": 0,
-          "position": "absolute",
-          "right": 0,
-          "top": 0,
-        }
-      }
-      useAngle={true}
-    />
+          "experimental_backgroundImage": [
+            {
+              "colorStops": [
+                {
+                  "color": "#fff",
+                  "positions": [
+                    "0%",
+                  ],
+                },
+                {
+                  "color": "#000",
+                  "positions": [
+                    "100%",
+                  ],
+                },
+              ],
+              "direction": "0deg",
+              "type": "linear-gradient",
+            },
+          ],
+        },
+      ]
+    }
+  >
     <Text>
       Test
     </Text>
@@ -138,57 +115,34 @@ exports[`Background gradient render background gradient with one color 1`] = `
   testID="test"
 >
   <View
-    style={{}}
-  >
-    <BVLinearGradient
-      angle={0}
-      borderRadii={
-        [
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-        ]
-      }
-      colors={
-        [
-          -1,
-          -1,
-        ]
-      }
-      endPoint={
-        [
-          0.5,
-          1,
-        ]
-      }
-      locations={
-        [
-          0,
-          0,
-        ]
-      }
-      startPoint={
-        [
-          0.5,
-          0,
-        ]
-      }
-      style={
+    style={
+      [
+        {},
         {
-          "bottom": 0,
-          "left": 0,
-          "position": "absolute",
-          "right": 0,
-          "top": 0,
-        }
-      }
-      useAngle={true}
-    />
+          "experimental_backgroundImage": [
+            {
+              "colorStops": [
+                {
+                  "color": "#fff",
+                  "positions": [
+                    "0%",
+                  ],
+                },
+                {
+                  "color": "#fff",
+                  "positions": [
+                    "0%",
+                  ],
+                },
+              ],
+              "direction": "0deg",
+              "type": "linear-gradient",
+            },
+          ],
+        },
+      ]
+    }
+  >
     <Text>
       Test
     </Text>
@@ -236,57 +190,34 @@ exports[`Background gradient render correctly 1`] = `
   testID="test"
 >
   <View
-    style={{}}
-  >
-    <BVLinearGradient
-      angle={0}
-      borderRadii={
-        [
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-        ]
-      }
-      colors={
-        [
-          -1,
-          -16777216,
-        ]
-      }
-      endPoint={
-        [
-          0.5,
-          1,
-        ]
-      }
-      locations={
-        [
-          0,
-          1,
-        ]
-      }
-      startPoint={
-        [
-          0.5,
-          0,
-        ]
-      }
-      style={
+    style={
+      [
+        {},
         {
-          "bottom": 0,
-          "left": 0,
-          "position": "absolute",
-          "right": 0,
-          "top": 0,
-        }
-      }
-      useAngle={true}
-    />
+          "experimental_backgroundImage": [
+            {
+              "colorStops": [
+                {
+                  "color": "#fff",
+                  "positions": [
+                    "0%",
+                  ],
+                },
+                {
+                  "color": "#000",
+                  "positions": [
+                    "100%",
+                  ],
+                },
+              ],
+              "direction": "0deg",
+              "type": "linear-gradient",
+            },
+          ],
+        },
+      ]
+    }
+  >
     <Text>
       Test
     </Text>
@@ -334,57 +265,34 @@ exports[`Background gradient render with undefined angle 1`] = `
   testID="test"
 >
   <View
-    style={{}}
-  >
-    <BVLinearGradient
-      angle={0}
-      borderRadii={
-        [
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-        ]
-      }
-      colors={
-        [
-          -1,
-          -16777216,
-        ]
-      }
-      endPoint={
-        [
-          0.5,
-          1,
-        ]
-      }
-      locations={
-        [
-          0,
-          1,
-        ]
-      }
-      startPoint={
-        [
-          0.5,
-          0,
-        ]
-      }
-      style={
+    style={
+      [
+        {},
         {
-          "bottom": 0,
-          "left": 0,
-          "position": "absolute",
-          "right": 0,
-          "top": 0,
-        }
-      }
-      useAngle={true}
-    />
+          "experimental_backgroundImage": [
+            {
+              "colorStops": [
+                {
+                  "color": "#fff",
+                  "positions": [
+                    "0%",
+                  ],
+                },
+                {
+                  "color": "#000",
+                  "positions": [
+                    "100%",
+                  ],
+                },
+              ],
+              "direction": "0deg",
+              "type": "linear-gradient",
+            },
+          ],
+        },
+      ]
+    }
+  >
     <Text>
       Test
     </Text>
@@ -432,57 +340,34 @@ exports[`Background gradient render with undefined opacity 1`] = `
   testID="test"
 >
   <View
-    style={{}}
-  >
-    <BVLinearGradient
-      angle={0}
-      borderRadii={
-        [
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-          0,
-        ]
-      }
-      colors={
-        [
-          -1,
-          -16777216,
-        ]
-      }
-      endPoint={
-        [
-          0.5,
-          1,
-        ]
-      }
-      locations={
-        [
-          0,
-          1,
-        ]
-      }
-      startPoint={
-        [
-          0.5,
-          0,
-        ]
-      }
-      style={
+    style={
+      [
+        {},
         {
-          "bottom": 0,
-          "left": 0,
-          "position": "absolute",
-          "right": 0,
-          "top": 0,
-        }
-      }
-      useAngle={true}
-    />
+          "experimental_backgroundImage": [
+            {
+              "colorStops": [
+                {
+                  "color": "#fff",
+                  "positions": [
+                    "0%",
+                  ],
+                },
+                {
+                  "color": "#000",
+                  "positions": [
+                    "100%",
+                  ],
+                },
+              ],
+              "direction": "0deg",
+              "type": "linear-gradient",
+            },
+          ],
+        },
+      ]
+    }
+  >
     <Text>
       Test
     </Text>
diff --git a/packages/pluggableWidgets/background-gradient-native/src/__tests__/backgroundGradient.spec.tsx b/packages/pluggableWidgets/background-gradient-native/src/__tests__/backgroundGradient.spec.tsx
index eef3e4035..1821a1fb7 100644
--- a/packages/pluggableWidgets/background-gradient-native/src/__tests__/backgroundGradient.spec.tsx
+++ b/packages/pluggableWidgets/background-gradient-native/src/__tests__/backgroundGradient.spec.tsx
@@ -90,6 +90,28 @@ describe("Background gradient", () => {
         const component = render(<BackgroundGradient {...defaultProps} />);
         expect(component.toJSON()).toMatchSnapshot();
     });
+    it("correctly parses offsets from custom style colorList", () => {
+        defaultProps = {
+            ...defaultProps,
+            colorList: [],
+            style: [
+                {
+                    angle: 0,
+                    opacity: 100,
+                    container: {},
+                    colorList: [
+                        { color: "#ff0000", offset: Big(0) },
+                        { color: "#00ff00", offset: Big(0.5) },
+                        { color: "#0000ff", offset: Big(1) }
+                    ]
+                }
+            ]
+        };
+        const tree = render(<BackgroundGradient {...defaultProps} />).toJSON() as any;
+        const gradientView = tree.children[0];
+        const colorStops = gradientView.props.style[1].experimental_backgroundImage[0].colorStops;
+        expect(colorStops.map((s: any) => s.positions[0])).toEqual(["0%", "50%", "100%"]);
+    });
     it("render background gradient with one color", () => {
         defaultProps = {
             ...defaultProps,
diff --git a/packages/pluggableWidgets/background-gradient-native/src/package.xml b/packages/pluggableWidgets/background-gradient-native/src/package.xml
index 4a47c863d..8303c6d83 100644
--- a/packages/pluggableWidgets/background-gradient-native/src/package.xml
+++ b/packages/pluggableWidgets/background-gradient-native/src/package.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="BackgroundGradient" version="2.3.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="BackgroundGradient" version="2.3.1" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="BackgroundGradient.xml" />
         </widgetFiles>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e8ea79e01..a4b75dbbe 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -296,9 +296,6 @@ importers:
       '@mendix/piw-utils-internal':
         specifier: '*'
         version: link:../../tools/piw-utils-internal
-      react-native-linear-gradient:
-        specifier: 2.8.3
-        version: 2.8.3(react-native@0.84.1(@babel/core@7.29.7)(@react-native/metro-config@0.86.1(@babel/core@7.29.7))(@types/react@19.2.17)(react@19.2.3))(react@19.2.3)
     devDependencies:
       '@mendix/pluggable-widgets-tools':
         specifier: 11.12.0
@@ -6452,12 +6449,6 @@ packages:
       react: 19.2.3
       react-native: 0.84.1
 
-  react-native-linear-gradient@2.8.3:
-    resolution: {integrity: sha512-KflAXZcEg54PXkLyflaSZQ3PJp4uC4whM7nT/Uot9m0e/qxFV3p6uor1983D1YOBJbJN7rrWdqIjq0T42jOJyA==}
-    peerDependencies:
-      react: 19.2.3
-      react-native: 0.84.1
-
   react-native-localize@3.7.0:
     resolution: {integrity: sha512-6Ohx+zZzycC6zhNVBGM/u1U+O6Ww29YIFseeyXqsKcO/pTfjLcdE40IUJF4SVVwrdh00IMJwy90HjLGUaeqK7Q==}
     peerDependencies:
@@ -14637,11 +14628,6 @@ snapshots:
       react: 19.2.3
       react-native: 0.84.1(@babel/core@7.29.7)(@react-native/metro-config@0.86.1(@babel/core@7.29.7))(@types/react@19.2.17)(react@19.2.3)
 
-  react-native-linear-gradient@2.8.3(react-native@0.84.1(@babel/core@7.29.7)(@react-native/metro-config@0.86.1(@babel/core@7.29.7))(@types/react@19.2.17)(react@19.2.3))(react@19.2.3):
-    dependencies:
-      react: 19.2.3
-      react-native: 0.84.1(@babel/core@7.29.7)(@react-native/metro-config@0.86.1(@babel/core@7.29.7))(@types/react@19.2.17)(react@19.2.3)
-
   react-native-localize@3.7.0(react-native@0.84.1(@babel/core@7.29.7)(@react-native/metro-config@0.86.1(@babel/core@7.29.7))(@types/react@19.2.17)(react@19.2.3))(react@19.2.3):
     dependencies:
       react: 19.2.3