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

package/README.zh-TW.md

@@ -0,0 +1,335 @@
+<p align="center">
+  <h1 align="center">react-native-gradient-mask</h1>
+</p>
+
+<p align="center">
+  <b>React Native 原生漸層遮罩元件</b>
+</p>
+
+<p align="center">
+  輕鬆建立精美的淡出效果、列表遮罩與流暢的漸層過渡動畫，具備原生效能與 Reanimated 動畫支援。
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/react-native-gradient-mask">
+    <img src="https://img.shields.io/npm/v/react-native-gradient-mask.svg" alt="npm version" />
+  </a>
+  <a href="https://www.npmjs.com/package/react-native-gradient-mask">
+    <img src="https://img.shields.io/npm/dm/react-native-gradient-mask.svg" alt="npm downloads" />
+  </a>
+  <img src="https://img.shields.io/badge/platforms-iOS%20%7C%20Android%20%7C%20Web-brightgreen.svg" alt="platforms" />
+  <img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="license" />
+</p>
+
+<p align="center">
+  <a href="./README.md">English</a> •
+  <a href="./README.ja.md">日本語</a>
+</p>
+
+---
+
+## 展示
+
+<p align="center">
+  <table>
+    <tr>
+      <td align="center"><b>iOS</b></td>
+      <td align="center"><b>Android</b></td>
+    </tr>
+    <tr>
+      <td><a href="./images/ios  Demo Video.webm"><img src="./images/ios.png" alt="iOS 展示" width="280" /></a></td>
+      <td><a href="./images/android.mp4"><img src="./images/android.png" alt="Android 展示" width="280" /></a></td>
+    </tr>
+  </table>
+</p>
+
+## 特色
+
+| 特色 | 說明 |
+|------|------|
+| **跨平台** | 支援 iOS、Android 和 Web |
+| **原生效能** | iOS: `CAGradientLayer` • Android: `Bitmap` + `PorterDuff` • Web: CSS `mask-image` |
+| **Reanimated 支援** | 透過 `AnimatedGradientMaskView` 實現 60fps 流暢遮罩動畫 |
+| **彈性設定** | 自訂顏色、位置、方向與遮罩強度 |
+| **TypeScript** | 完整型別定義 |
+
+## 安裝
+
+```bash
+npm install react-native-gradient-mask
+```
+
+```bash
+yarn add react-native-gradient-mask
+```
+
+### 需求
+
+| 相依套件 | 版本 |
+|----------|------|
+| Expo SDK | 50+ |
+| React Native | 0.73+ |
+| react-native-reanimated | >= 3.0.0 *（選用）* |
+
+### 設定
+
+<details>
+<summary><b>iOS</b></summary>
+
+```bash
+cd ios && pod install
+```
+</details>
+
+<details>
+<summary><b>Android</b></summary>
+
+無需額外設定，自動連結已啟用。
+</details>
+
+---
+
+## 快速開始
+
+```tsx
+import { processColor } from 'react-native';
+import { GradientMaskView } from 'react-native-gradient-mask';
+
+const colors = [
+  processColor('rgba(0,0,0,0)'),
+  processColor('rgba(0,0,0,1)'),
+];
+
+export default function App() {
+  return (
+    <GradientMaskView
+      colors={colors}
+      locations={[0, 1]}
+      direction="top"
+      style={{ flex: 1 }}
+    >
+      <YourContent />
+    </GradientMaskView>
+  );
+}
+```
+
+---
+
+## API 參考
+
+### 元件
+
+| 元件 | 說明 |
+|------|------|
+| `GradientMaskView` | 基礎漸層遮罩元件 |
+| `AnimatedGradientMaskView` | 支援 Reanimated 動畫的漸層遮罩元件 |
+
+### Props
+
+#### GradientMaskView
+
+| 屬性 | 型別 | 必填 | 預設值 | 說明 |
+|------|------|:----:|--------|------|
+| `colors` | `(number \| null)[]` | 是 | - | 漸層顏色（需使用 `processColor()`） |
+| `locations` | `number[]` | 是 | - | 顏色位置 (0-1) |
+| `direction` | `'top' \| 'bottom' \| 'left' \| 'right'` | 否 | `'top'` | 漸層方向 |
+| `maskOpacity` | `number` | 否 | `1` | 遮罩強度 (0-1) |
+| `style` | `ViewStyle` | 否 | - | 容器樣式 |
+| `children` | `ReactNode` | 否 | - | 要套用遮罩的內容 |
+
+#### AnimatedGradientMaskView
+
+與 `GradientMaskView` 相同，但 `maskOpacity` 接受 `SharedValue<number>` 用於動畫控制。
+
+### 方向說明
+
+| 方向 | 效果 |
+|------|------|
+| `top` | 頂部透明 → 底部不透明 |
+| `bottom` | 底部透明 → 頂部不透明 |
+| `left` | 左側透明 → 右側不透明 |
+| `right` | 右側透明 → 左側不透明 |
+
+---
+
+## 範例
+
+### 基本淡出效果
+
+```tsx
+import { processColor } from 'react-native';
+import { GradientMaskView } from 'react-native-gradient-mask';
+
+const colors = [
+  processColor('rgba(0,0,0,0)'),
+  processColor('rgba(0,0,0,0.5)'),
+  processColor('rgba(0,0,0,1)'),
+];
+
+function FadeExample() {
+  return (
+    <GradientMaskView
+      colors={colors}
+      locations={[0, 0.3, 1]}
+      direction="top"
+      style={{ flex: 1 }}
+    >
+      <ScrollView>
+        <Text>套用淡出效果的內容</Text>
+      </ScrollView>
+    </GradientMaskView>
+  );
+}
+```
+
+### 搭配 Reanimated 動畫
+
+```tsx
+import { processColor } from 'react-native';
+import { AnimatedGradientMaskView } from 'react-native-gradient-mask';
+import { useSharedValue, withTiming } from 'react-native-reanimated';
+
+function AnimatedExample() {
+  const maskOpacity = useSharedValue(0);
+
+  const showMask = () => {
+    maskOpacity.value = withTiming(1, { duration: 600 });
+  };
+
+  const hideMask = () => {
+    maskOpacity.value = withTiming(0, { duration: 400 });
+  };
+
+  return (
+    <AnimatedGradientMaskView
+      colors={[
+        processColor('rgba(0,0,0,0)'),
+        processColor('rgba(0,0,0,1)'),
+      ]}
+      locations={[0, 1]}
+      maskOpacity={maskOpacity}
+      style={{ flex: 1 }}
+    >
+      <YourContent />
+    </AnimatedGradientMaskView>
+  );
+}
+```
+
+### 聊天列表動態遮罩
+
+```tsx
+import { useMemo, useCallback, useRef } from 'react';
+import { processColor } from 'react-native';
+import { FlashList } from '@shopify/flash-list';
+import { AnimatedGradientMaskView } from 'react-native-gradient-mask';
+import { useSharedValue, withTiming, cancelAnimation, Easing } from 'react-native-reanimated';
+
+function ChatList({ messages }) {
+  const maskOpacity = useSharedValue(0);
+  const isAtBottomRef = useRef(false);
+
+  const maskColors = useMemo(() => [
+    processColor('rgba(0,0,0,0)'),
+    processColor('rgba(0,0,0,0)'),
+    processColor('rgba(0,0,0,0.2)'),
+    processColor('rgba(0,0,0,0.6)'),
+    processColor('rgba(0,0,0,0.9)'),
+    processColor('rgba(0,0,0,1)'),
+  ], []);
+
+  const handleScroll = useCallback((e) => {
+    const { contentOffset, layoutMeasurement, contentSize } = e.nativeEvent;
+    const distanceFromBottom = contentSize.height - contentOffset.y - layoutMeasurement.height;
+    const isAtBottom = distanceFromBottom <= 30;
+
+    if (isAtBottom !== isAtBottomRef.current) {
+      isAtBottomRef.current = isAtBottom;
+      cancelAnimation(maskOpacity);
+      maskOpacity.value = withTiming(isAtBottom ? 1 : 0, {
+        duration: isAtBottom ? 600 : 400,
+        easing: isAtBottom ? Easing.in(Easing.quad) : Easing.out(Easing.quad),
+      });
+    }
+  }, []);
+
+  return (
+    <AnimatedGradientMaskView
+      colors={maskColors}
+      locations={[0, 0.42, 0.45, 0.48, 0.5, 1]}
+      direction="top"
+      maskOpacity={maskOpacity}
+      style={{ flex: 1 }}
+    >
+      <FlashList
+        data={messages}
+        renderItem={({ item }) => <MessageItem item={item} />}
+        onScroll={handleScroll}
+        scrollEventThrottle={16}
+      />
+    </AnimatedGradientMaskView>
+  );
+}
+```
+
+---
+
+## 技巧與最佳實踐
+
+### 務必使用 `processColor()`
+
+```tsx
+// ✅ 正確
+const colors = [
+  processColor('rgba(0,0,0,0)'),
+  processColor('rgba(0,0,0,1)'),
+];
+
+// ❌ 錯誤 - 無法運作
+const colors = [
+  'rgba(0,0,0,0)',
+  'rgba(0,0,0,1)',
+];
+```
+
+### 使用 `useMemo` 優化效能
+
+```tsx
+const maskColors = useMemo(() => [
+  processColor('rgba(0,0,0,0)'),
+  processColor('rgba(0,0,0,1)'),
+], []);
+```
+
+### 避免閃爍
+
+```tsx
+import { cancelAnimation } from 'react-native-reanimated';
+
+// 在開始新動畫前取消前一個動畫
+cancelAnimation(maskOpacity);
+maskOpacity.value = withTiming(newValue, { duration: 300 });
+```
+
+---
+
+## 平台支援
+
+| 平台 | 實作方式 | 狀態 |
+|------|----------|:----:|
+| iOS | `CAGradientLayer` | ✅ |
+| Android | `Bitmap` + `LinearGradient` + `PorterDuff` | ✅ |
+| Web | CSS `mask-image` + `linear-gradient` | ✅ |
+
+---
+
+## 授權
+
+MIT © [DaYuan Lin (CS6)](https://github.com/CS6)
+
+---
+
+<p align="center">
+  <sub>為 React Native 社群用心打造 ❤️</sub>
+</p>

package/android/build.gradle

@@ -0,0 +1,43 @@
+apply plugin: 'com.android.library'
+
+group = 'expo.modules.gradientmask'
+version = '0.1.0'
+
+def expoModulesCorePlugin = new File(project(":expo-modules-core").projectDir.absolutePath, "ExpoModulesCorePlugin.gradle")
+apply from: expoModulesCorePlugin
+applyKotlinExpoModulesCorePlugin()
+useCoreDependencies()
+useExpoPublishing()
+
+// If you want to use the managed Android SDK versions from expo-modules-core, set this to true.
+// The Android SDK versions will be bumped from time to time in SDK releases and may introduce breaking changes in your module code.
+// Most of the time, you may like to manage the Android SDK versions yourself.
+def useManagedAndroidSdkVersions = false
+if (useManagedAndroidSdkVersions) {
+  useDefaultAndroidSdkVersions()
+} else {
+  buildscript {
+    // Simple helper that allows the root project to override versions declared by this library.
+    ext.safeExtGet = { prop, fallback ->
+      rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
+    }
+  }
+  project.android {
+    compileSdkVersion safeExtGet("compileSdkVersion", 36)
+    defaultConfig {
+      minSdkVersion safeExtGet("minSdkVersion", 24)
+      targetSdkVersion safeExtGet("targetSdkVersion", 36)
+    }
+  }
+}
+
+android {
+  namespace "expo.modules.gradientmask"
+  defaultConfig {
+    versionCode 1
+    versionName "0.1.0"
+  }
+  lintOptions {
+    abortOnError false
+  }
+}

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,2 @@
+<manifest>
+</manifest>

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

@@ -0,0 +1,33 @@
+package expo.modules.gradientmask
+
+import expo.modules.kotlin.modules.Module
+import expo.modules.kotlin.modules.ModuleDefinition
+
+class GradientMaskModule : Module() {
+    override fun definition() = ModuleDefinition {
+        Name("GradientMask")
+
+        // View definition
+        View(GradientMaskView::class) {
+            // colors: List of processed colors (from processColor in JS)
+            Prop("colors") { view: GradientMaskView, colors: List<Int>? ->
+                view.setColors(colors)
+            }
+
+            // locations: Array of floats (0-1) for gradient stops
+            Prop("locations") { view: GradientMaskView, locations: List<Double>? ->
+                view.setLocations(locations)
+            }
+
+            // direction: "top" | "bottom" | "left" | "right"
+            Prop("direction") { view: GradientMaskView, direction: String? ->
+                view.setDirection(direction ?: "top")
+            }
+
+            // maskOpacity: 0 = no mask effect, 1 = full gradient mask
+            Prop("maskOpacity") { view: GradientMaskView, opacity: Double? ->
+                view.setMaskOpacity(opacity ?: 1.0)
+            }
+        }
+    }
+}

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"]}