react-native-linear-gradient-fabric 0.1.0

package/README.md

@@ -0,0 +1,132 @@
+# react-native-linear-gradient-fabric
+
+A modern replacement for `react-native-linear-gradient` with full New Architecture (Fabric) support.
+
+## Features
+
+- Full support for React Native New Architecture (Fabric)
+- Backward compatible with Old Architecture via Interop Layer
+- GPU-accelerated gradient rendering
+- All features from the original `react-native-linear-gradient`
+
+## Installation
+
+```sh
+bun add react-native-linear-gradient-fabric
+# or
+npm install react-native-linear-gradient-fabric
+```
+
+### iOS
+
+```sh
+cd ios && pod install
+```
+
+### Android
+
+No additional steps required. The library will be automatically linked.
+
+## Usage
+
+```tsx
+import { LinearGradient } from 'react-native-linear-gradient-fabric';
+
+// Basic vertical gradient
+<LinearGradient
+  colors={['#4c669f', '#3b5998', '#192f6a']}
+  style={{ flex: 1 }}
+/>
+
+// Horizontal gradient
+<LinearGradient
+  colors={['#ff6b6b', '#feca57', '#48dbfb']}
+  start={{ x: 0, y: 0.5 }}
+  end={{ x: 1, y: 0.5 }}
+  style={{ height: 100 }}
+/>
+
+// Diagonal gradient
+<LinearGradient
+  colors={['#a55eea', '#45aaf2']}
+  start={{ x: 0, y: 0 }}
+  end={{ x: 1, y: 1 }}
+  style={{ height: 100 }}
+/>
+
+// Gradient with custom color stops
+<LinearGradient
+  colors={['#ff0000', '#ffff00', '#00ff00']}
+  locations={[0, 0.3, 1]}
+  style={{ height: 100 }}
+/>
+
+// Angle-based gradient
+<LinearGradient
+  colors={['#667eea', '#764ba2']}
+  useAngle
+  angle={45}
+  style={{ height: 100 }}
+/>
+
+// Gradient as background with children
+<LinearGradient
+  colors={['#00c6fb', '#005bea']}
+  style={{ padding: 20, borderRadius: 10 }}
+>
+  <Text style={{ color: 'white' }}>Hello, Gradient!</Text>
+</LinearGradient>
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `colors` | `ColorValue[]` | Yes | - | An array of at least 2 colors |
+| `start` | `{ x: number, y: number }` | No | `{ x: 0.5, y: 0 }` | Start point of the gradient |
+| `end` | `{ x: number, y: number }` | No | `{ x: 0.5, y: 1 }` | End point of the gradient |
+| `locations` | `number[]` | No | evenly distributed | Color stop positions (0-1) |
+| `useAngle` | `boolean` | No | `false` | Use angle instead of start/end |
+| `angle` | `number` | No | `0` | Gradient angle in degrees |
+| `angleCenter` | `{ x: number, y: number }` | No | `{ x: 0.5, y: 0.5 }` | Center point for angle rotation |
+| `style` | `ViewStyle` | No | - | Style for the gradient view |
+| `children` | `ReactNode` | No | - | Content to render on top |
+
+### Coordinate System
+
+The `start` and `end` props use a coordinate system where:
+- `x: 0` = left edge, `x: 1` = right edge
+- `y: 0` = top edge, `y: 1` = bottom edge
+
+### Angle System
+
+When using `useAngle` and `angle`:
+- `0°` = upward (top)
+- `90°` = rightward
+- `180°` = downward (bottom)
+- `270°` = leftward
+
+## Testing
+
+For testing, you can use the provided mock:
+
+```js
+// jest.setup.js
+jest.mock('react-native-linear-gradient-fabric', () =>
+  require('react-native-linear-gradient-fabric/jest/linear-gradient-mock')
+);
+```
+
+## Requirements
+
+- React Native 0.72+
+- iOS 13.4+
+- Android SDK 21+
+
+## License
+
+MIT
+
+## Contributing
+
+See [CONTRIBUTING.md](CONTRIBUTING.md) for details.

package/android/build.gradle

@@ -0,0 +1,107 @@
+buildscript {
+    ext.safeExtGet = {prop, fallback ->
+        rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
+    }
+    repositories {
+        google()
+        mavenCentral()
+    }
+    dependencies {
+        classpath("com.android.tools.build:gradle:7.4.2")
+        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:${safeExtGet('kotlinVersion', '1.8.22')}")
+    }
+}
+
+def isNewArchitectureEnabled() {
+    return rootProject.hasProperty("newArchEnabled") && rootProject.getProperty("newArchEnabled") == "true"
+}
+
+apply plugin: "com.android.library"
+apply plugin: "kotlin-android"
+
+if (isNewArchitectureEnabled()) {
+    apply plugin: "com.facebook.react"
+}
+
+def getExtOrDefault(name) {
+    return rootProject.ext.has(name) ? rootProject.ext.get(name) : project.properties["LinearGradientFabric_" + name]
+}
+
+def getExtOrIntegerDefault(name) {
+    return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties["LinearGradientFabric_" + name]).toInteger()
+}
+
+def supportsNamespace() {
+    def parsed = com.android.Version.ANDROID_GRADLE_PLUGIN_VERSION.tokenize('.')
+    def major = parsed[0].toInteger()
+    def minor = parsed[1].toInteger()
+    return (major == 7 && minor >= 3) || major >= 8
+}
+
+android {
+    if (supportsNamespace()) {
+        namespace "com.lineargradientfabric"
+    }
+
+    compileSdkVersion getExtOrIntegerDefault("compileSdkVersion")
+
+    defaultConfig {
+        minSdkVersion getExtOrIntegerDefault("minSdkVersion")
+        targetSdkVersion getExtOrIntegerDefault("targetSdkVersion")
+        buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
+    }
+
+    buildFeatures {
+        buildConfig true
+    }
+
+    buildTypes {
+        release {
+            minifyEnabled false
+        }
+    }
+
+    lintOptions {
+        disable "GradleCompatible"
+    }
+
+    compileOptions {
+        sourceCompatibility JavaVersion.VERSION_17
+        targetCompatibility JavaVersion.VERSION_17
+    }
+
+    kotlinOptions {
+        jvmTarget = "17"
+    }
+
+    sourceSets {
+        main {
+            if (supportsNamespace()) {
+                manifest.srcFile "src/main/AndroidManifestNew.xml"
+            }
+            if (isNewArchitectureEnabled()) {
+                java.srcDirs += ["src/newarch"]
+            } else {
+                java.srcDirs += ["src/oldarch"]
+            }
+        }
+    }
+}
+
+repositories {
+    mavenCentral()
+    google()
+}
+
+dependencies {
+    implementation "com.facebook.react:react-android"
+    implementation "org.jetbrains.kotlin:kotlin-stdlib:${safeExtGet('kotlinVersion', '1.8.22')}"
+}
+
+if (isNewArchitectureEnabled()) {
+    react {
+        jsRootDir = file("../src/")
+        libraryName = "LinearGradientFabric"
+        codegenJavaPackageName = "com.lineargradientfabric"
+    }
+}

package/android/gradle.properties

@@ -0,0 +1,4 @@
+LinearGradientFabric_kotlinVersion=1.8.22
+LinearGradientFabric_minSdkVersion=21
+LinearGradientFabric_targetSdkVersion=34
+LinearGradientFabric_compileSdkVersion=34

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,3 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    package="com.lineargradientfabric">
+</manifest>

package/android/src/main/AndroidManifestNew.xml

@@ -0,0 +1,2 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+</manifest>

package/android/src/main/java/com/lineargradientfabric/LinearGradientFabricPackage.kt

@@ -0,0 +1,17 @@
+package com.lineargradientfabric
+
+import com.facebook.react.ReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.uimanager.ViewManager
+
+class LinearGradientFabricPackage : ReactPackage {
+
+    override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
+        return emptyList()
+    }
+
+    override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
+        return listOf(LinearGradientViewManager())
+    }
+}

package/android/src/main/java/com/lineargradientfabric/LinearGradientView.kt

@@ -0,0 +1,128 @@
+package com.lineargradientfabric
+
+import android.content.Context
+import android.graphics.Canvas
+import android.graphics.LinearGradient
+import android.graphics.Paint
+import android.graphics.Shader
+import android.widget.FrameLayout
+import kotlin.math.cos
+import kotlin.math.sin
+
+class LinearGradientView(context: Context) : FrameLayout(context) {
+
+    private val paint = Paint()
+    private var colors: IntArray = intArrayOf()
+    private var locations: FloatArray? = null
+    private var startX: Float = 0.5f
+    private var startY: Float = 0f
+    private var endX: Float = 0.5f
+    private var endY: Float = 1f
+    private var useAngle: Boolean = false
+    private var angle: Float = 0f
+    private var angleCenterX: Float = 0.5f
+    private var angleCenterY: Float = 0.5f
+
+    init {
+        // Enable drawing for ViewGroup
+        setWillNotDraw(false)
+    }
+
+    fun setColors(colors: IntArray) {
+        this.colors = colors
+        invalidate()
+    }
+
+    fun setLocations(locations: FloatArray?) {
+        this.locations = locations
+        invalidate()
+    }
+
+    fun setStartPoint(x: Float, y: Float) {
+        this.startX = x
+        this.startY = y
+        invalidate()
+    }
+
+    fun setEndPoint(x: Float, y: Float) {
+        this.endX = x
+        this.endY = y
+        invalidate()
+    }
+
+    fun setUseAngle(useAngle: Boolean) {
+        this.useAngle = useAngle
+        invalidate()
+    }
+
+    fun setAngle(angle: Float) {
+        this.angle = angle
+        invalidate()
+    }
+
+    fun setAngleCenter(x: Float, y: Float) {
+        this.angleCenterX = x
+        this.angleCenterY = y
+        invalidate()
+    }
+
+    override fun onDraw(canvas: Canvas) {
+        if (colors.size < 2 || width == 0 || height == 0) {
+            super.onDraw(canvas)
+            return
+        }
+
+        val (x0, y0, x1, y1) = calculateGradientPoints()
+
+        val gradient = LinearGradient(
+            x0, y0, x1, y1,
+            colors,
+            locations,
+            Shader.TileMode.CLAMP
+        )
+
+        paint.shader = gradient
+        canvas.drawRect(0f, 0f, width.toFloat(), height.toFloat(), paint)
+
+        super.onDraw(canvas)
+    }
+
+    private fun calculateGradientPoints(): FloatArray {
+        return if (useAngle) {
+            calculatePointsFromAngle()
+        } else {
+            floatArrayOf(
+                startX * width,
+                startY * height,
+                endX * width,
+                endY * height
+            )
+        }
+    }
+
+    private fun calculatePointsFromAngle(): FloatArray {
+        // Convert angle from degrees to radians
+        // Angle 0 = up, 90 = right, 180 = down, 270 = left
+        val angleRad = Math.toRadians((angle - 90).toDouble())
+
+        // Calculate the gradient direction vector
+        val dx = cos(angleRad).toFloat()
+        val dy = sin(angleRad).toFloat()
+
+        // Calculate the center point in pixels
+        val centerPx = angleCenterX * width
+        val centerPy = angleCenterY * height
+
+        // Calculate the length to cover the view
+        // Use half the diagonal for proper coverage
+        val halfWidth = width / 2f
+        val halfHeight = height / 2f
+
+        val x0 = centerPx - dx * halfWidth
+        val y0 = centerPy - dy * halfHeight
+        val x1 = centerPx + dx * halfWidth
+        val y1 = centerPy + dy * halfHeight
+
+        return floatArrayOf(x0, y0, x1, y1)
+    }
+}

package/android/src/newarch/LinearGradientViewManager.kt

@@ -0,0 +1,92 @@
+package com.lineargradientfabric
+
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.ViewManagerDelegate
+import com.facebook.react.uimanager.annotations.ReactProp
+import com.facebook.react.viewmanagers.LinearGradientViewManagerDelegate
+import com.facebook.react.viewmanagers.LinearGradientViewManagerInterface
+
+@ReactModule(name = LinearGradientViewManager.REACT_CLASS)
+class LinearGradientViewManager : ViewGroupManager<LinearGradientView>(),
+    LinearGradientViewManagerInterface<LinearGradientView> {
+
+    private val delegate: ViewManagerDelegate<LinearGradientView> = LinearGradientViewManagerDelegate(this)
+
+    override fun getDelegate(): ViewManagerDelegate<LinearGradientView> = delegate
+
+    override fun getName(): String = REACT_CLASS
+
+    override fun createViewInstance(reactContext: ThemedReactContext): LinearGradientView {
+        return LinearGradientView(reactContext)
+    }
+
+    @ReactProp(name = "colors")
+    override fun setColors(view: LinearGradientView, colors: ReadableArray?) {
+        if (colors == null) return
+
+        val colorArray = IntArray(colors.size())
+        for (i in 0 until colors.size()) {
+            colorArray[i] = colors.getInt(i)
+        }
+        view.setColors(colorArray)
+    }
+
+    @ReactProp(name = "locations")
+    override fun setLocations(view: LinearGradientView, locations: ReadableArray?) {
+        if (locations == null) {
+            view.setLocations(null)
+            return
+        }
+
+        val locationArray = FloatArray(locations.size())
+        for (i in 0 until locations.size()) {
+            locationArray[i] = locations.getDouble(i).toFloat()
+        }
+        view.setLocations(locationArray)
+    }
+
+    @ReactProp(name = "startPoint")
+    override fun setStartPoint(view: LinearGradientView, startPoint: ReadableMap?) {
+        if (startPoint == null) return
+
+        val x = startPoint.getDouble("x").toFloat()
+        val y = startPoint.getDouble("y").toFloat()
+        view.setStartPoint(x, y)
+    }
+
+    @ReactProp(name = "endPoint")
+    override fun setEndPoint(view: LinearGradientView, endPoint: ReadableMap?) {
+        if (endPoint == null) return
+
+        val x = endPoint.getDouble("x").toFloat()
+        val y = endPoint.getDouble("y").toFloat()
+        view.setEndPoint(x, y)
+    }
+
+    @ReactProp(name = "useAngle", defaultBoolean = false)
+    override fun setUseAngle(view: LinearGradientView, useAngle: Boolean) {
+        view.setUseAngle(useAngle)
+    }
+
+    @ReactProp(name = "angle", defaultFloat = 0f)
+    override fun setAngle(view: LinearGradientView, angle: Float) {
+        view.setAngle(angle)
+    }
+
+    @ReactProp(name = "angleCenter")
+    override fun setAngleCenter(view: LinearGradientView, angleCenter: ReadableMap?) {
+        if (angleCenter == null) return
+
+        val x = angleCenter.getDouble("x").toFloat()
+        val y = angleCenter.getDouble("y").toFloat()
+        view.setAngleCenter(x, y)
+    }
+
+    companion object {
+        const val REACT_CLASS = "LinearGradientView"
+    }
+}

package/android/src/oldarch/LinearGradientViewManager.kt

@@ -0,0 +1,82 @@
+package com.lineargradientfabric
+
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.annotations.ReactProp
+
+class LinearGradientViewManager : ViewGroupManager<LinearGradientView>() {
+
+    override fun getName(): String = REACT_CLASS
+
+    override fun createViewInstance(reactContext: ThemedReactContext): LinearGradientView {
+        return LinearGradientView(reactContext)
+    }
+
+    @ReactProp(name = "colors")
+    fun setColors(view: LinearGradientView, colors: ReadableArray?) {
+        if (colors == null) return
+
+        val colorArray = IntArray(colors.size())
+        for (i in 0 until colors.size()) {
+            colorArray[i] = colors.getInt(i)
+        }
+        view.setColors(colorArray)
+    }
+
+    @ReactProp(name = "locations")
+    fun setLocations(view: LinearGradientView, locations: ReadableArray?) {
+        if (locations == null) {
+            view.setLocations(null)
+            return
+        }
+
+        val locationArray = FloatArray(locations.size())
+        for (i in 0 until locations.size()) {
+            locationArray[i] = locations.getDouble(i).toFloat()
+        }
+        view.setLocations(locationArray)
+    }
+
+    @ReactProp(name = "startPoint")
+    fun setStartPoint(view: LinearGradientView, startPoint: ReadableMap?) {
+        if (startPoint == null) return
+
+        val x = startPoint.getDouble("x").toFloat()
+        val y = startPoint.getDouble("y").toFloat()
+        view.setStartPoint(x, y)
+    }
+
+    @ReactProp(name = "endPoint")
+    fun setEndPoint(view: LinearGradientView, endPoint: ReadableMap?) {
+        if (endPoint == null) return
+
+        val x = endPoint.getDouble("x").toFloat()
+        val y = endPoint.getDouble("y").toFloat()
+        view.setEndPoint(x, y)
+    }
+
+    @ReactProp(name = "useAngle")
+    fun setUseAngle(view: LinearGradientView, useAngle: Boolean) {
+        view.setUseAngle(useAngle)
+    }
+
+    @ReactProp(name = "angle")
+    fun setAngle(view: LinearGradientView, angle: Float) {
+        view.setAngle(angle)
+    }
+
+    @ReactProp(name = "angleCenter")
+    fun setAngleCenter(view: LinearGradientView, angleCenter: ReadableMap?) {
+        if (angleCenter == null) return
+
+        val x = angleCenter.getDouble("x").toFloat()
+        val y = angleCenter.getDouble("y").toFloat()
+        view.setAngleCenter(x, y)
+    }
+
+    companion object {
+        const val REACT_CLASS = "LinearGradientView"
+    }
+}

package/ios/LinearGradientView.h

@@ -0,0 +1,13 @@
+#import <UIKit/UIKit.h>
+
+@interface LinearGradientView : UIView
+
+@property (nonatomic, copy) NSArray<NSNumber *> *colors;
+@property (nonatomic, copy) NSArray<NSNumber *> *locations;
+@property (nonatomic, assign) CGPoint startPoint;
+@property (nonatomic, assign) CGPoint endPoint;
+@property (nonatomic, assign) BOOL useAngle;
+@property (nonatomic, assign) CGFloat angle;
+@property (nonatomic, assign) CGPoint angleCenter;
+
+@end