react-native-linear-gradient-fabric 0.1.0 → 0.1.1

package/android/src/main/java/com/lineargradientfabric/LinearGradientView.kt

@@ -67,7 +67,7 @@ class LinearGradientView(context: Context) : FrameLayout(context) {
     }
 
     override fun onDraw(canvas: Canvas) {
-        if (colors.size < 2 || width == 0 || height == 0) {
+        if (colors.size < 2 || width <= 0 || height <= 0) {
             super.onDraw(canvas)
             return
         }

package/ios/LinearGradientView.m

@@ -10,6 +10,7 @@
     if (self = [super initWithFrame:frame]) {
         _gradientLayer = [CAGradientLayer layer];
         _gradientLayer.frame = self.bounds;
+        _gradientLayer.zPosition = -1000;
         [self.layer insertSublayer:_gradientLayer atIndex:0];
 
         // Set default values
@@ -26,6 +27,7 @@
 {
     [super layoutSubviews];
     _gradientLayer.frame = self.bounds;
+    [self updateGradient];
 }
 
 - (void)setColors:(NSArray<NSNumber *> *)colors
@@ -72,6 +74,11 @@
 
 - (void)updateGradient
 {
+    // Guard against zero-dimension bounds (iOS 17+ crash fix, see issue #652)
+    if (self.bounds.size.width <= 0 || self.bounds.size.height <= 0) {
+        return;
+    }
+
     if (!_colors || _colors.count == 0) {
         return;
     }

package/ios/LinearGradientViewComponentView.mm

@@ -40,6 +40,7 @@ using namespace facebook::react;
 
         _gradientLayer = [CAGradientLayer layer];
         _gradientLayer.frame = self.bounds;
+        _gradientLayer.zPosition = -1000;
         [self.layer insertSublayer:_gradientLayer atIndex:0];
 
         // Set default values
@@ -59,6 +60,7 @@ using namespace facebook::react;
 {
     [super layoutSubviews];
     _gradientLayer.frame = self.bounds;
+    [self updateGradient];
 }
 
 - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps
@@ -98,6 +100,11 @@ using namespace facebook::react;
 
 - (void)updateGradient
 {
+    // Guard against zero-dimension bounds (iOS 17+ crash fix, see issue #652)
+    if (self.bounds.size.width <= 0 || self.bounds.size.height <= 0) {
+        return;
+    }
+
     if (_colors.empty()) {
         return;
     }

package/lib/commonjs/LinearGradientNativeComponent.js.map

@@ -1 +1 @@
-{"version":3,"names":["_codegenNativeComponent","_interopRequireDefault","require","e","__esModule","default","_default","exports","codegenNativeComponent"],"sourceRoot":"../../src","sources":["LinearGradientNativeComponent.ts"],"mappings":";;;;;;AACA,IAAAA,uBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAA6F,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,IAAAG,QAAA,GAAAC,OAAA,CAAAF,OAAA,GAuC9E,IAAAG,+BAAsB,EACnC,oBACF,CAAC","ignoreList":[]}
+{"version":3,"names":["_codegenNativeComponent","_interopRequireDefault","require","e","__esModule","default","_default","exports","codegenNativeComponent"],"sourceRoot":"../../src","sources":["LinearGradientNativeComponent.ts"],"mappings":";;;;;;AAEA,IAAAA,uBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAA6F,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,IAAAG,QAAA,GAAAC,OAAA,CAAAF,OAAA,GAsC9E,IAAAG,+BAAsB,EACnC,oBACF,CAAC","ignoreList":[]}

package/lib/commonjs/index.js

@@ -23,14 +23,96 @@ const DEFAULT_ANGLE_CENTER = {
   x: 0.5,
   y: 0.5
 };
+
+/**
+ * Check if a processed color has zero alpha (fully transparent).
+ * React Native processColor returns ARGB format where alpha is in the highest byte.
+ */
+function isTransparentColor(colorInt) {
+  // Extract alpha from ARGB format (bits 24-31)
+  const alpha = colorInt >>> 24 & 0xff;
+  return alpha === 0;
+}
+
+/**
+ * Get the RGB components from a processed color (ARGB format).
+ */
+function getRGB(colorInt) {
+  return {
+    r: colorInt >>> 16 & 0xff,
+    g: colorInt >>> 8 & 0xff,
+    b: colorInt & 0xff
+  };
+}
+
+/**
+ * Create a color with specified RGB and alpha=0 (fully transparent).
+ */
+function createTransparentColor(r, g, b) {
+  // ARGB format: alpha=0 in highest byte
+  return (0 << 24 | r << 16 | g << 8 | b) >>> 0;
+}
+
+/**
+ * Fix transparent colors in gradients to avoid grey interpolation artifacts.
+ *
+ * When interpolating from 'transparent' (rgba(0,0,0,0)) to a color like white,
+ * the gradient interpolates all RGBA channels, resulting in grey midtones.
+ * This function replaces fully transparent colors with transparent versions
+ * of their nearest opaque neighbor, ensuring smooth color transitions.
+ *
+ * See: https://github.com/react-native-linear-gradient/react-native-linear-gradient/issues/691
+ */
+function fixTransparentColors(colors) {
+  const result = [...colors];
+  for (let i = 0; i < result.length; i++) {
+    const currentColor = result[i];
+    if (currentColor !== undefined && isTransparentColor(currentColor)) {
+      // Find nearest non-transparent color to inherit RGB from
+      let nearestOpaqueIdx = -1;
+      let minDistance = Infinity;
+      for (let j = 0; j < result.length; j++) {
+        const candidateColor = result[j];
+        if (i !== j && candidateColor !== undefined && !isTransparentColor(candidateColor)) {
+          const distance = Math.abs(i - j);
+          if (distance < minDistance) {
+            minDistance = distance;
+            nearestOpaqueIdx = j;
+          }
+        }
+      }
+
+      // If we found a non-transparent color, use its RGB values
+      const nearestColor = nearestOpaqueIdx !== -1 ? result[nearestOpaqueIdx] : undefined;
+      if (nearestColor !== undefined) {
+        const {
+          r,
+          g,
+          b
+        } = getRGB(nearestColor);
+        result[i] = createTransparentColor(r, g, b);
+      }
+      // If all colors are transparent, leave as-is (nothing to fix)
+    }
+  }
+  return result;
+}
 function processColors(colors) {
-  return colors.map(color => {
-    const processed = (0, _reactNative.processColor)(color);
-    if (processed === null || processed === undefined) {
+  const processed = colors.map(color => {
+    const result = (0, _reactNative.processColor)(color);
+    if (result === null || result === undefined) {
       throw new Error(`Invalid color value: ${String(color)}`);
     }
-    return typeof processed === 'number' ? processed : 0;
+    if (typeof result === 'number') {
+      return result;
+    }
+    // OpaqueColorValue (symbol type) or other non-number values
+    // This can happen with platform-specific color types
+    throw new Error(`Unsupported color type: ${String(color)}. Only standard color values are supported.`);
   });
+
+  // Fix transparent colors to prevent grey gradient artifacts
+  return fixTransparentColors(processed);
 }
 function validateLocations(locations, colorsLength) {
   if (!locations) {
@@ -39,7 +121,9 @@ function validateLocations(locations, colorsLength) {
   if (locations.length !== colorsLength) {
     console.warn(`LinearGradient: locations array length (${locations.length}) does not match colors array length (${colorsLength})`);
   }
-  return locations;
+
+  // Clamp location values to [0, 1] range for iOS CAGradientLayer compatibility
+  return locations.map(value => Math.max(0, Math.min(1, value)));
 }
 function LinearGradient({
   colors,

package/lib/commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","_interopRequireWildcard","require","_reactNative","_LinearGradientNativeComponent","_interopRequireDefault","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","DEFAULT_START","x","y","DEFAULT_END","DEFAULT_ANGLE_CENTER","processColors","colors","map","color","processed","processColor","undefined","Error","String","validateLocations","locations","colorsLength","console","warn","LinearGradient","start","end","useAngle","angle","angleCenter","style","children","rest","processedColors","useMemo","validatedLocations","createElement","StyleSheet","flatten","startPoint","endPoint","_default","exports"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","_interopRequireWildcard","require","_reactNative","_LinearGradientNativeComponent","_interopRequireDefault","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","DEFAULT_START","x","y","DEFAULT_END","DEFAULT_ANGLE_CENTER","isTransparentColor","colorInt","alpha","getRGB","g","b","createTransparentColor","fixTransparentColors","colors","result","currentColor","undefined","nearestOpaqueIdx","minDistance","Infinity","j","candidateColor","distance","Math","abs","nearestColor","processColors","processed","map","color","processColor","Error","String","validateLocations","locations","colorsLength","console","warn","value","max","min","LinearGradient","start","end","useAngle","angle","angleCenter","style","children","rest","processedColors","useMemo","validatedLocations","createElement","StyleSheet","flatten","startPoint","endPoint","_default","exports"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;;;;;;AAAA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,YAAA,GAAAD,OAAA;AAEA,IAAAE,8BAAA,GAAAC,sBAAA,CAAAH,OAAA;AAA4E,SAAAG,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAL,wBAAAK,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAT,uBAAA,YAAAA,CAAAK,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AAAA,SAAAgB,SAAA,WAAAA,QAAA,GAAAH,MAAA,CAAAI,MAAA,GAAAJ,MAAA,CAAAI,MAAA,CAAAC,IAAA,eAAAf,CAAA,aAAAN,CAAA,MAAAA,CAAA,GAAAsB,SAAA,CAAAC,MAAA,EAAAvB,CAAA,UAAAG,CAAA,GAAAmB,SAAA,CAAAtB,CAAA,YAAAK,CAAA,IAAAF,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAZ,CAAA,EAAAE,CAAA,MAAAC,CAAA,CAAAD,CAAA,IAAAF,CAAA,CAAAE,CAAA,aAAAC,CAAA,KAAAa,QAAA,CAAAK,KAAA,OAAAF,SAAA;AA6C5E,MAAMG,aAAoB,GAAG;EAAEC,CAAC,EAAE,GAAG;EAAEC,CAAC,EAAE;AAAE,CAAC;AAC7C,MAAMC,WAAkB,GAAG;EAAEF,CAAC,EAAE,GAAG;EAAEC,CAAC,EAAE;AAAE,CAAC;AAC3C,MAAME,oBAA2B,GAAG;EAAEH,CAAC,EAAE,GAAG;EAAEC,CAAC,EAAE;AAAI,CAAC;;AAEtD;AACA;AACA;AACA;AACA,SAASG,kBAAkBA,CAACC,QAAgB,EAAW;EACrD;EACA,MAAMC,KAAK,GAAID,QAAQ,KAAK,EAAE,GAAI,IAAI;EACtC,OAAOC,KAAK,KAAK,CAAC;AACpB;;AAEA;AACA;AACA;AACA,SAASC,MAAMA,CAACF,QAAgB,EAAuC;EACrE,OAAO;IACL1B,CAAC,EAAG0B,QAAQ,KAAK,EAAE,GAAI,IAAI;IAC3BG,CAAC,EAAGH,QAAQ,KAAK,CAAC,GAAI,IAAI;IAC1BI,CAAC,EAAEJ,QAAQ,GAAG;EAChB,CAAC;AACH;;AAEA;AACA;AACA;AACA,SAASK,sBAAsBA,CAAC/B,CAAS,EAAE6B,CAAS,EAAEC,CAAS,EAAU;EACvE;EACA,OAAO,CAAE,CAAC,IAAI,EAAE,GAAK9B,CAAC,IAAI,EAAG,GAAI6B,CAAC,IAAI,CAAE,GAAGC,CAAC,MAAM,CAAC;AACrD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASE,oBAAoBA,CAACC,MAAgB,EAAY;EACxD,MAAMC,MAAM,GAAG,CAAC,GAAGD,MAAM,CAAC;EAE1B,KAAK,IAAI9B,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAG+B,MAAM,CAAChB,MAAM,EAAEf,CAAC,EAAE,EAAE;IACtC,MAAMgC,YAAY,GAAGD,MAAM,CAAC/B,CAAC,CAAC;IAC9B,IAAIgC,YAAY,KAAKC,SAAS,IAAIX,kBAAkB,CAACU,YAAY,CAAC,EAAE;MAClE;MACA,IAAIE,gBAAgB,GAAG,CAAC,CAAC;MACzB,IAAIC,WAAW,GAAGC,QAAQ;MAE1B,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGN,MAAM,CAAChB,MAAM,EAAEsB,CAAC,EAAE,EAAE;QACtC,MAAMC,cAAc,GAAGP,MAAM,CAACM,CAAC,CAAC;QAChC,IACErC,CAAC,KAAKqC,CAAC,IACPC,cAAc,KAAKL,SAAS,IAC5B,CAACX,kBAAkB,CAACgB,cAAc,CAAC,EACnC;UACA,MAAMC,QAAQ,GAAGC,IAAI,CAACC,GAAG,CAACzC,CAAC,GAAGqC,CAAC,CAAC;UAChC,IAAIE,QAAQ,GAAGJ,WAAW,EAAE;YAC1BA,WAAW,GAAGI,QAAQ;YACtBL,gBAAgB,GAAGG,CAAC;UACtB;QACF;MACF;;MAEA;MACA,MAAMK,YAAY,GAChBR,gBAAgB,KAAK,CAAC,CAAC,GAAGH,MAAM,CAACG,gBAAgB,CAAC,GAAGD,SAAS;MAChE,IAAIS,YAAY,KAAKT,SAAS,EAAE;QAC9B,MAAM;UAAEpC,CAAC;UAAE6B,CAAC;UAAEC;QAAE,CAAC,GAAGF,MAAM,CAACiB,YAAY,CAAC;QACxCX,MAAM,CAAC/B,CAAC,CAAC,GAAG4B,sBAAsB,CAAC/B,CAAC,EAAE6B,CAAC,EAAEC,CAAC,CAAC;MAC7C;MACA;IACF;EACF;EAEA,OAAOI,MAAM;AACf;AAEA,SAASY,aAAaA,CAACb,MAAoB,EAAY;EACrD,MAAMc,SAAS,GAAGd,MAAM,CAACe,GAAG,CAAEC,KAAK,IAAK;IACtC,MAAMf,MAAM,GAAG,IAAAgB,yBAAY,EAACD,KAAK,CAAC;IAClC,IAAIf,MAAM,KAAK,IAAI,IAAIA,MAAM,KAAKE,SAAS,EAAE;MAC3C,MAAM,IAAIe,KAAK,CAAC,wBAAwBC,MAAM,CAACH,KAAK,CAAC,EAAE,CAAC;IAC1D;IACA,IAAI,OAAOf,MAAM,KAAK,QAAQ,EAAE;MAC9B,OAAOA,MAAM;IACf;IACA;IACA;IACA,MAAM,IAAIiB,KAAK,CACb,2BAA2BC,MAAM,CAACH,KAAK,CAAC,6CAC1C,CAAC;EACH,CAAC,CAAC;;EAEF;EACA,OAAOjB,oBAAoB,CAACe,SAAS,CAAC;AACxC;AAEA,SAASM,iBAAiBA,CACxBC,SAA+B,EAC/BC,YAAoB,EACE;EACtB,IAAI,CAACD,SAAS,EAAE;IACd,OAAOlB,SAAS;EAClB;EAEA,IAAIkB,SAAS,CAACpC,MAAM,KAAKqC,YAAY,EAAE;IACrCC,OAAO,CAACC,IAAI,CACV,2CAA2CH,SAAS,CAACpC,MAAM,yCAAyCqC,YAAY,GAClH,CAAC;EACH;;EAEA;EACA,OAAOD,SAAS,CAACN,GAAG,CAAEU,KAAK,IAAKf,IAAI,CAACgB,GAAG,CAAC,CAAC,EAAEhB,IAAI,CAACiB,GAAG,CAAC,CAAC,EAAEF,KAAK,CAAC,CAAC,CAAC;AAClE;AAEO,SAASG,cAAcA,CAAC;EAC7B5B,MAAM;EACNqB,SAAS;EACTQ,KAAK,GAAG1C,aAAa;EACrB2C,GAAG,GAAGxC,WAAW;EACjByC,QAAQ,GAAG,KAAK;EAChBC,KAAK,GAAG,CAAC;EACTC,WAAW,GAAG1C,oBAAoB;EAClC2C,KAAK;EACLC,QAAQ;EACR,GAAGC;AACgB,CAAC,EAAsB;EAC1C,IAAIpC,MAAM,CAACf,MAAM,GAAG,CAAC,EAAE;IACrB,MAAM,IAAIiC,KAAK,CAAC,2CAA2C,CAAC;EAC9D;EAEA,MAAMmB,eAAe,GAAGjF,KAAK,CAACkF,OAAO,CAAC,MAAMzB,aAAa,CAACb,MAAM,CAAC,EAAE,CAACA,MAAM,CAAC,CAAC;EAC5E,MAAMuC,kBAAkB,GAAGnF,KAAK,CAACkF,OAAO,CACtC,MAAMlB,iBAAiB,CAACC,SAAS,EAAErB,MAAM,CAACf,MAAM,CAAC,EACjD,CAACoC,SAAS,EAAErB,MAAM,CAACf,MAAM,CAC3B,CAAC;EAED,oBACE7B,KAAA,CAAAoF,aAAA,CAAChF,8BAAA,CAAAI,OAA6B,EAAAiB,QAAA,KACxBuD,IAAI;IACRF,KAAK,EAAEO,uBAAU,CAACC,OAAO,CAACR,KAAK,CAAE;IACjClC,MAAM,EAAEqC,eAAgB;IACxBhB,SAAS,EAAEkB,kBAAmB;IAC9BI,UAAU,EAAEd,KAAM;IAClBe,QAAQ,EAAEd,GAAI;IACdC,QAAQ,EAAEA,QAAS;IACnBC,KAAK,EAAEA,KAAM;IACbC,WAAW,EAAEA;EAAY,IAExBE,QAC4B,CAAC;AAEpC;AAAC,IAAAU,QAAA,GAAAC,OAAA,CAAAlF,OAAA,GAEcgE,cAAc","ignoreList":[]}

package/lib/module/LinearGradientNativeComponent.js.map

@@ -1 +1 @@
-{"version":3,"names":["codegenNativeComponent"],"sourceRoot":"../../src","sources":["LinearGradientNativeComponent.ts"],"mappings":"AACA,OAAOA,sBAAsB,MAAM,yDAAyD;AAuC5F,eAAeA,sBAAsB,CACnC,oBACF,CAAC","ignoreList":[]}
+{"version":3,"names":["codegenNativeComponent"],"sourceRoot":"../../src","sources":["LinearGradientNativeComponent.ts"],"mappings":"AAEA,OAAOA,sBAAsB,MAAM,yDAAyD;AAsC5F,eAAeA,sBAAsB,CACnC,oBACF,CAAC","ignoreList":[]}

package/lib/module/index.js

@@ -14,14 +14,96 @@ const DEFAULT_ANGLE_CENTER = {
   x: 0.5,
   y: 0.5
 };
+
+/**
+ * Check if a processed color has zero alpha (fully transparent).
+ * React Native processColor returns ARGB format where alpha is in the highest byte.
+ */
+function isTransparentColor(colorInt) {
+  // Extract alpha from ARGB format (bits 24-31)
+  const alpha = colorInt >>> 24 & 0xff;
+  return alpha === 0;
+}
+
+/**
+ * Get the RGB components from a processed color (ARGB format).
+ */
+function getRGB(colorInt) {
+  return {
+    r: colorInt >>> 16 & 0xff,
+    g: colorInt >>> 8 & 0xff,
+    b: colorInt & 0xff
+  };
+}
+
+/**
+ * Create a color with specified RGB and alpha=0 (fully transparent).
+ */
+function createTransparentColor(r, g, b) {
+  // ARGB format: alpha=0 in highest byte
+  return (0 << 24 | r << 16 | g << 8 | b) >>> 0;
+}
+
+/**
+ * Fix transparent colors in gradients to avoid grey interpolation artifacts.
+ *
+ * When interpolating from 'transparent' (rgba(0,0,0,0)) to a color like white,
+ * the gradient interpolates all RGBA channels, resulting in grey midtones.
+ * This function replaces fully transparent colors with transparent versions
+ * of their nearest opaque neighbor, ensuring smooth color transitions.
+ *
+ * See: https://github.com/react-native-linear-gradient/react-native-linear-gradient/issues/691
+ */
+function fixTransparentColors(colors) {
+  const result = [...colors];
+  for (let i = 0; i < result.length; i++) {
+    const currentColor = result[i];
+    if (currentColor !== undefined && isTransparentColor(currentColor)) {
+      // Find nearest non-transparent color to inherit RGB from
+      let nearestOpaqueIdx = -1;
+      let minDistance = Infinity;
+      for (let j = 0; j < result.length; j++) {
+        const candidateColor = result[j];
+        if (i !== j && candidateColor !== undefined && !isTransparentColor(candidateColor)) {
+          const distance = Math.abs(i - j);
+          if (distance < minDistance) {
+            minDistance = distance;
+            nearestOpaqueIdx = j;
+          }
+        }
+      }
+
+      // If we found a non-transparent color, use its RGB values
+      const nearestColor = nearestOpaqueIdx !== -1 ? result[nearestOpaqueIdx] : undefined;
+      if (nearestColor !== undefined) {
+        const {
+          r,
+          g,
+          b
+        } = getRGB(nearestColor);
+        result[i] = createTransparentColor(r, g, b);
+      }
+      // If all colors are transparent, leave as-is (nothing to fix)
+    }
+  }
+  return result;
+}
 function processColors(colors) {
-  return colors.map(color => {
-    const processed = processColor(color);
-    if (processed === null || processed === undefined) {
+  const processed = colors.map(color => {
+    const result = processColor(color);
+    if (result === null || result === undefined) {
       throw new Error(`Invalid color value: ${String(color)}`);
     }
-    return typeof processed === 'number' ? processed : 0;
+    if (typeof result === 'number') {
+      return result;
+    }
+    // OpaqueColorValue (symbol type) or other non-number values
+    // This can happen with platform-specific color types
+    throw new Error(`Unsupported color type: ${String(color)}. Only standard color values are supported.`);
   });
+
+  // Fix transparent colors to prevent grey gradient artifacts
+  return fixTransparentColors(processed);
 }
 function validateLocations(locations, colorsLength) {
   if (!locations) {
@@ -30,7 +112,9 @@ function validateLocations(locations, colorsLength) {
   if (locations.length !== colorsLength) {
     console.warn(`LinearGradient: locations array length (${locations.length}) does not match colors array length (${colorsLength})`);
   }
-  return locations;
+
+  // Clamp location values to [0, 1] range for iOS CAGradientLayer compatibility
+  return locations.map(value => Math.max(0, Math.min(1, value)));
 }
 export function LinearGradient({
   colors,

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","processColor","StyleSheet","LinearGradientNativeComponent","DEFAULT_START","x","y","DEFAULT_END","DEFAULT_ANGLE_CENTER","processColors","colors","map","color","processed","undefined","Error","String","validateLocations","locations","colorsLength","length","console","warn","LinearGradient","start","end","useAngle","angle","angleCenter","style","children","rest","processedColors","useMemo","validatedLocations","createElement","_extends","flatten","startPoint","endPoint"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SAASC,YAAY,EAAEC,UAAU,QAAQ,cAAc;AAEvD,OAAOC,6BAA6B,MAAM,iCAAiC;AAqD3E,MAAMC,aAAoB,GAAG;EAAEC,CAAC,EAAE,GAAG;EAAEC,CAAC,EAAE;AAAE,CAAC;AAC7C,MAAMC,WAAkB,GAAG;EAAEF,CAAC,EAAE,GAAG;EAAEC,CAAC,EAAE;AAAE,CAAC;AAC3C,MAAME,oBAA2B,GAAG;EAAEH,CAAC,EAAE,GAAG;EAAEC,CAAC,EAAE;AAAI,CAAC;AAEtD,SAASG,aAAaA,CAACC,MAAoB,EAAY;EACrD,OAAOA,MAAM,CAACC,GAAG,CAAEC,KAAK,IAAK;IAC3B,MAAMC,SAAS,GAAGZ,YAAY,CAACW,KAAK,CAAC;IACrC,IAAIC,SAAS,KAAK,IAAI,IAAIA,SAAS,KAAKC,SAAS,EAAE;MACjD,MAAM,IAAIC,KAAK,CAAC,wBAAwBC,MAAM,CAACJ,KAAK,CAAC,EAAE,CAAC;IAC1D;IACA,OAAO,OAAOC,SAAS,KAAK,QAAQ,GAAGA,SAAS,GAAG,CAAC;EACtD,CAAC,CAAC;AACJ;AAEA,SAASI,iBAAiBA,CACxBC,SAA+B,EAC/BC,YAAoB,EACE;EACtB,IAAI,CAACD,SAAS,EAAE;IACd,OAAOJ,SAAS;EAClB;EAEA,IAAII,SAAS,CAACE,MAAM,KAAKD,YAAY,EAAE;IACrCE,OAAO,CAACC,IAAI,CACV,2CAA2CJ,SAAS,CAACE,MAAM,yCAAyCD,YAAY,GAClH,CAAC;EACH;EAEA,OAAOD,SAAS;AAClB;AAEA,OAAO,SAASK,cAAcA,CAAC;EAC7Bb,MAAM;EACNQ,SAAS;EACTM,KAAK,GAAGpB,aAAa;EACrBqB,GAAG,GAAGlB,WAAW;EACjBmB,QAAQ,GAAG,KAAK;EAChBC,KAAK,GAAG,CAAC;EACTC,WAAW,GAAGpB,oBAAoB;EAClCqB,KAAK;EACLC,QAAQ;EACR,GAAGC;AACgB,CAAC,EAAsB;EAC1C,IAAIrB,MAAM,CAACU,MAAM,GAAG,CAAC,EAAE;IACrB,MAAM,IAAIL,KAAK,CAAC,2CAA2C,CAAC;EAC9D;EAEA,MAAMiB,eAAe,GAAGhC,KAAK,CAACiC,OAAO,CAAC,MAAMxB,aAAa,CAACC,MAAM,CAAC,EAAE,CAACA,MAAM,CAAC,CAAC;EAC5E,MAAMwB,kBAAkB,GAAGlC,KAAK,CAACiC,OAAO,CACtC,MAAMhB,iBAAiB,CAACC,SAAS,EAAER,MAAM,CAACU,MAAM,CAAC,EACjD,CAACF,SAAS,EAAER,MAAM,CAACU,MAAM,CAC3B,CAAC;EAED,oBACEpB,KAAA,CAAAmC,aAAA,CAAChC,6BAA6B,EAAAiC,QAAA,KACxBL,IAAI;IACRF,KAAK,EAAE3B,UAAU,CAACmC,OAAO,CAACR,KAAK,CAAE;IACjCnB,MAAM,EAAEsB,eAAgB;IACxBd,SAAS,EAAEgB,kBAAmB;IAC9BI,UAAU,EAAEd,KAAM;IAClBe,QAAQ,EAAEd,GAAI;IACdC,QAAQ,EAAEA,QAAS;IACnBC,KAAK,EAAEA,KAAM;IACbC,WAAW,EAAEA;EAAY,IAExBE,QAC4B,CAAC;AAEpC;AAEA,eAAeP,cAAc","ignoreList":[]}
+{"version":3,"names":["React","processColor","StyleSheet","LinearGradientNativeComponent","DEFAULT_START","x","y","DEFAULT_END","DEFAULT_ANGLE_CENTER","isTransparentColor","colorInt","alpha","getRGB","r","g","b","createTransparentColor","fixTransparentColors","colors","result","i","length","currentColor","undefined","nearestOpaqueIdx","minDistance","Infinity","j","candidateColor","distance","Math","abs","nearestColor","processColors","processed","map","color","Error","String","validateLocations","locations","colorsLength","console","warn","value","max","min","LinearGradient","start","end","useAngle","angle","angleCenter","style","children","rest","processedColors","useMemo","validatedLocations","createElement","_extends","flatten","startPoint","endPoint"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/typescript/src/LinearGradientNativeComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LinearGradientNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/LinearGradientNativeComponent.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,2CAA2C,CAAC;AAE9E,MAAM,WAAW,yBAAyB;IACxC,CAAC,EAAE,KAAK,CAAC;IACT,CAAC,EAAE,KAAK,CAAC;CACV;AAED,MAAM,WAAW,yBAA0B,SAAQ,SAAS;IAC1D;;OAEG;IACH,MAAM,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;IAC7B;;OAEG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;IACjC;;OAEG;IACH,UAAU,CAAC,EAAE,yBAAyB,CAAC;IACvC;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC;IACrC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,yBAAyB,CAAC;CACzC;;AAED,wBAEE"}
+{"version":3,"file":"LinearGradientNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/LinearGradientNativeComponent.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,2CAA2C,CAAC;AAG9E,MAAM,WAAW,yBAAyB;IACxC,CAAC,EAAE,KAAK,CAAC;IACT,CAAC,EAAE,KAAK,CAAC;CACV;AAED,MAAM,WAAW,yBAA0B,SAAQ,SAAS;IAC1D;;OAEG;IACH,MAAM,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;IAC7B;;OAEG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;IACjC;;OAEG;IACH,UAAU,CAAC,EAAE,yBAAyB,CAAC;IACvC;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC;IACrC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,yBAAyB,CAAC;CACzC;;AAED,wBAEE"}

package/lib/typescript/src/index.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import type { ColorValue, StyleProp, ViewStyle } from 'react-native';
+import type { ColorValue, ViewProps } from 'react-native';
 export interface Point {
     x: number;
     y: number;
 }
-export interface LinearGradientProps {
+export interface LinearGradientProps extends ViewProps {
     /**
      * An array of at least 2 colors that represent gradient colors
      */
@@ -40,14 +40,6 @@ export interface LinearGradientProps {
      * Default: { x: 0.5, y: 0.5 }
      */
     angleCenter?: Point;
-    /**
-     * Style for the gradient view
-     */
-    style?: StyleProp<ViewStyle>;
-    /**
-     * Children elements to render on top of the gradient
-     */
-    children?: React.ReactNode;
 }
 export declare function LinearGradient({ colors, locations, start, end, useAngle, angle, angleCenter, style, children, ...rest }: LinearGradientProps): React.ReactElement;
 export default LinearGradient;

package/lib/typescript/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAKrE,MAAM,WAAW,KAAK;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;;OAGG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC;IACZ;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAiCD,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,SAAS,EACT,KAAqB,EACrB,GAAiB,EACjB,QAAgB,EAChB,KAAS,EACT,WAAkC,EAClC,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,mBAAmB,GAAG,KAAK,CAAC,YAAY,CA0B1C;AAED,eAAe,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAK1D,MAAM,WAAW,KAAK;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD;;OAEG;IACH,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;;OAGG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC;IACZ;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB;AA0HD,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,SAAS,EACT,KAAqB,EACrB,GAAiB,EACjB,QAAgB,EAChB,KAAS,EACT,WAAkC,EAClC,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,mBAAmB,GAAG,KAAK,CAAC,YAAY,CA0B1C;AAED,eAAe,cAAc,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-linear-gradient-fabric",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "A modern replacement for react-native-linear-gradient with full Fabric support",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/LinearGradientNativeComponent.ts

@@ -1,6 +1,6 @@
 import type { ViewProps } from 'react-native';
-import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 import type { Float, Int32 } from 'react-native/Libraries/Types/CodegenTypes';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 
 export interface NativeLinearGradientPoint {
   x: Float;

package/src/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ColorValue, StyleProp, ViewStyle } from 'react-native';
+import type { ColorValue, ViewProps } from 'react-native';
 import { processColor, StyleSheet } from 'react-native';
 
 import LinearGradientNativeComponent from './LinearGradientNativeComponent';
@@ -9,7 +9,7 @@ export interface Point {
   y: number;
 }
 
-export interface LinearGradientProps {
+export interface LinearGradientProps extends ViewProps {
   /**
    * An array of at least 2 colors that represent gradient colors
    */
@@ -45,28 +45,108 @@ export interface LinearGradientProps {
    * Default: { x: 0.5, y: 0.5 }
    */
   angleCenter?: Point;
-  /**
-   * Style for the gradient view
-   */
-  style?: StyleProp<ViewStyle>;
-  /**
-   * Children elements to render on top of the gradient
-   */
-  children?: React.ReactNode;
 }
 
 const DEFAULT_START: Point = { x: 0.5, y: 0 };
 const DEFAULT_END: Point = { x: 0.5, y: 1 };
 const DEFAULT_ANGLE_CENTER: Point = { x: 0.5, y: 0.5 };
 
+/**
+ * Check if a processed color has zero alpha (fully transparent).
+ * React Native processColor returns ARGB format where alpha is in the highest byte.
+ */
+function isTransparentColor(colorInt: number): boolean {
+  // Extract alpha from ARGB format (bits 24-31)
+  const alpha = (colorInt >>> 24) & 0xff;
+  return alpha === 0;
+}
+
+/**
+ * Get the RGB components from a processed color (ARGB format).
+ */
+function getRGB(colorInt: number): { r: number; g: number; b: number } {
+  return {
+    r: (colorInt >>> 16) & 0xff,
+    g: (colorInt >>> 8) & 0xff,
+    b: colorInt & 0xff,
+  };
+}
+
+/**
+ * Create a color with specified RGB and alpha=0 (fully transparent).
+ */
+function createTransparentColor(r: number, g: number, b: number): number {
+  // ARGB format: alpha=0 in highest byte
+  return ((0 << 24) | (r << 16) | (g << 8) | b) >>> 0;
+}
+
+/**
+ * Fix transparent colors in gradients to avoid grey interpolation artifacts.
+ *
+ * When interpolating from 'transparent' (rgba(0,0,0,0)) to a color like white,
+ * the gradient interpolates all RGBA channels, resulting in grey midtones.
+ * This function replaces fully transparent colors with transparent versions
+ * of their nearest opaque neighbor, ensuring smooth color transitions.
+ *
+ * See: https://github.com/react-native-linear-gradient/react-native-linear-gradient/issues/691
+ */
+function fixTransparentColors(colors: number[]): number[] {
+  const result = [...colors];
+
+  for (let i = 0; i < result.length; i++) {
+    const currentColor = result[i];
+    if (currentColor !== undefined && isTransparentColor(currentColor)) {
+      // Find nearest non-transparent color to inherit RGB from
+      let nearestOpaqueIdx = -1;
+      let minDistance = Infinity;
+
+      for (let j = 0; j < result.length; j++) {
+        const candidateColor = result[j];
+        if (
+          i !== j &&
+          candidateColor !== undefined &&
+          !isTransparentColor(candidateColor)
+        ) {
+          const distance = Math.abs(i - j);
+          if (distance < minDistance) {
+            minDistance = distance;
+            nearestOpaqueIdx = j;
+          }
+        }
+      }
+
+      // If we found a non-transparent color, use its RGB values
+      const nearestColor =
+        nearestOpaqueIdx !== -1 ? result[nearestOpaqueIdx] : undefined;
+      if (nearestColor !== undefined) {
+        const { r, g, b } = getRGB(nearestColor);
+        result[i] = createTransparentColor(r, g, b);
+      }
+      // If all colors are transparent, leave as-is (nothing to fix)
+    }
+  }
+
+  return result;
+}
+
 function processColors(colors: ColorValue[]): number[] {
-  return colors.map((color) => {
-    const processed = processColor(color);
-    if (processed === null || processed === undefined) {
+  const processed = colors.map((color) => {
+    const result = processColor(color);
+    if (result === null || result === undefined) {
       throw new Error(`Invalid color value: ${String(color)}`);
     }
-    return typeof processed === 'number' ? processed : 0;
+    if (typeof result === 'number') {
+      return result;
+    }
+    // OpaqueColorValue (symbol type) or other non-number values
+    // This can happen with platform-specific color types
+    throw new Error(
+      `Unsupported color type: ${String(color)}. Only standard color values are supported.`
+    );
   });
+
+  // Fix transparent colors to prevent grey gradient artifacts
+  return fixTransparentColors(processed);
 }
 
 function validateLocations(
@@ -83,7 +163,8 @@ function validateLocations(
     );
   }
 
-  return locations;
+  // Clamp location values to [0, 1] range for iOS CAGradientLayer compatibility
+  return locations.map((value) => Math.max(0, Math.min(1, value)));
 }
 
 export function LinearGradient({