react-native-gradient-mask 0.0.1-beta.1

package/build/AnimatedGradientMaskView.web.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { SharedValue } from 'react-native-reanimated';
+import { GradientMaskViewProps } from './GradientMask.types';
+export type AnimatedGradientMaskViewProps = Omit<GradientMaskViewProps, 'maskOpacity'> & {
+    /**
+     * Mask effect intensity (0-1) as a Reanimated SharedValue
+     * 0 = no gradient effect (content fully visible)
+     * 1 = full gradient effect
+     */
+    maskOpacity: SharedValue<number>;
+};
+/**
+ * AnimatedGradientMaskView - Web 實作
+ * 使用 CSS mask-image 搭配 useAnimatedReaction 監聽 SharedValue 變化
+ */
+export default function AnimatedGradientMaskView(props: AnimatedGradientMaskViewProps): React.JSX.Element;
+//# sourceMappingURL=AnimatedGradientMaskView.web.d.ts.map

package/build/AnimatedGradientMaskView.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimatedGradientMaskView.web.d.ts","sourceRoot":"","sources":["../src/AnimatedGradientMaskView.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE3D,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAE7D,MAAM,MAAM,6BAA6B,GAAG,IAAI,CAC9C,qBAAqB,EACrB,aAAa,CACd,GAAG;IACF;;;;OAIG;IACH,WAAW,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CAClC,CAAC;AAgFF;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,KAAK,EAAE,6BAA6B,qBAyCpF"}

package/build/AnimatedGradientMaskView.web.js

@@ -0,0 +1,100 @@
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { useAnimatedReaction, runOnJS } from 'react-native-reanimated';
+/**
+ * 將 processColor 處理過的顏色值轉回 rgba 字串
+ */
+function colorToRgba(color) {
+    if (color === null || color === undefined) {
+        return 'rgba(0, 0, 0, 0)';
+    }
+    const intValue = color >>> 0;
+    const a = ((intValue >> 24) & 0xff) / 255;
+    const r = (intValue >> 16) & 0xff;
+    const g = (intValue >> 8) & 0xff;
+    const b = intValue & 0xff;
+    return `rgba(${r}, ${g}, ${b}, ${a})`;
+}
+/**
+ * 根據 direction 取得 CSS linear-gradient 的方向
+ */
+function getGradientDirection(direction) {
+    switch (direction) {
+        case 'top':
+            return 'to bottom';
+        case 'bottom':
+            return 'to top';
+        case 'left':
+            return 'to right';
+        case 'right':
+            return 'to left';
+        default:
+            return 'to bottom';
+    }
+}
+/**
+ * 建立 CSS linear-gradient 字串
+ */
+function buildGradientString(colors, locations, direction) {
+    const gradientDirection = getGradientDirection(direction);
+    const colorStops = colors.map((color, index) => {
+        const rgba = colorToRgba(color);
+        const location = locations[index] !== undefined ? locations[index] * 100 : (index / (colors.length - 1)) * 100;
+        return `${rgba} ${location}%`;
+    });
+    return `linear-gradient(${gradientDirection}, ${colorStops.join(', ')})`;
+}
+/**
+ * 根據 maskOpacity 調整顏色的 alpha 值
+ */
+function adjustColorsForOpacity(colors, maskOpacity) {
+    if (maskOpacity >= 1)
+        return colors;
+    if (maskOpacity <= 0) {
+        return colors.map(() => 0xff000000);
+    }
+    return colors.map((color) => {
+        if (color === null || color === undefined)
+            return color;
+        const intValue = color >>> 0;
+        const a = ((intValue >> 24) & 0xff) / 255;
+        const r = (intValue >> 16) & 0xff;
+        const g = (intValue >> 8) & 0xff;
+        const b = intValue & 0xff;
+        const adjustedAlpha = a + (1 - a) * (1 - maskOpacity);
+        return ((Math.round(adjustedAlpha * 255) << 24) | (r << 16) | (g << 8) | b) >>> 0;
+    });
+}
+/**
+ * AnimatedGradientMaskView - Web 實作
+ * 使用 CSS mask-image 搭配 useAnimatedReaction 監聽 SharedValue 變化
+ */
+export default function AnimatedGradientMaskView(props) {
+    const { colors, locations, direction = 'top', maskOpacity, style, children, } = props;
+    const [currentOpacity, setCurrentOpacity] = React.useState(maskOpacity.value);
+    // 監聽 SharedValue 變化並更新 state
+    useAnimatedReaction(() => maskOpacity.value, (value) => {
+        runOnJS(setCurrentOpacity)(value);
+    }, [maskOpacity]);
+    const maskStyle = React.useMemo(() => {
+        if (currentOpacity <= 0) {
+            return {};
+        }
+        const adjustedColors = adjustColorsForOpacity(colors, currentOpacity);
+        const gradientString = buildGradientString(adjustedColors, locations, direction);
+        return {
+            WebkitMaskImage: gradientString,
+            maskImage: gradientString,
+            transition: 'mask-image 0.1s ease-out, -webkit-mask-image 0.1s ease-out',
+        };
+    }, [colors, locations, direction, currentOpacity]);
+    return (<View style={[styles.container, style, maskStyle]}>
+      {children}
+    </View>);
+}
+const styles = StyleSheet.create({
+    container: {
+        overflow: 'hidden',
+    },
+});
+//# sourceMappingURL=AnimatedGradientMaskView.web.js.map

package/build/AnimatedGradientMaskView.web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimatedGradientMaskView.web.js","sourceRoot":"","sources":["../src/AnimatedGradientMaskView.web.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { View, StyleSheet } from 'react-native';\nimport { useAnimatedReaction, runOnJS } from 'react-native-reanimated';\nimport type { SharedValue } from 'react-native-reanimated';\n\nimport { GradientMaskViewProps } from './GradientMask.types';\n\nexport type AnimatedGradientMaskViewProps = Omit<\n  GradientMaskViewProps,\n  'maskOpacity'\n> & {\n  /**\n   * Mask effect intensity (0-1) as a Reanimated SharedValue\n   * 0 = no gradient effect (content fully visible)\n   * 1 = full gradient effect\n   */\n  maskOpacity: SharedValue<number>;\n};\n\n/**\n * 將 processColor 處理過的顏色值轉回 rgba 字串\n */\nfunction colorToRgba(color: number | null): string {\n  if (color === null || color === undefined) {\n    return 'rgba(0, 0, 0, 0)';\n  }\n\n  const intValue = color >>> 0;\n  const a = ((intValue >> 24) & 0xff) / 255;\n  const r = (intValue >> 16) & 0xff;\n  const g = (intValue >> 8) & 0xff;\n  const b = intValue & 0xff;\n\n  return `rgba(${r}, ${g}, ${b}, ${a})`;\n}\n\n/**\n * 根據 direction 取得 CSS linear-gradient 的方向\n */\nfunction getGradientDirection(direction: GradientMaskViewProps['direction']): string {\n  switch (direction) {\n    case 'top':\n      return 'to bottom';\n    case 'bottom':\n      return 'to top';\n    case 'left':\n      return 'to right';\n    case 'right':\n      return 'to left';\n    default:\n      return 'to bottom';\n  }\n}\n\n/**\n * 建立 CSS linear-gradient 字串\n */\nfunction buildGradientString(\n  colors: (number | null)[],\n  locations: number[],\n  direction: GradientMaskViewProps['direction']\n): string {\n  const gradientDirection = getGradientDirection(direction);\n\n  const colorStops = colors.map((color, index) => {\n    const rgba = colorToRgba(color);\n    const location = locations[index] !== undefined ? locations[index] * 100 : (index / (colors.length - 1)) * 100;\n    return `${rgba} ${location}%`;\n  });\n\n  return `linear-gradient(${gradientDirection}, ${colorStops.join(', ')})`;\n}\n\n/**\n * 根據 maskOpacity 調整顏色的 alpha 值\n */\nfunction adjustColorsForOpacity(\n  colors: (number | null)[],\n  maskOpacity: number\n): (number | null)[] {\n  if (maskOpacity >= 1) return colors;\n  if (maskOpacity <= 0) {\n    return colors.map(() => 0xff000000);\n  }\n\n  return colors.map((color) => {\n    if (color === null || color === undefined) return color;\n    const intValue = color >>> 0;\n    const a = ((intValue >> 24) & 0xff) / 255;\n    const r = (intValue >> 16) & 0xff;\n    const g = (intValue >> 8) & 0xff;\n    const b = intValue & 0xff;\n    const adjustedAlpha = a + (1 - a) * (1 - maskOpacity);\n    return ((Math.round(adjustedAlpha * 255) << 24) | (r << 16) | (g << 8) | b) >>> 0;\n  });\n}\n\n/**\n * AnimatedGradientMaskView - Web 實作\n * 使用 CSS mask-image 搭配 useAnimatedReaction 監聽 SharedValue 變化\n */\nexport default function AnimatedGradientMaskView(props: AnimatedGradientMaskViewProps) {\n  const {\n    colors,\n    locations,\n    direction = 'top',\n    maskOpacity,\n    style,\n    children,\n  } = props;\n\n  const [currentOpacity, setCurrentOpacity] = React.useState(maskOpacity.value);\n\n  // 監聽 SharedValue 變化並更新 state\n  useAnimatedReaction(\n    () => maskOpacity.value,\n    (value) => {\n      runOnJS(setCurrentOpacity)(value);\n    },\n    [maskOpacity]\n  );\n\n  const maskStyle = React.useMemo(() => {\n    if (currentOpacity <= 0) {\n      return {};\n    }\n\n    const adjustedColors = adjustColorsForOpacity(colors, currentOpacity);\n    const gradientString = buildGradientString(adjustedColors, locations, direction);\n\n    return {\n      WebkitMaskImage: gradientString,\n      maskImage: gradientString,\n      transition: 'mask-image 0.1s ease-out, -webkit-mask-image 0.1s ease-out',\n    };\n  }, [colors, locations, direction, currentOpacity]);\n\n  return (\n    <View style={[styles.container, style, maskStyle as any]}>\n      {children}\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    overflow: 'hidden',\n  },\n});\n"]}

package/build/GradientMask.types.d.ts

@@ -0,0 +1,38 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+export type GradientMaskViewProps = {
+    /**
+     * Gradient colors array (processed colors from processColor)
+     * Use alpha values to control opacity
+     * e.g., ['rgba(0,0,0,0)', 'rgba(0,0,0,1)'] = transparent to opaque
+     */
+    colors: (number | null)[];
+    /**
+     * Position of each color (0-1)
+     * e.g., [0, 0.3, 1] means first color at 0%, second at 30%, third at 100%
+     */
+    locations: number[];
+    /**
+     * Gradient direction
+     * 'top' = top transparent, bottom opaque
+     * 'bottom' = bottom transparent, top opaque
+     * 'left' = left transparent, right opaque
+     * 'right' = right transparent, left opaque
+     */
+    direction?: 'top' | 'bottom' | 'left' | 'right';
+    /**
+     * Mask effect intensity (0-1)
+     * 0 = no gradient effect (content fully visible)
+     * 1 = full gradient effect
+     * @default 1
+     */
+    maskOpacity?: number;
+    /**
+     * Style
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Children
+     */
+    children?: React.ReactNode;
+};
+//# sourceMappingURL=GradientMask.types.d.ts.map

package/build/GradientMask.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GradientMask.types.d.ts","sourceRoot":"","sources":["../src/GradientMask.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,MAAM,MAAM,qBAAqB,GAAG;IAClC;;;;OAIG;IACH,MAAM,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IAE1B;;;OAGG;IACH,SAAS,EAAE,MAAM,EAAE,CAAC;IAEpB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAEhD;;;;;OAKG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC"}

package/build/GradientMask.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=GradientMask.types.js.map

package/build/GradientMask.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GradientMask.types.js","sourceRoot":"","sources":["../src/GradientMask.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { StyleProp, ViewStyle } from 'react-native';\n\nexport type GradientMaskViewProps = {\n  /**\n   * Gradient colors array (processed colors from processColor)\n   * Use alpha values to control opacity\n   * e.g., ['rgba(0,0,0,0)', 'rgba(0,0,0,1)'] = transparent to opaque\n   */\n  colors: (number | null)[];\n\n  /**\n   * Position of each color (0-1)\n   * e.g., [0, 0.3, 1] means first color at 0%, second at 30%, third at 100%\n   */\n  locations: number[];\n\n  /**\n   * Gradient direction\n   * 'top' = top transparent, bottom opaque\n   * 'bottom' = bottom transparent, top opaque\n   * 'left' = left transparent, right opaque\n   * 'right' = right transparent, left opaque\n   */\n  direction?: 'top' | 'bottom' | 'left' | 'right';\n\n  /**\n   * Mask effect intensity (0-1)\n   * 0 = no gradient effect (content fully visible)\n   * 1 = full gradient effect\n   * @default 1\n   */\n  maskOpacity?: number;\n\n  /**\n   * Style\n   */\n  style?: StyleProp<ViewStyle>;\n\n  /**\n   * Children\n   */\n  children?: React.ReactNode;\n};\n"]}

package/build/GradientMaskModule.d.ts

@@ -0,0 +1,3 @@
+declare const _default: any;
+export default _default;
+//# sourceMappingURL=GradientMaskModule.d.ts.map

package/build/GradientMaskModule.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GradientMaskModule.d.ts","sourceRoot":"","sources":["../src/GradientMaskModule.ts"],"names":[],"mappings":";AAGA,wBAAmD"}

package/build/GradientMaskModule.js

@@ -0,0 +1,4 @@
+import { requireNativeModule } from 'expo';
+// We only use the View, no module functions needed
+export default requireNativeModule('GradientMask');
+//# sourceMappingURL=GradientMaskModule.js.map

package/build/GradientMaskModule.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GradientMaskModule.js","sourceRoot":"","sources":["../src/GradientMaskModule.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,MAAM,CAAC;AAE3C,mDAAmD;AACnD,eAAe,mBAAmB,CAAC,cAAc,CAAC,CAAC","sourcesContent":["import { requireNativeModule } from 'expo';\n\n// We only use the View, no module functions needed\nexport default requireNativeModule('GradientMask');\n"]}

package/build/GradientMaskModule.web.d.ts

@@ -0,0 +1,3 @@
+declare const _default: {};
+export default _default;
+//# sourceMappingURL=GradientMaskModule.web.d.ts.map

package/build/GradientMaskModule.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GradientMaskModule.web.d.ts","sourceRoot":"","sources":["../src/GradientMaskModule.web.ts"],"names":[],"mappings":";AACA,wBAAkB"}

package/build/GradientMaskModule.web.js

@@ -0,0 +1,3 @@
+// Web module stub - GradientMask is primarily for native platforms
+export default {};
+//# sourceMappingURL=GradientMaskModule.web.js.map

package/build/GradientMaskModule.web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GradientMaskModule.web.js","sourceRoot":"","sources":["../src/GradientMaskModule.web.ts"],"names":[],"mappings":"AAAA,mEAAmE;AACnE,eAAe,EAAE,CAAC","sourcesContent":["// Web module stub - GradientMask is primarily for native platforms\nexport default {};\n"]}

package/build/GradientMaskView.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { GradientMaskViewProps } from './GradientMask.types';
+export default function GradientMaskView(props: GradientMaskViewProps): React.JSX.Element;
+//# sourceMappingURL=GradientMaskView.d.ts.map

package/build/GradientMaskView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GradientMaskView.d.ts","sourceRoot":"","sources":["../src/GradientMaskView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAK7D,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,qBAEpE"}

package/build/GradientMaskView.js

@@ -0,0 +1,7 @@
+import { requireNativeView } from 'expo';
+import * as React from 'react';
+const NativeView = requireNativeView('GradientMask');
+export default function GradientMaskView(props) {
+    return <NativeView {...props}/>;
+}
+//# sourceMappingURL=GradientMaskView.js.map

package/build/GradientMaskView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GradientMaskView.js","sourceRoot":"","sources":["../src/GradientMaskView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,MAAM,CAAC;AACzC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,UAAU,GACd,iBAAiB,CAAC,cAAc,CAAC,CAAC;AAEpC,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,KAA4B;IACnE,OAAO,CAAC,UAAU,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AACnC,CAAC","sourcesContent":["import { requireNativeView } from 'expo';\nimport * as React from 'react';\n\nimport { GradientMaskViewProps } from './GradientMask.types';\n\nconst NativeView: React.ComponentType<GradientMaskViewProps> =\n  requireNativeView('GradientMask');\n\nexport default function GradientMaskView(props: GradientMaskViewProps) {\n  return <NativeView {...props} />;\n}\n"]}

package/build/GradientMaskView.web.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { GradientMaskViewProps } from './GradientMask.types';
+/**
+ * GradientMaskView - Web 實作
+ * 使用 CSS mask-image 搭配 linear-gradient 實現漸層遮罩效果
+ */
+export default function GradientMaskView(props: GradientMaskViewProps): React.JSX.Element;
+//# sourceMappingURL=GradientMaskView.web.d.ts.map

package/build/GradientMaskView.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GradientMaskView.web.d.ts","sourceRoot":"","sources":["../src/GradientMaskView.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAqF7D;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,qBA8BpE"}

package/build/GradientMaskView.web.js

@@ -0,0 +1,99 @@
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+/**
+ * 將 processColor 處理過的顏色值轉回 rgba 字串
+ */
+function colorToRgba(color) {
+    if (color === null || color === undefined) {
+        return 'rgba(0, 0, 0, 0)';
+    }
+    // processColor 在 web 上回傳的格式是 AARRGGBB (32-bit integer)
+    const intValue = color >>> 0; // 確保是 unsigned
+    const a = ((intValue >> 24) & 0xff) / 255;
+    const r = (intValue >> 16) & 0xff;
+    const g = (intValue >> 8) & 0xff;
+    const b = intValue & 0xff;
+    return `rgba(${r}, ${g}, ${b}, ${a})`;
+}
+/**
+ * 根據 direction 取得 CSS linear-gradient 的方向
+ */
+function getGradientDirection(direction) {
+    switch (direction) {
+        case 'top':
+            return 'to bottom'; // 頂部透明 → 底部不透明
+        case 'bottom':
+            return 'to top'; // 底部透明 → 頂部不透明
+        case 'left':
+            return 'to right'; // 左側透明 → 右側不透明
+        case 'right':
+            return 'to left'; // 右側透明 → 左側不透明
+        default:
+            return 'to bottom';
+    }
+}
+/**
+ * 建立 CSS linear-gradient 字串
+ */
+function buildGradientString(colors, locations, direction) {
+    const gradientDirection = getGradientDirection(direction);
+    const colorStops = colors.map((color, index) => {
+        const rgba = colorToRgba(color);
+        const location = locations[index] !== undefined ? locations[index] * 100 : (index / (colors.length - 1)) * 100;
+        return `${rgba} ${location}%`;
+    });
+    return `linear-gradient(${gradientDirection}, ${colorStops.join(', ')})`;
+}
+/**
+ * 根據 maskOpacity 調整顏色的 alpha 值
+ * maskOpacity = 0 時，所有顏色變為完全不透明（無遮罩效果）
+ * maskOpacity = 1 時，保持原本的 alpha 值
+ */
+function adjustColorsForOpacity(colors, maskOpacity) {
+    if (maskOpacity >= 1)
+        return colors;
+    if (maskOpacity <= 0) {
+        // 全部變成不透明黑色，表示內容完全可見
+        return colors.map(() => 0xff000000);
+    }
+    return colors.map((color) => {
+        if (color === null || color === undefined)
+            return color;
+        const intValue = color >>> 0;
+        const a = ((intValue >> 24) & 0xff) / 255;
+        const r = (intValue >> 16) & 0xff;
+        const g = (intValue >> 8) & 0xff;
+        const b = intValue & 0xff;
+        // 根據 maskOpacity 調整 alpha：當 maskOpacity = 0 時 alpha 趨近於 1（完全可見）
+        const adjustedAlpha = a + (1 - a) * (1 - maskOpacity);
+        return ((Math.round(adjustedAlpha * 255) << 24) | (r << 16) | (g << 8) | b) >>> 0;
+    });
+}
+/**
+ * GradientMaskView - Web 實作
+ * 使用 CSS mask-image 搭配 linear-gradient 實現漸層遮罩效果
+ */
+export default function GradientMaskView(props) {
+    const { colors, locations, direction = 'top', maskOpacity = 1, style, children, } = props;
+    const maskStyle = React.useMemo(() => {
+        if (maskOpacity <= 0) {
+            // 無遮罩效果
+            return {};
+        }
+        const adjustedColors = adjustColorsForOpacity(colors, maskOpacity);
+        const gradientString = buildGradientString(adjustedColors, locations, direction);
+        return {
+            WebkitMaskImage: gradientString,
+            maskImage: gradientString,
+        };
+    }, [colors, locations, direction, maskOpacity]);
+    return (<View style={[styles.container, style, maskStyle]}>
+      {children}
+    </View>);
+}
+const styles = StyleSheet.create({
+    container: {
+        overflow: 'hidden',
+    },
+});
+//# sourceMappingURL=GradientMaskView.web.js.map

package/build/GradientMaskView.web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GradientMaskView.web.js","sourceRoot":"","sources":["../src/GradientMaskView.web.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { View, StyleSheet } from 'react-native';\n\nimport { GradientMaskViewProps } from './GradientMask.types';\n\n/**\n * 將 processColor 處理過的顏色值轉回 rgba 字串\n */\nfunction colorToRgba(color: number | null): string {\n  if (color === null || color === undefined) {\n    return 'rgba(0, 0, 0, 0)';\n  }\n\n  // processColor 在 web 上回傳的格式是 AARRGGBB (32-bit integer)\n  const intValue = color >>> 0; // 確保是 unsigned\n  const a = ((intValue >> 24) & 0xff) / 255;\n  const r = (intValue >> 16) & 0xff;\n  const g = (intValue >> 8) & 0xff;\n  const b = intValue & 0xff;\n\n  return `rgba(${r}, ${g}, ${b}, ${a})`;\n}\n\n/**\n * 根據 direction 取得 CSS linear-gradient 的方向\n */\nfunction getGradientDirection(direction: GradientMaskViewProps['direction']): string {\n  switch (direction) {\n    case 'top':\n      return 'to bottom'; // 頂部透明 → 底部不透明\n    case 'bottom':\n      return 'to top'; // 底部透明 → 頂部不透明\n    case 'left':\n      return 'to right'; // 左側透明 → 右側不透明\n    case 'right':\n      return 'to left'; // 右側透明 → 左側不透明\n    default:\n      return 'to bottom';\n  }\n}\n\n/**\n * 建立 CSS linear-gradient 字串\n */\nfunction buildGradientString(\n  colors: (number | null)[],\n  locations: number[],\n  direction: GradientMaskViewProps['direction']\n): string {\n  const gradientDirection = getGradientDirection(direction);\n\n  const colorStops = colors.map((color, index) => {\n    const rgba = colorToRgba(color);\n    const location = locations[index] !== undefined ? locations[index] * 100 : (index / (colors.length - 1)) * 100;\n    return `${rgba} ${location}%`;\n  });\n\n  return `linear-gradient(${gradientDirection}, ${colorStops.join(', ')})`;\n}\n\n/**\n * 根據 maskOpacity 調整顏色的 alpha 值\n * maskOpacity = 0 時，所有顏色變為完全不透明（無遮罩效果）\n * maskOpacity = 1 時，保持原本的 alpha 值\n */\nfunction adjustColorsForOpacity(\n  colors: (number | null)[],\n  maskOpacity: number\n): (number | null)[] {\n  if (maskOpacity >= 1) return colors;\n  if (maskOpacity <= 0) {\n    // 全部變成不透明黑色，表示內容完全可見\n    return colors.map(() => 0xff000000);\n  }\n\n  return colors.map((color) => {\n    if (color === null || color === undefined) return color;\n    const intValue = color >>> 0;\n    const a = ((intValue >> 24) & 0xff) / 255;\n    const r = (intValue >> 16) & 0xff;\n    const g = (intValue >> 8) & 0xff;\n    const b = intValue & 0xff;\n    // 根據 maskOpacity 調整 alpha：當 maskOpacity = 0 時 alpha 趨近於 1（完全可見）\n    const adjustedAlpha = a + (1 - a) * (1 - maskOpacity);\n    return ((Math.round(adjustedAlpha * 255) << 24) | (r << 16) | (g << 8) | b) >>> 0;\n  });\n}\n\n/**\n * GradientMaskView - Web 實作\n * 使用 CSS mask-image 搭配 linear-gradient 實現漸層遮罩效果\n */\nexport default function GradientMaskView(props: GradientMaskViewProps) {\n  const {\n    colors,\n    locations,\n    direction = 'top',\n    maskOpacity = 1,\n    style,\n    children,\n  } = props;\n\n  const maskStyle = React.useMemo(() => {\n    if (maskOpacity <= 0) {\n      // 無遮罩效果\n      return {};\n    }\n\n    const adjustedColors = adjustColorsForOpacity(colors, maskOpacity);\n    const gradientString = buildGradientString(adjustedColors, locations, direction);\n\n    return {\n      WebkitMaskImage: gradientString,\n      maskImage: gradientString,\n    };\n  }, [colors, locations, direction, maskOpacity]);\n\n  return (\n    <View style={[styles.container, style, maskStyle as any]}>\n      {children}\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    overflow: 'hidden',\n  },\n});\n"]}

package/build/index.d.ts

@@ -0,0 +1,6 @@
+export { default } from './GradientMaskModule';
+export { default as GradientMaskView } from './GradientMaskView';
+export { default as AnimatedGradientMaskView } from './AnimatedGradientMaskView';
+export type { AnimatedGradientMaskViewProps } from './AnimatedGradientMaskView';
+export * from './GradientMask.types';
+//# sourceMappingURL=index.d.ts.map

package/build/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACjF,YAAY,EAAE,6BAA6B,EAAE,MAAM,4BAA4B,CAAC;AAChF,cAAc,sBAAsB,CAAC"}

package/build/index.js

@@ -0,0 +1,7 @@
+// Reexport the native module. On web, it will be resolved to GradientMaskModule.web.ts
+// and on native platforms to GradientMaskModule.ts
+export { default } from './GradientMaskModule';
+export { default as GradientMaskView } from './GradientMaskView';
+export { default as AnimatedGradientMaskView } from './AnimatedGradientMaskView';
+export * from './GradientMask.types';
+//# sourceMappingURL=index.js.map

package/build/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,uFAAuF;AACvF,mDAAmD;AACnD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAEjF,cAAc,sBAAsB,CAAC","sourcesContent":["// Reexport the native module. On web, it will be resolved to GradientMaskModule.web.ts\n// and on native platforms to GradientMaskModule.ts\nexport { default } from './GradientMaskModule';\nexport { default as GradientMaskView } from './GradientMaskView';\nexport { default as AnimatedGradientMaskView } from './AnimatedGradientMaskView';\nexport type { AnimatedGradientMaskViewProps } from './AnimatedGradientMaskView';\nexport * from './GradientMask.types';\n"]}

package/expo-module.config.json

@@ -0,0 +1,9 @@
+{
+  "platforms": ["apple", "android", "web"],
+  "apple": {
+    "modules": ["GradientMaskModule"]
+  },
+  "android": {
+    "modules": ["expo.modules.gradientmask.GradientMaskModule"]
+  }
+}

package/ios/GradientMask.podspec

@@ -0,0 +1,29 @@
+require 'json'
+
+package = JSON.parse(File.read(File.join(__dir__, '..', 'package.json')))
+
+Pod::Spec.new do |s|
+  s.name           = 'GradientMask'
+  s.version        = package['version']
+  s.summary        = package['description']
+  s.description    = package['description']
+  s.license        = package['license']
+  s.author         = package['author']
+  s.homepage       = package['homepage']
+  s.platforms      = {
+    :ios => '15.1',
+    :tvos => '15.1'
+  }
+  s.swift_version  = '5.9'
+  s.source         = { git: 'https://github.com/CS6/s33' }
+  s.static_framework = true
+
+  s.dependency 'ExpoModulesCore'
+
+  # Swift/Objective-C compatibility
+  s.pod_target_xcconfig = {
+    'DEFINES_MODULE' => 'YES',
+  }
+
+  s.source_files = "**/*.{h,m,mm,swift,hpp,cpp}"
+end

package/ios/GradientMaskModule.swift

@@ -0,0 +1,29 @@
+import ExpoModulesCore
+
+public class GradientMaskModule: Module {
+    public func definition() -> ModuleDefinition {
+        Name("GradientMask")
+
+        View(GradientMaskView.self) {
+            // colors: List of processed colors (from processColor in JS)
+            Prop("colors") { (view: GradientMaskView, colors: [Int]?) in
+                view.setColors(colors)
+            }
+
+            // locations: Array of floats (0-1) for gradient stops
+            Prop("locations") { (view: GradientMaskView, locations: [Double]?) in
+                view.setLocations(locations)
+            }
+
+            // direction: "top" | "bottom" | "left" | "right"
+            Prop("direction") { (view: GradientMaskView, direction: String?) in
+                view.setDirection(direction ?? "top")
+            }
+
+            // maskOpacity: 0 = no mask effect, 1 = full gradient mask
+            Prop("maskOpacity") { (view: GradientMaskView, opacity: Double?) in
+                view.setMaskOpacity(opacity ?? 1.0)
+            }
+        }
+    }
+}

package/ios/GradientMaskView.swift

@@ -0,0 +1,133 @@
+import ExpoModulesCore
+import UIKit
+
+class GradientMaskView: ExpoView {
+
+    // MARK: - Properties
+
+    private let gradientMaskLayer = CAGradientLayer()
+    /// Used to overlay gradient when maskOpacity = 0, making content fully visible
+    private let solidMaskLayer = CALayer()
+
+    private var _colors: [CGColor] = [
+        UIColor.clear.cgColor,
+        UIColor.black.cgColor
+    ]
+
+    private var _locations: [NSNumber] = [0, 1]
+    private var _direction: String = "top"
+    private var _maskOpacity: CGFloat = 1.0
+
+    // MARK: - Initialization
+
+    required init(appContext: AppContext? = nil) {
+        super.init(appContext: appContext)
+        setupView()
+    }
+
+    private func setupView() {
+        backgroundColor = .clear
+        clipsToBounds = true
+
+        // Initialize gradient mask layer
+        gradientMaskLayer.colors = _colors
+        gradientMaskLayer.locations = _locations
+
+        // Initialize solid mask layer (opaque black, used to overlay gradient)
+        solidMaskLayer.backgroundColor = UIColor.black.cgColor
+        // Initially solidMaskLayer is invisible (opacity = 1 - maskOpacity = 0)
+        // So mask effect shows full gradient
+        solidMaskLayer.opacity = 0.0
+
+        updateGradientDirection()
+    }
+
+    // MARK: - Props Setters
+
+    func setColors(_ colors: [Int]?) {
+        guard let colors = colors else { return }
+        _colors = colors.map { colorValue -> CGColor in
+            let intValue = UInt32(bitPattern: Int32(truncatingIfNeeded: colorValue))
+            return UIColor(
+                red: CGFloat((intValue >> 16) & 0xFF) / 255.0,
+                green: CGFloat((intValue >> 8) & 0xFF) / 255.0,
+                blue: CGFloat(intValue & 0xFF) / 255.0,
+                alpha: CGFloat((intValue >> 24) & 0xFF) / 255.0
+            ).cgColor
+        }
+        updateGradientMask()
+    }
+
+    func setLocations(_ locations: [Double]?) {
+        guard let locations = locations else { return }
+        _locations = locations.map { NSNumber(value: $0) }
+        updateGradientMask()
+    }
+
+    func setDirection(_ direction: String) {
+        _direction = direction
+        updateGradientDirection()
+        updateGradientMask()
+    }
+
+    func setMaskOpacity(_ opacity: Double) {
+        _maskOpacity = CGFloat(opacity)
+        updateMaskOpacity()
+    }
+
+    // MARK: - Layout
+
+    override func layoutSubviews() {
+        super.layoutSubviews()
+        updateGradientMask()
+    }
+
+    // MARK: - Gradient Mask
+
+    private func updateGradientMask() {
+        gradientMaskLayer.frame = bounds
+        solidMaskLayer.frame = bounds
+
+        gradientMaskLayer.colors = _colors
+        gradientMaskLayer.locations = _locations
+
+        updateGradientDirection()
+
+        // Create composite mask: gradient + solid overlay
+        let compositeMask = CALayer()
+        compositeMask.frame = bounds
+        compositeMask.addSublayer(gradientMaskLayer)
+        compositeMask.addSublayer(solidMaskLayer)
+
+        layer.mask = compositeMask
+    }
+
+    private func updateMaskOpacity() {
+        CATransaction.begin()
+        CATransaction.setDisableActions(true)
+        // maskOpacity = 0 → solidMaskLayer.opacity = 1 → content fully visible
+        // maskOpacity = 1 → solidMaskLayer.opacity = 0 → full gradient effect
+        solidMaskLayer.opacity = Float(1.0 - _maskOpacity)
+        CATransaction.commit()
+    }
+
+    private func updateGradientDirection() {
+        switch _direction {
+        case "top":
+            gradientMaskLayer.startPoint = CGPoint(x: 0.5, y: 0)
+            gradientMaskLayer.endPoint = CGPoint(x: 0.5, y: 1)
+        case "bottom":
+            gradientMaskLayer.startPoint = CGPoint(x: 0.5, y: 1)
+            gradientMaskLayer.endPoint = CGPoint(x: 0.5, y: 0)
+        case "left":
+            gradientMaskLayer.startPoint = CGPoint(x: 0, y: 0.5)
+            gradientMaskLayer.endPoint = CGPoint(x: 1, y: 0.5)
+        case "right":
+            gradientMaskLayer.startPoint = CGPoint(x: 1, y: 0.5)
+            gradientMaskLayer.endPoint = CGPoint(x: 0, y: 0.5)
+        default:
+            gradientMaskLayer.startPoint = CGPoint(x: 0.5, y: 0)
+            gradientMaskLayer.endPoint = CGPoint(x: 0.5, y: 1)
+        }
+    }
+}