From 8e6cfd004cb65e00d44d2b483fcaa57182ff3b35 Mon Sep 17 00:00:00 2001 From: MxKevinBeqo Date: Tue, 8 Sep 2026 17:23:27 +0200 Subject: [PATCH 1/6] feat(background-gradient-native): replace react-native-linear-gradient --- .../background-gradient-native/package.json | 3 +- .../src/BackgroundGradient.tsx | 23 +- .../backgroundGradient.spec.tsx.snap | 385 ++++++------------ 3 files changed, 155 insertions(+), 256 deletions(-) diff --git a/packages/pluggableWidgets/background-gradient-native/package.json b/packages/pluggableWidgets/background-gradient-native/package.json index e934bc5b6..4c5643f63 100644 --- a/packages/pluggableWidgets/background-gradient-native/package.json +++ b/packages/pluggableWidgets/background-gradient-native/package.json @@ -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..55ce90089 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"; @@ -67,9 +66,25 @@ export function BackgroundGradient({ name, colorList, content, onClick, style }: opacity: onClick?.canExecute && pressed ? opacity * 0.3 : opacity })} > - + ({ + color, + positions: [`${offsets[index] * 100}%`] + })) + } + ] + } + ]} + > {content} - + ); } 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..9270621e8 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" > - + "experimental_backgroundImage": [ + { + "colorStops": [ + { + "color": "#fff", + "positions": [ + "NaN%", + ], + }, + { + "color": "#000", + "positions": [ + "NaN%", + ], + }, + ], + "direction": "0deg", + "type": "linear-gradient", + }, + ], + }, + ] + } + > Test @@ -138,57 +115,34 @@ exports[`Background gradient render background gradient with one color 1`] = ` testID="test" > - + "experimental_backgroundImage": [ + { + "colorStops": [ + { + "color": "#fff", + "positions": [ + "0%", + ], + }, + { + "color": "#fff", + "positions": [ + "0%", + ], + }, + ], + "direction": "0deg", + "type": "linear-gradient", + }, + ], + }, + ] + } + > Test @@ -236,57 +190,34 @@ exports[`Background gradient render correctly 1`] = ` testID="test" > - + "experimental_backgroundImage": [ + { + "colorStops": [ + { + "color": "#fff", + "positions": [ + "0%", + ], + }, + { + "color": "#000", + "positions": [ + "100%", + ], + }, + ], + "direction": "0deg", + "type": "linear-gradient", + }, + ], + }, + ] + } + > Test @@ -334,57 +265,34 @@ exports[`Background gradient render with undefined angle 1`] = ` testID="test" > - + "experimental_backgroundImage": [ + { + "colorStops": [ + { + "color": "#fff", + "positions": [ + "0%", + ], + }, + { + "color": "#000", + "positions": [ + "100%", + ], + }, + ], + "direction": "0deg", + "type": "linear-gradient", + }, + ], + }, + ] + } + > Test @@ -432,57 +340,34 @@ exports[`Background gradient render with undefined opacity 1`] = ` testID="test" > - + "experimental_backgroundImage": [ + { + "colorStops": [ + { + "color": "#fff", + "positions": [ + "0%", + ], + }, + { + "color": "#000", + "positions": [ + "100%", + ], + }, + ], + "direction": "0deg", + "type": "linear-gradient", + }, + ], + }, + ] + } + > Test From a71d688e8f96fcaaf6f186073e4300983d9188a4 Mon Sep 17 00:00:00 2001 From: MxKevinBeqo Date: Tue, 8 Sep 2026 17:30:31 +0200 Subject: [PATCH 2/6] chore(background-gradient-native): update lockfile --- pnpm-lock.yaml | 14 -------------- 1 file changed, 14 deletions(-) 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 From 093251fc5b6ec989c5c553d9c4ee68746539240a Mon Sep 17 00:00:00 2001 From: MxKevinBeqo Date: Wed, 9 Sep 2026 11:54:16 +0200 Subject: [PATCH 3/6] chore(background-gradient-native): bump version --- .../pluggableWidgets/background-gradient-native/package.json | 2 +- .../pluggableWidgets/background-gradient-native/src/package.xml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/pluggableWidgets/background-gradient-native/package.json b/packages/pluggableWidgets/background-gradient-native/package.json index 4c5643f63..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" 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 @@ - + From 332c018609aa8be8eee3410624d55c0eb02c37c4 Mon Sep 17 00:00:00 2001 From: MxKevinBeqo Date: Wed, 9 Sep 2026 11:54:32 +0200 Subject: [PATCH 4/6] chore(background-gradient-native): add changelog --- .../pluggableWidgets/background-gradient-native/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) 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. From 81eb1aa1fce82a30dee028f270c9a173937c2e17 Mon Sep 17 00:00:00 2001 From: MxKevinBeqo Date: Thu, 10 Sep 2026 12:22:02 +0200 Subject: [PATCH 5/6] fix(background-gradient-native): address review about offset parsing --- .../background-gradient-native/src/BackgroundGradient.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/pluggableWidgets/background-gradient-native/src/BackgroundGradient.tsx b/packages/pluggableWidgets/background-gradient-native/src/BackgroundGradient.tsx index 55ce90089..1aa86366f 100644 --- a/packages/pluggableWidgets/background-gradient-native/src/BackgroundGradient.tsx +++ b/packages/pluggableWidgets/background-gradient-native/src/BackgroundGradient.tsx @@ -39,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) ); From 19240b217749e7fb22f7535f3a67a2933678b716 Mon Sep 17 00:00:00 2001 From: MxKevinBeqo Date: Thu, 10 Sep 2026 12:22:36 +0200 Subject: [PATCH 6/6] test(background-gradient-native): update snapshots and add new test --- .../backgroundGradient.spec.tsx.snap | 4 ++-- .../src/__tests__/backgroundGradient.spec.tsx | 22 +++++++++++++++++++ 2 files changed, 24 insertions(+), 2 deletions(-) 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 9270621e8..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 @@ -50,13 +50,13 @@ exports[`Background gradient render background gradient with custom style 1`] = { "color": "#fff", "positions": [ - "NaN%", + "0%", ], }, { "color": "#000", "positions": [ - "NaN%", + "100%", ], }, ], 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(); 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().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,