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

package/android/src/main/java/expo/modules/gradientmask/GradientMaskView.kt

@@ -0,0 +1,198 @@
+package expo.modules.gradientmask
+
+import android.content.Context
+import android.graphics.*
+import android.view.View
+import expo.modules.kotlin.AppContext
+import expo.modules.kotlin.views.ExpoView
+
+/**
+ * GradientMaskView - 原生漸層透明遮罩
+ *
+ * 使用 Bitmap 作為 mask，配合 setLayerType + PorterDuff.Mode.DST_IN
+ *
+ * 顏色語意（與 iOS CAGradientLayer mask 一致）：
+ * - 顏色的 alpha 值決定該區域內容的可見度
+ * - alpha = 0 → 內容透明（看到背景）
+ * - alpha = 255 → 內容不透明（看到內容）
+ *
+ * maskOpacity 控制漸層 mask 效果的顯示程度：
+ * - maskOpacity = 0 → 無漸層效果，內容完全可見（全部 alpha=255）
+ * - maskOpacity = 1 → 完整漸層效果（使用原始 alpha）
+ */
+class GradientMaskView(context: Context, appContext: AppContext) : ExpoView(context, appContext) {
+
+    // Gradient mask 的參數
+    private var colors: IntArray? = null
+    private var locations: FloatArray? = null
+    private var direction: String = "top"
+
+    // maskOpacity: 0 = 無漸層效果, 1 = 完整漸層效果
+    private var maskOpacity: Float = 1f
+
+    // Mask bitmap 和相關的 Paint
+    private var maskBitmap: Bitmap? = null
+    private var maskBitmapInvalidated = true
+    private val paint = Paint(Paint.ANTI_ALIAS_FLAG)
+    private val porterDuffXferMode = PorterDuffXfermode(PorterDuff.Mode.DST_IN)
+
+    init {
+        // 確保背景是透明的
+        setBackgroundColor(Color.TRANSPARENT)
+        // 始終使用 SOFTWARE 模式，避免動態切換層模式造成的黑色閃爍
+        setLayerType(View.LAYER_TYPE_SOFTWARE, null)
+
+        android.util.Log.d("GradientMask", "=== GradientMaskView init ===")
+    }
+
+    // MARK: - Props setters
+
+    fun setColors(colorArray: List<Int>?) {
+        colors = colorArray?.toIntArray()
+        maskBitmapInvalidated = true
+        invalidate()
+    }
+
+    fun setLocations(locationArray: List<Double>?) {
+        locations = locationArray?.map { it.toFloat() }?.toFloatArray()
+        maskBitmapInvalidated = true
+        invalidate()
+    }
+
+    fun setDirection(dir: String) {
+        direction = dir
+        maskBitmapInvalidated = true
+        invalidate()
+    }
+
+    fun setMaskOpacity(opacity: Double) {
+        maskOpacity = opacity.toFloat().coerceIn(0f, 1f)
+        maskBitmapInvalidated = true
+        invalidate()
+    }
+
+    // MARK: - Layout
+
+    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
+        super.onSizeChanged(w, h, oldw, oldh)
+        if (w > 0 && h > 0) {
+            updateMaskBitmap()
+            maskBitmapInvalidated = false
+        }
+    }
+
+    override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
+        super.onLayout(changed, l, t, r, b)
+        if (changed) {
+            maskBitmapInvalidated = true
+        }
+    }
+
+    // MARK: - Drawing
+
+    override fun dispatchDraw(canvas: Canvas) {
+        // 檢查尺寸是否有效
+        if (width <= 0 || height <= 0) {
+            super.dispatchDraw(canvas)
+            return
+        }
+
+        // 如果 mask bitmap 需要更新，重新創建
+        if (maskBitmapInvalidated) {
+            updateMaskBitmap()
+            maskBitmapInvalidated = false
+        }
+
+        val bitmap = maskBitmap
+        // 如果沒有 mask bitmap 或 maskOpacity=0，直接繪製子元件（無 mask 效果）
+        if (bitmap == null || maskOpacity <= 0f) {
+            super.dispatchDraw(canvas)
+            return
+        }
+
+        // 使用 saveLayer 創建離屏緩衝區
+        val saveCount = canvas.saveLayer(
+            0f, 0f,
+            width.toFloat(), height.toFloat(),
+            null
+        )
+
+        try {
+            // 先繪製所有子元件到離屏緩衝區
+            super.dispatchDraw(canvas)
+
+            // 應用 mask（使用 DST_IN 模式）
+            paint.xfermode = porterDuffXferMode
+            canvas.drawBitmap(bitmap, 0f, 0f, paint)
+            paint.xfermode = null
+        } finally {
+            canvas.restoreToCount(saveCount)
+        }
+    }
+
+    private fun updateMaskBitmap() {
+        if (width <= 0 || height <= 0) return
+
+        // 回收舊的 bitmap
+        maskBitmap?.recycle()
+
+        // 創建新的 mask bitmap
+        val bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888)
+        val bitmapCanvas = Canvas(bitmap)
+
+        val currentColors = colors
+        val currentLocations = locations
+
+        // 如果沒有 colors/locations，創建全白 mask（內容完全可見）
+        if (currentColors == null || currentLocations == null ||
+            currentColors.size != currentLocations.size ||
+            currentColors.isEmpty()) {
+            bitmapCanvas.drawColor(Color.WHITE)
+            maskBitmap = bitmap
+            return
+        }
+
+        // 計算 effective colors（根據 maskOpacity 混合）
+        val effectiveColors = IntArray(currentColors.size) { i ->
+            val originalColor = currentColors[i]
+            val originalAlpha = Color.alpha(originalColor)
+            // 當 maskOpacity = 0，alpha = 255（完全不透明，內容完全可見）
+            // 當 maskOpacity = 1，alpha = originalAlpha
+            val blendedAlpha = (255 + (originalAlpha - 255) * maskOpacity).toInt()
+            Color.argb(blendedAlpha, 255, 255, 255)
+        }
+
+        // 建立 gradient shader
+        val (startX, startY, endX, endY) = getGradientCoordinates()
+        val shader = LinearGradient(
+            startX, startY, endX, endY,
+            effectiveColors,
+            currentLocations,
+            Shader.TileMode.CLAMP
+        )
+
+        // 繪製漸層到 bitmap
+        val gradientPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
+            this.shader = shader
+        }
+        bitmapCanvas.drawRect(0f, 0f, width.toFloat(), height.toFloat(), gradientPaint)
+
+        maskBitmap = bitmap
+    }
+
+    override fun onDetachedFromWindow() {
+        super.onDetachedFromWindow()
+        maskBitmap?.recycle()
+        maskBitmap = null
+    }
+
+    private fun getGradientCoordinates(): List<Float> {
+        return when (direction) {
+            "top" -> listOf(0f, 0f, 0f, height.toFloat())
+            "bottom" -> listOf(0f, height.toFloat(), 0f, 0f)
+            "left" -> listOf(0f, 0f, width.toFloat(), 0f)
+            "right" -> listOf(width.toFloat(), 0f, 0f, 0f)
+            else -> listOf(0f, 0f, 0f, height.toFloat())
+        }
+    }
+}

package/build/AnimatedGradientMaskView.d.ts

@@ -0,0 +1,36 @@
+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 - 支援 Reanimated SharedValue 動畫的漸層遮罩元件
+ *
+ * 使用方式：
+ * ```tsx
+ * const maskOpacity = useSharedValue(0);
+ *
+ * // 動畫顯示
+ * maskOpacity.value = withTiming(1, {
+ *   duration: 600,
+ *   easing: Easing.in(Easing.quad),
+ * });
+ *
+ * <AnimatedGradientMaskView
+ *   colors={colors}
+ *   locations={locations}
+ *   direction="top"
+ *   maskOpacity={maskOpacity}
+ * >
+ *   <FlashList ... />
+ * </AnimatedGradientMaskView>
+ * ```
+ */
+export default function AnimatedGradientMaskView(props: AnimatedGradientMaskViewProps): React.JSX.Element;
+//# sourceMappingURL=AnimatedGradientMaskView.d.ts.map

package/build/AnimatedGradientMaskView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimatedGradientMaskView.d.ts","sourceRoot":"","sources":["../src/AnimatedGradientMaskView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAG3D,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAO7D,MAAM,MAAM,6BAA6B,GAAG,IAAI,CAC9C,qBAAqB,EACrB,aAAa,CACd,GAAG;IACF;;;;OAIG;IACH,WAAW,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CAClC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAC9C,KAAK,EAAE,6BAA6B,qBASrC"}

package/build/AnimatedGradientMaskView.js

@@ -0,0 +1,37 @@
+import { requireNativeView } from 'expo';
+import * as React from 'react';
+import { useAnimatedProps } from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
+const NativeView = requireNativeView('GradientMask');
+const AnimatedNativeView = Animated.createAnimatedComponent(NativeView);
+/**
+ * AnimatedGradientMaskView - 支援 Reanimated SharedValue 動畫的漸層遮罩元件
+ *
+ * 使用方式：
+ * ```tsx
+ * const maskOpacity = useSharedValue(0);
+ *
+ * // 動畫顯示
+ * maskOpacity.value = withTiming(1, {
+ *   duration: 600,
+ *   easing: Easing.in(Easing.quad),
+ * });
+ *
+ * <AnimatedGradientMaskView
+ *   colors={colors}
+ *   locations={locations}
+ *   direction="top"
+ *   maskOpacity={maskOpacity}
+ * >
+ *   <FlashList ... />
+ * </AnimatedGradientMaskView>
+ * ```
+ */
+export default function AnimatedGradientMaskView(props) {
+    const { maskOpacity, ...restProps } = props;
+    const animatedProps = useAnimatedProps(() => ({
+        maskOpacity: maskOpacity.value,
+    }));
+    return <AnimatedNativeView {...restProps} animatedProps={animatedProps}/>;
+}
+//# sourceMappingURL=AnimatedGradientMaskView.js.map

package/build/AnimatedGradientMaskView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimatedGradientMaskView.js","sourceRoot":"","sources":["../src/AnimatedGradientMaskView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,MAAM,CAAC;AACzC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3D,OAAO,QAAQ,MAAM,yBAAyB,CAAC;AAI/C,MAAM,UAAU,GACd,iBAAiB,CAAC,cAAc,CAAC,CAAC;AAEpC,MAAM,kBAAkB,GAAG,QAAQ,CAAC,uBAAuB,CAAC,UAAU,CAAC,CAAC;AAcxE;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAC9C,KAAoC;IAEpC,MAAM,EAAE,WAAW,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAE5C,MAAM,aAAa,GAAG,gBAAgB,CAA6C,GAAG,EAAE,CAAC,CAAC;QACxF,WAAW,EAAE,WAAW,CAAC,KAAK;KAC/B,CAAC,CAAC,CAAC;IAEJ,OAAO,CAAC,kBAAkB,CAAC,IAAI,SAAS,CAAC,CAAC,aAAa,CAAC,CAAC,aAAa,CAAC,EAAG,CAAC;AAC7E,CAAC","sourcesContent":["import { requireNativeView } from 'expo';\nimport * as React from 'react';\nimport { useAnimatedProps } from 'react-native-reanimated';\nimport type { SharedValue } from 'react-native-reanimated';\nimport Animated from 'react-native-reanimated';\n\nimport { GradientMaskViewProps } from './GradientMask.types';\n\nconst NativeView: React.ComponentType<GradientMaskViewProps> =\n  requireNativeView('GradientMask');\n\nconst AnimatedNativeView = Animated.createAnimatedComponent(NativeView);\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 * AnimatedGradientMaskView - 支援 Reanimated SharedValue 動畫的漸層遮罩元件\n *\n * 使用方式：\n * ```tsx\n * const maskOpacity = useSharedValue(0);\n *\n * // 動畫顯示\n * maskOpacity.value = withTiming(1, {\n *   duration: 600,\n *   easing: Easing.in(Easing.quad),\n * });\n *\n * <AnimatedGradientMaskView\n *   colors={colors}\n *   locations={locations}\n *   direction=\"top\"\n *   maskOpacity={maskOpacity}\n * >\n *   <FlashList ... />\n * </AnimatedGradientMaskView>\n * ```\n */\nexport default function AnimatedGradientMaskView(\n  props: AnimatedGradientMaskViewProps\n) {\n  const { maskOpacity, ...restProps } = props;\n\n  const animatedProps = useAnimatedProps<Pick<GradientMaskViewProps, 'maskOpacity'>>(() => ({\n    maskOpacity: maskOpacity.value,\n  }));\n\n  return <AnimatedNativeView {...restProps} animatedProps={animatedProps} />;\n}\n\n"]}

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