jfs-components 0.1.17 → 0.1.18

package/lib/module/utils/GlassFill/GlassFill.js

@@ -3,7 +3,6 @@
 import React, { useId } from 'react';
 import { View, StyleSheet, Platform, UIManager } from 'react-native';
 import { BlurView } from '@react-native-community/blur';
-import MaskedView from '@react-native-masked-view/masked-view';
 import Svg, { Defs, LinearGradient, Stop, Rect } from 'react-native-svg';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const DEFAULT_FALLBACK_DARK = '#1414174a';
@@ -14,32 +13,30 @@ const DEFAULT_FALLBACK_LIGHT = '#ffffff66';
 const NATIVE_BLUR_NAME = Platform.OS === 'android' ? 'AndroidBlurView' : 'BlurView';
 
 /**
- * Alpha stop on a layer's vertical reveal mask. `offset` is the vertical
- * position (0 = top of the surface, 1 = bottom); `opacity` is the mask alpha
- * there (0 = layer hidden / fully clear, 1 = layer fully applied).
+ * Alpha stop on the no-native-blur fallback gradient. `offset` is the vertical
+ * position (0 = top of the surface, 1 = bottom); `opacity` is the tint alpha
+ * there (0 = fully clear, 1 = full fallback color).
  *
- * Using several stops (rather than a single linear 0 → 1 ramp) lets each layer
- * EASE in, so the blur swells smoothly toward the bottom instead of appearing
- * along a hard horizontal seam. That soft S-curve is what gives the surface its
- * "glass" feel rather than a flat translucent panel.
+ * Using several stops (rather than a single linear 0 → 1 ramp) eases the tint
+ * in, so it swells smoothly toward the bottom instead of along a hard seam —
+ * the soft S-curve that gives the surface its "glass" feel.
  */
 
 /**
- * A single layer of the progressive ramp.
- *  - `stops` describe how this layer is revealed from top to bottom.
- *  - `amount` is this layer's share (0–1) of the max `blurAmount`.
+ * A single bottom-anchored band of the progressive blur stack.
+ *  - `start` is where the band begins, as a fraction from the top (0 = covers
+ *    the whole surface, 0.8 = only the bottom 20%). Each band runs from `start`
+ *    to the bottom.
+ *  - `amount` is the band's own blur strength as a share (0–1) of the peak.
  *
- * We stack just TWO layers on both platforms: a faint base blur that covers
- * most of the footer and a slightly stronger accent concentrated near the
- * bottom. Keeping the overlap shallow avoids compounding the dark tint of
- * multiple `BlurView`s (which is what made the earlier 3-layer ramp read as a
- * heavy block), while still giving a genuine variable-radius result — the blur
- * radius grows toward the bottom where the two layers overlap.
+ * Because each `BlurView` re-blurs everything rendered behind it, the bands
+ * COMPOUND where they overlap (toward the bottom), so the effective radius grows
+ * downward without any masking. The top region is covered only by the first,
+ * faint band; the bottom is covered by all of them.
  */
 
-// Base reveal: a faint trace of blur begins near the very top and grows
-// steadily downward, so the upper half still carries visible glass rather than
-// snapping clear. Also reused for the no-native-blur fallback scrim.
+// Eased tint ramp for the no-native-blur fallback scrim. A faint trace begins
+// near the very top and grows steadily downward.
 const BASE_MASK_STOPS = [{
   offset: 0.0,
   opacity: 0
@@ -56,26 +53,26 @@ const BASE_MASK_STOPS = [{
   offset: 1.0,
   opacity: 1
 }];
-const PROGRESSIVE_LAYERS = [{
-  amount: 0.65,
-  stops: BASE_MASK_STOPS
-},
-// Accent: the strongest blur, gathering over the lower portion for depth.
-{
-  amount: 1.0,
-  stops: [{
-    offset: 0.0,
-    opacity: 0
-  }, {
-    offset: 0.3,
-    opacity: 0.15
-  }, {
-    offset: 0.65,
-    opacity: 0.65
-  }, {
-    offset: 1.0,
-    opacity: 1
-  }]
+
+// Bottom-anchored blur bands (top → bottom). The first band is faint and covers
+// the whole surface so the top reads as barely-there glass; each subsequent band
+// starts lower and adds strength, compounding toward the bottom for a smooth
+// variable-radius result. Quadrature of these shares lands the bottom at ~peak.
+const PROGRESSIVE_BANDS = [{
+  start: 0.0,
+  amount: 0.18
+}, {
+  start: 0.3,
+  amount: 0.28
+}, {
+  start: 0.52,
+  amount: 0.38
+}, {
+  start: 0.7,
+  amount: 0.5
+}, {
+  start: 0.84,
+  amount: 0.6
 }];
 
 /**
@@ -108,13 +105,14 @@ const NATIVE_BLUR_SUPPORTED = (() => {
 })();
 
 /**
- * Vertical alpha-gradient mask drawn with `react-native-svg`. `MaskedView`
- * reveals its child in proportion to this mask's alpha, so feeding it an eased
- * multi-stop gradient makes the layer's blur swell in smoothly from top to
- * bottom instead of along a hard seam.
+ * Vertical color-gradient scrim drawn with `react-native-svg` — used as the
+ * no-native-blur fallback. Paints `color` at the eased per-stop alpha so the
+ * tint swells smoothly from clear (top) to full (bottom), exactly mirroring the
+ * old `MaskedView`-over-solid-color fallback but with no native-view masking.
  */
-function GradientMask({
+function GradientScrim({
   id,
+  color,
   stops
 }) {
   return /*#__PURE__*/_jsxs(Svg, {
@@ -129,7 +127,7 @@ function GradientMask({
         y2: "1",
         children: stops.map((s, i) => /*#__PURE__*/_jsx(Stop, {
           offset: s.offset,
-          stopColor: "#000000",
+          stopColor: color,
           stopOpacity: s.opacity
         }, i))
       })
@@ -194,38 +192,37 @@ function GlassFill({
       return /*#__PURE__*/_jsx(View, {
         style: [StyleSheet.absoluteFill, style],
         pointerEvents: "none",
-        children: /*#__PURE__*/_jsx(MaskedView, {
-          style: StyleSheet.absoluteFill,
-          maskElement: /*#__PURE__*/_jsx(GradientMask, {
-            id: `${maskId}-fb`,
-            stops: BASE_MASK_STOPS
-          }),
-          children: /*#__PURE__*/_jsx(View, {
-            style: [StyleSheet.absoluteFill, {
-              backgroundColor: fallbackColor
-            }]
-          })
+        children: /*#__PURE__*/_jsx(GradientScrim, {
+          id: `${maskId}-fb`,
+          color: fallbackColor,
+          stops: BASE_MASK_STOPS
         })
       });
     }
     return /*#__PURE__*/_jsx(View, {
       style: [StyleSheet.absoluteFill, style],
       pointerEvents: "none",
-      children: PROGRESSIVE_LAYERS.map((layer, i) => {
-        const amount = Math.max(1, Math.round(peakBlur * layer.amount));
-        return /*#__PURE__*/_jsx(MaskedView, {
-          style: StyleSheet.absoluteFill,
-          maskElement: /*#__PURE__*/_jsx(GradientMask, {
-            id: `${maskId}-${i}`,
-            stops: layer.stops
-          }),
-          children: /*#__PURE__*/_jsx(BlurView, {
-            style: StyleSheet.absoluteFill,
-            blurType: blurType,
-            blurAmount: amount,
-            reducedTransparencyFallbackColor: fallbackColor
-          })
-        }, i);
+      children: PROGRESSIVE_BANDS.map((band, i) => {
+        const amount = Math.max(1, Math.round(peakBlur * band.amount));
+        return (
+          /*#__PURE__*/
+          // Each band is clipped to start at `band.start` and run to
+          // the bottom; its `BlurView` blurs the content (and any
+          // lower bands) behind it, so the radius compounds downward.
+          _jsx(View, {
+            style: [StyleSheet.absoluteFill, {
+              top: `${band.start * 100}%`,
+              overflow: 'hidden'
+            }],
+            pointerEvents: "none",
+            children: /*#__PURE__*/_jsx(BlurView, {
+              style: StyleSheet.absoluteFill,
+              blurType: blurType,
+              blurAmount: amount,
+              reducedTransparencyFallbackColor: fallbackColor
+            })
+          }, i)
+        );
       })
     });
   }

package/lib/typescript/src/icons/registry.d.ts

@@ -4,7 +4,7 @@
  * Auto-generated from SVG files in src/icons/
  * DO NOT EDIT MANUALLY - Run "npm run icons:generate" to regenerate
  *
- * Generated: 2026-06-26T16:43:17.033Z
+ * Generated: 2026-06-29T08:47:00.741Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/lib/typescript/src/utils/GlassFill/GlassFill.d.ts

@@ -25,10 +25,17 @@ export interface GlassFillProps {
     /**
      * Render a *progressive* (variable) blur instead of a uniform one: fully
      * clear at the top, easing into a soft blur toward the bottom. Implemented
-     * by stacking two `MaskedView` + `BlurView` layers (a faint base + a
-     * slightly stronger accent near the bottom), each revealed via an eased
-     * multi-stop SVG gradient mask so the blur swells smoothly rather than
-     * along a hard seam. Works on iOS and Android with no extra native module.
+     * mask-free by stacking several bottom-anchored `BlurView` "bands": each
+     * band is clipped to start a little lower than the last, and because a
+     * `BlurView` blurs whatever is rendered behind it, the bands COMPOUND toward
+     * the bottom (a lower band re-blurs the already-blurred output above it) so
+     * the effective radius swells smoothly downward. This deliberately avoids
+     * masking a native view — the old implementation wrapped each `BlurView` in
+     * `@react-native-masked-view/masked-view`, a legacy Paper component that
+     * resolves to a plain object (crashing "Element type is invalid") under the
+     * New Architecture interop. Works on iOS and Android with no extra native
+     * module. When the native blur isn't linked at all, falls back to a pure
+     * `react-native-svg` gradient scrim (see below).
      */
     progressive?: boolean;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jfs-components",
-  "version": "0.1.17",
+  "version": "0.1.18",
   "description": "React Native Jio Finance Components Library",
   "author": "sunshuaiqi@gmail.com",
   "license": "MIT",
@@ -83,7 +83,6 @@
     "@expo/metro-runtime": "^6.1.2",
     "@gorhom/bottom-sheet": "5.2.6",
     "@react-native-async-storage/async-storage": "^2.2.0",
-    "@react-native-masked-view/masked-view": "^0.3.2",
     "@shopify/flash-list": "^2.2.0",
     "ajv": "^8.17.1",
     "ajv-keywords": "^5.1.0",

package/src/components/AvatarGroup/AvatarGroup.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
+import React, { useId } from 'react';
 import { View, Platform, type ViewStyle } from 'react-native';
-import MaskedView from '@react-native-masked-view/masked-view';
-import Svg, { Path } from 'react-native-svg';
+import Svg, { Defs, Mask, Path, ForeignObject } from 'react-native-svg';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES, flattenChildren } from '../../utils/react-utils';
 import type { Modes } from '../../design-tokens'
@@ -13,6 +12,11 @@ type AvatarGroupProps = {
 } & React.ComponentProps<typeof View>;
 
 function AvatarGroup({ modes = EMPTY_MODES, children, style, ...rest }: AvatarGroupProps) {
+    // Stable, collision-free base for the per-avatar SVG mask ids so multiple
+    // groups on one screen (and multiple avatars in a group) never clash.
+    const rawId = useId();
+    const maskBaseId = `avatargroup-mask-${rawId.replace(/[^a-zA-Z0-9_-]/g, '')}`;
+
     const gap = getVariableByName('avatarGroup/gap', modes);
 
 
@@ -43,7 +47,11 @@ function AvatarGroup({ modes = EMPTY_MODES, children, style, ...rest }: AvatarGr
     const holeRadius = effectiveRadius + borderSizeInt;
     const holeCenter = { x: nextAvatarX + r, y: r };
 
-    // Native Mask Path
+    // Native mask path: the full avatar square MINUS a circular hole where the
+    // next (overlapping) avatar sits. Drawn as a single `evenodd` path so the
+    // hole is cut out of the square. Filled WHITE because react-native-svg's
+    // `<Mask>` is a *luminance* mask (white = visible, black/absent = hidden) —
+    // the inverse of the old `@react-native-masked-view` alpha convention.
     const rectPath = `M 0 0 h ${avatarSizeInt} v ${avatarSizeInt} h -${avatarSizeInt} z`;
     const circlePath = `M ${holeCenter.x},${holeCenter.y} m -${holeRadius},0 a ${holeRadius},${holeRadius} 0 1,0 ${holeRadius * 2},0 a ${holeRadius},${holeRadius} 0 1,0 -${holeRadius * 2},0`;
     const maskPath = `${rectPath} ${circlePath}`;
@@ -101,23 +109,41 @@ function AvatarGroup({ modes = EMPTY_MODES, children, style, ...rest }: AvatarGr
                     );
                 }
 
-                // Native MaskedView
+                // Native: mask the avatar with react-native-svg instead of the
+                // unmaintained `@react-native-masked-view/masked-view`, whose
+                // legacy `requireNativeComponent('RNCMaskedView')` resolves to a
+                // plain object (crashing "Element type is invalid") under the New
+                // Architecture interop. react-native-svg ships a Fabric/codegen
+                // `<Mask>` + `<ForeignObject>` that resolves on both architectures;
+                // the avatar is hosted inside the `<ForeignObject>` and revealed
+                // through the luminance mask.
+                const maskId = `${maskBaseId}-${index}`;
                 return (
                     <View key={index} style={wrapperStyle}>
-                        <MaskedView
-                            style={{ flex: 1, height: '100%' }}
-                            maskElement={
-                                <Svg height="100%" width="100%" viewBox={`0 0 ${avatarSizeInt} ${avatarSizeInt}`}>
-                                    <Path
-                                        d={maskPath}
-                                        fill="black"
-                                        fillRule="evenodd"
-                                    />
-                                </Svg>
-                            }
+                        <Svg
+                            height="100%"
+                            width="100%"
+                            viewBox={`0 0 ${avatarSizeInt} ${avatarSizeInt}`}
                         >
-                            {clonedChild}
-                        </MaskedView>
+                            <Defs>
+                                <Mask
+                                    id={maskId}
+                                    maskUnits="userSpaceOnUse"
+                                    maskContentUnits="userSpaceOnUse"
+                                >
+                                    <Path d={maskPath} fill="white" fillRule="evenodd" />
+                                </Mask>
+                            </Defs>
+                            <ForeignObject
+                                x="0"
+                                y="0"
+                                width={avatarSizeInt}
+                                height={avatarSizeInt}
+                                mask={`url(#${maskId})`}
+                            >
+                                {clonedChild}
+                            </ForeignObject>
+                        </Svg>
                     </View>
                 );
             })}

package/src/components/ProductMerchandisingCard/ProductMerchandisingCard.tsx

@@ -4,15 +4,21 @@ import {
     Text,
     Pressable,
     StyleSheet,
-    Platform,
-    Image as RNImage,
     type ViewStyle,
     type TextStyle,
     type StyleProp,
     type ImageSourcePropType,
 } from 'react-native'
-import MaskedView from '@react-native-masked-view/masked-view'
-import Svg, { Defs, LinearGradient, Stop, Rect } from 'react-native-svg'
+import Svg, {
+    Defs,
+    LinearGradient,
+    Stop,
+    Rect,
+    Mask,
+    Filter,
+    FeGaussianBlur,
+    Image as SvgImage,
+} from 'react-native-svg'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils'
 import Avatar from '../Avatar/Avatar'
@@ -138,7 +144,9 @@ function ProductMerchandisingCard({
     const rawId = useId()
     const safeId = rawId.replace(/[^a-zA-Z0-9_-]/g, '')
     const scrimId = `pmc-footer-scrim-${safeId}`
+    const blurGradientId = `pmc-footer-blurgrad-${safeId}`
     const blurMaskId = `pmc-footer-blurmask-${safeId}`
+    const blurFilterId = `pmc-footer-blurfilter-${safeId}`
 
     const normalizedImageSource = useMemo(() => normalizeImageSource(imageSource), [imageSource])
 
@@ -234,41 +242,65 @@ function ProductMerchandisingCard({
 
             <View style={tokens.footer} pointerEvents="box-none">
                 {/* Progressive blur — clear at the top of the footer, ramping to
-                    a soft blur at the bottom. Rather than the unmaintained native
-                    BlurView (which renders as a flat black tint on Android +
-                    Fabric and can hide the image on iOS), we reveal a *blurred
-                    copy of the card's own image* through a vertical gradient
-                    mask. `Image.blurRadius` is a built-in RN prop with a real
-                    Gaussian blur on BOTH iOS and Android and needs no native
-                    module. The blurred copy is pinned to the card's bottom at the
-                    full card height so it lines up pixel-for-pixel with the
-                    full-bleed background, and the mask makes the blur swell in
-                    smoothly toward the bottom (true progressive blur). */}
+                    a soft blur at the bottom. We reveal a *blurred copy of the
+                    card's own image* through a vertical gradient mask, rendered
+                    entirely with `react-native-svg` (a Fabric/codegen-correct
+                    native module that resolves on both the Old and New
+                    architectures). The SVG `<Image>` is blurred by an
+                    `<FeGaussianBlur>` filter (identical, resolution-independent
+                    Gaussian on iOS, Android AND web) and revealed by a luminance
+                    `<Mask>` fed a vertical gradient, so the blur swells in
+                    smoothly toward the bottom. This deliberately avoids the
+                    unmaintained `@react-native-masked-view/masked-view` (a legacy
+                    Paper component that resolves to a plain object — and crashes
+                    "Element type is invalid" — under the New Architecture interop)
+                    and the flaky native `BlurView`. Because the mask is fully
+                    transparent at the top, any minor crop mismatch between this
+                    cover-fitted copy and the full-bleed background is invisible:
+                    where they could differ, the blurred layer isn't drawn. */}
                 {normalizedImageSource != null ? (
                     <View style={StyleSheet.absoluteFill} pointerEvents="none">
-                        <MaskedView
-                            style={StyleSheet.absoluteFill}
-                            maskElement={
-                                <Svg width="100%" height="100%">
-                                    <Defs>
-                                        <LinearGradient id={blurMaskId} x1="0" y1="0" x2="0" y2="1">
-                                            <Stop offset="0" stopColor="#000000" stopOpacity={0} />
-                                            <Stop offset="0.35" stopColor="#000000" stopOpacity={0.5} />
-                                            <Stop offset="0.7" stopColor="#000000" stopOpacity={0.92} />
-                                            <Stop offset="1" stopColor="#000000" stopOpacity={1} />
-                                        </LinearGradient>
-                                    </Defs>
-                                    <Rect x="0" y="0" width="100%" height="100%" fill={`url(#${blurMaskId})`} />
-                                </Svg>
-                            }
-                        >
-                            <RNImage
-                                source={normalizedImageSource}
-                                blurRadius={tokens.imageBlurRadius}
-                                resizeMode="cover"
-                                style={{ position: 'absolute', left: 0, right: 0, bottom: 0, width: '100%', height }}
+                        <Svg width="100%" height="100%">
+                            <Defs>
+                                <Filter
+                                    id={blurFilterId}
+                                    x="-15%"
+                                    y="-15%"
+                                    width="130%"
+                                    height="130%"
+                                >
+                                    <FeGaussianBlur
+                                        stdDeviation={tokens.imageBlurStdDeviation}
+                                        edgeMode="duplicate"
+                                    />
+                                </Filter>
+                                <LinearGradient id={blurGradientId} x1="0" y1="0" x2="0" y2="1">
+                                    <Stop offset="0" stopColor="#ffffff" stopOpacity={0} />
+                                    <Stop offset="0.35" stopColor="#ffffff" stopOpacity={0.5} />
+                                    <Stop offset="0.7" stopColor="#ffffff" stopOpacity={0.92} />
+                                    <Stop offset="1" stopColor="#ffffff" stopOpacity={1} />
+                                </LinearGradient>
+                                <Mask id={blurMaskId}>
+                                    <Rect
+                                        x="0"
+                                        y="0"
+                                        width="100%"
+                                        height="100%"
+                                        fill={`url(#${blurGradientId})`}
+                                    />
+                                </Mask>
+                            </Defs>
+                            <SvgImage
+                                href={normalizedImageSource as any}
+                                x="0"
+                                y="0"
+                                width="100%"
+                                height="100%"
+                                preserveAspectRatio="xMidYMid slice"
+                                filter={`url(#${blurFilterId})`}
+                                mask={`url(#${blurMaskId})`}
                             />
-                        </MaskedView>
+                        </Svg>
                     </View>
                 ) : (
                     <GlassFill tint="dark" intensity={tokens.blurIntensity} progressive />
@@ -348,7 +380,7 @@ const SPECIAL_BADGE_INTENSITY = 17 // ~5px CSS blur / ~2 native blurAmount
 interface ResolvedTokens {
     radius: number
     blurIntensity: number
-    imageBlurRadius: number
+    imageBlurStdDeviation: number
     header: ViewStyle
     footer: ViewStyle
     textWrap: ViewStyle
@@ -394,20 +426,17 @@ function resolveTokens(modes: Modes): ResolvedTokens {
     const sbFamily = asStr(getVariableByName('productMerchandisingcard/specialbadge/text/fontfamily', modes), 'JioType Var')
     const sbWeight = asStr(getVariableByName('productMerchandisingcard/specialbadge/text/fontweight', modes), '500')
 
-    // `Image.blurRadius` is interpreted differently per platform — iOS applies a
-    // strong Gaussian while Android's IterativeBoxBlur is gentler at the same
-    // numeric radius — so we tune each platform to land on the same perceived
-    // "minimal" frosted strength as the Figma design.
-    const imageBlurRadius = Platform.select({
-        ios: Math.max(6, Math.round(blurRadius * 0.5)),
-        android: Math.max(12, Math.round(blurRadius * 0.95)),
-        default: Math.max(8, Math.round(blurRadius * 0.6)),
-    }) as number
+    // SVG `<FeGaussianBlur stdDeviation>` is resolution-independent and renders
+    // an identical Gaussian on iOS, Android and web — so unlike the old
+    // `Image.blurRadius` path it needs no per-platform tuning. `stdDeviation` is
+    // roughly half a perceptual "blur radius", so we scale the `blur/minimal`
+    // token down to land on the same subtle frosted strength as the design.
+    const imageBlurStdDeviation = Math.max(4, Math.round(blurRadius * 0.35))
 
     return {
         radius,
         blurIntensity: Math.max(0, Math.min(100, Math.round(blurRadius * BLUR_INTENSITY_FACTOR))),
-        imageBlurRadius,
+        imageBlurStdDeviation,
         header: {
             flexDirection: 'row',
             alignItems: 'flex-start',

package/src/icons/registry.ts

@@ -4,7 +4,7 @@
  * Auto-generated from SVG files in src/icons/
  * DO NOT EDIT MANUALLY - Run "npm run icons:generate" to regenerate
  * 
- * Generated: 2026-06-26T16:43:17.033Z
+ * Generated: 2026-06-29T08:47:00.741Z
  */
 
 // Icon name to SVG data mapping