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

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)
+        }
+    }
+}

package/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "react-native-gradient-mask",
+  "version": "0.1.0-beta.1",
+  "description": "A native gradient mask component for React Native with Reanimated animation support. Supports iOS, Android, and Web platforms.",
+  "main": "build/index.js",
+  "module": "build/index.js",
+  "types": "build/index.d.ts",
+  "sideEffects": false,
+  "scripts": {
+    "build": "expo-module build",
+    "clean": "expo-module clean",
+    "lint": "expo-module lint",
+    "test": "expo-module test",
+    "prepare": "expo-module prepare",
+    "prepublishOnly": "expo-module prepublishOnly",
+    "expo-module": "expo-module",
+    "open:ios": "xed example/ios",
+    "open:android": "open -a \"Android Studio\" example/android"
+  },
+  "keywords": [
+    "react-native",
+    "expo",
+    "gradient",
+    "mask",
+    "fade",
+    "opacity",
+    "animation",
+    "reanimated",
+    "native",
+    "ios",
+    "android",
+    "web",
+    "gradient-mask",
+    "fade-effect",
+    "scroll-fade",
+    "list-mask"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/CS6/react-native-gradient-mask.git"
+  },
+  "bugs": {
+    "url": "https://github.com/CS6/react-native-gradient-mask/issues"
+  },
+  "author": {
+    "name": "DaYuan Lin",
+    "email": "dayuan.code@gmail.com",
+    "url": "https://github.com/CS6"
+  },
+  "license": "MIT",
+  "homepage": "https://github.com/CS6/react-native-gradient-mask#readme",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/CS6"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "os": [
+    "darwin",
+    "linux",
+    "win32"
+  ],
+  "dependencies": {},
+  "devDependencies": {
+    "@types/react": "~19.1.0",
+    "expo": "^54.0.27",
+    "expo-module-scripts": "^5.0.8",
+    "react-native": "0.81.5",
+    "react-native-reanimated": "^3.0.0"
+  },
+  "peerDependencies": {
+    "expo": "*",
+    "react": "*",
+    "react-native": "*",
+    "react-native-reanimated": ">=3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react-native-reanimated": {
+      "optional": true
+    }
+  }
+}