expo-mesh-gradient 0.3.4 → 0.4.0-canary-20250612-338ef55

package/CHANGELOG.md

@@ -6,6 +6,8 @@
 
 ### 🎉 New features
 
+- [Android] Add mesh gradient on Android. ([#37056](https://github.com/expo/expo/pull/37056) by [@jakex7](https://github.com/jakex7))
+
 ### 🐛 Bug fixes
 
 ### 💡 Others

package/android/build.gradle

@@ -0,0 +1,36 @@
+buildscript {
+
+  repositories {
+    mavenCentral()
+  }
+  dependencies {
+    classpath("org.jetbrains.kotlin.plugin.compose:org.jetbrains.kotlin.plugin.compose.gradle.plugin:${kotlinVersion}")
+  }
+
+}
+
+apply plugin: 'com.android.library'
+apply plugin: 'expo-module-gradle-plugin'
+apply plugin: 'org.jetbrains.kotlin.plugin.compose'
+
+group = 'host.exp.exponent'
+version = '0.4.0-canary-20250612-338ef55'
+
+android {
+  namespace "expo.modules.meshgradient"
+  defaultConfig {
+    versionCode 1
+    versionName "0.4.0-canary-20250612-338ef55"
+  }
+  buildFeatures {
+    compose true
+  }
+  lintOptions {
+    abortOnError false
+  }
+}
+
+dependencies {
+  implementation 'androidx.compose.foundation:foundation-android:1.7.6'
+  implementation 'androidx.compose.ui:ui-android:1.7.6'
+}

package/android/src/main/AndroidManifest.xml

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

package/android/src/main/java/expo/modules/meshgradient/CubicInterpolation.kt

@@ -0,0 +1,16 @@
+package expo.modules.meshgradient
+
+import androidx.compose.ui.graphics.Color
+import kotlin.math.pow
+
+fun cubic(a: Color, b: Color, t: Float): Color {
+  // Smoothstep Cubic Polynomial function
+  val easedT = 3 * t.pow(2) - 2 * t.pow(3)
+
+  return Color(
+    red = a.red * (1 - easedT) + b.red * easedT,
+    green = a.green * (1 - easedT) + b.green * easedT,
+    blue = a.blue * (1 - easedT) + b.blue * easedT,
+    alpha = a.alpha * (1 - easedT) + b.alpha * easedT
+  )
+}

package/android/src/main/java/expo/modules/meshgradient/MeshGradientModule.kt

@@ -0,0 +1,12 @@
+package expo.modules.meshgradient
+
+import expo.modules.kotlin.modules.Module
+import expo.modules.kotlin.modules.ModuleDefinition
+
+class MeshGradientModule : Module() {
+  override fun definition() = ModuleDefinition {
+    Name("ExpoMeshGradient")
+
+    View(MeshGradientView::class)
+  }
+}

package/android/src/main/java/expo/modules/meshgradient/MeshGradientPointData.kt

@@ -0,0 +1,229 @@
+package expo.modules.meshgradient
+
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Path
+import androidx.compose.ui.graphics.PathMeasure
+import androidx.compose.ui.graphics.lerp
+
+// Based on https://gist.github.com/sinasamaki/05725557c945c5329fdba4a3494aaecb
+class PointData(
+  private val points: List<List<Pair<Offset, Color>>>,
+  private val stepsX: Int,
+  private val stepsY: Int,
+  private val smoothsColors: Boolean
+) {
+  val offsets: MutableList<Offset>
+  val colors: MutableList<Color>
+  val indices: List<Int>
+  private val xLength: Int = (points[0].size * stepsX) - (stepsX - 1)
+  private val yLength: Int = (points.size * stepsY) - (stepsY - 1)
+  private val measure = PathMeasure()
+
+  private val indicesBlocks: List<IndicesBlock>
+
+  init {
+    offsets = buildList {
+      repeat(xLength * yLength) {
+        add(Offset(0f, 0f))
+      }
+    }.toMutableList()
+
+    colors = buildList {
+      repeat(xLength * yLength) {
+        add(Color.Transparent)
+      }
+    }.toMutableList()
+
+    indicesBlocks =
+      buildList {
+        for (y in 0..yLength - 2) {
+          for (x in 0..xLength - 2) {
+            val a = (y * xLength) + x
+            val b = a + 1
+            val c = ((y + 1) * xLength) + x
+            val d = c + 1
+            add(
+              IndicesBlock(
+                indices = buildList {
+                  add(a)
+                  add(c)
+                  add(d)
+
+                  add(a)
+                  add(b)
+                  add(d)
+                },
+                x = x, y = y
+              )
+            )
+          }
+        }
+      }
+
+    indices = indicesBlocks.flatMap { it.indices }
+    generateInterpolatedOffsets()
+  }
+
+  private fun generateInterpolatedOffsets() {
+    for (y in 0..points.lastIndex) {
+      for (x in 0..points[y].lastIndex) {
+        this[x * stepsX, y * stepsY] = points[y][x].first
+        this[x * stepsX, y * stepsY] = points[y][x].second
+        if (x != points[y].lastIndex) {
+          val path = cubicPathX(
+            point1 = points[y][x].first,
+            point2 = points[y][x + 1].first,
+            when (x) {
+              0 -> 0
+              points[y].lastIndex - 1 -> 2
+              else -> 1
+            }
+          )
+          measure.setPath(path, false)
+          for (i in 1..<stepsX) {
+            measure.getPosition(i / stepsX.toFloat() * measure.length).let {
+              this[(x * stepsX) + i, (y * stepsY)] = Offset(it.x, it.y)
+              this[(x * stepsX) + i, (y * stepsY)] =
+                interpolateColor(
+                  points[y][x].second,
+                  points[y][x + 1].second,
+                  i / stepsX.toFloat()
+                )
+            }
+          }
+        }
+      }
+    }
+
+    for (y in 0..<points.lastIndex) {
+      for (x in 0..<this.xLength) {
+        val path = cubicPathY(
+          point1 = this[x, y * stepsY].let { Offset(it.x, it.y) },
+          point2 = this[x, (y + 1) * stepsY].let { Offset(it.x, it.y) },
+          when (y) {
+            0 -> 0
+            points[y].lastIndex - 1 -> 2
+            else -> 1
+          }
+        )
+        measure.setPath(path, false)
+        for (i in (1..<stepsY)) {
+          val point3 = measure.getPosition(i / stepsY.toFloat() * measure.length).let {
+            Offset(it.x, it.y)
+          }
+          this[x, ((y * stepsY) + i)] = point3
+          this[x, ((y * stepsY) + i)] = interpolateColor(
+            this.getColor(x, y * stepsY),
+            this.getColor(x, (y + 1) * stepsY),
+            i / stepsY.toFloat()
+          )
+        }
+      }
+    }
+  }
+
+  data class IndicesBlock(val indices: List<Int>, val x: Int, val y: Int)
+
+  operator fun get(x: Int, y: Int): Offset {
+    val index = (y * xLength) + x
+    return offsets[index]
+  }
+
+  private fun getColor(x: Int, y: Int): Color {
+    val index = (y * xLength) + x
+    return colors[index]
+  }
+
+  private operator fun set(x: Int, y: Int, offset: Offset) {
+    val index = (y * xLength) + x
+    offsets[index] = Offset(offset.x, offset.y)
+  }
+
+  private operator fun set(x: Int, y: Int, color: Color) {
+    val index = (y * xLength) + x
+    colors[index] = color
+  }
+
+  private fun interpolateColor(
+    color1: Color,
+    color2: Color,
+    fraction: Float
+  ): Color {
+    return if (smoothsColors) {
+      cubic(color1, color2, fraction)
+    } else {
+      lerp(color1, color2, fraction)
+    }
+  }
+}
+
+private fun cubicPathX(point1: Offset, point2: Offset, position: Int): Path {
+  val path = Path().apply {
+    moveTo(point1.x, point1.y)
+    val delta = (point2.x - point1.x) * .5f
+    when (position) {
+      0 -> cubicTo(
+        point1.x,
+        point1.y,
+        point2.x - delta,
+        point2.y,
+        point2.x,
+        point2.y
+      )
+      2 -> cubicTo(
+        point1.x + delta,
+        point1.y,
+        point2.x,
+        point2.y,
+        point2.x,
+        point2.y
+      )
+      else -> cubicTo(
+        point1.x + delta,
+        point1.y,
+        point2.x - delta,
+        point2.y,
+        point2.x,
+        point2.y
+      )
+    }
+    lineTo(point2.x, point2.y)
+  }
+  return path
+}
+
+private fun cubicPathY(point1: Offset, point2: Offset, position: Int): Path {
+  val path = Path().apply {
+    moveTo(point1.x, point1.y)
+    val delta = (point2.y - point1.y) * .5f
+    when (position) {
+      0 -> cubicTo(
+        point1.x,
+        point1.y,
+        point2.x,
+        point2.y - delta,
+        point2.x,
+        point2.y
+      )
+      2 -> cubicTo(
+        point1.x,
+        point1.y + delta,
+        point2.x,
+        point2.y,
+        point2.x,
+        point2.y
+      )
+      else -> cubicTo(
+        point1.x,
+        point1.y + delta,
+        point2.x,
+        point2.y - delta,
+        point2.x,
+        point2.y
+      )
+    }
+    lineTo(point2.x, point2.y)
+  }
+  return path
+}

package/android/src/main/java/expo/modules/meshgradient/MeshGradientView.kt

@@ -0,0 +1,105 @@
+package expo.modules.meshgradient
+
+import android.annotation.SuppressLint
+import android.content.Context
+import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.runtime.Composable
+import expo.modules.kotlin.AppContext
+import expo.modules.kotlin.views.ComposeProps
+import expo.modules.kotlin.views.ExpoComposeView
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.State
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.BlendMode
+import androidx.compose.ui.graphics.Canvas
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Paint
+import androidx.compose.ui.graphics.VertexMode
+import androidx.compose.ui.graphics.Vertices
+import androidx.compose.ui.graphics.drawscope.drawIntoCanvas
+import androidx.compose.ui.graphics.drawscope.scale
+import expo.modules.kotlin.records.Field
+import expo.modules.kotlin.records.Record
+
+data class Resolution(
+  @Field
+  val x: Int = 8,
+
+  @Field
+  val y: Int = 8
+) : Record
+
+data class MeshGradientViewProps(
+  val columns: MutableState<Int> = mutableIntStateOf(0),
+  val rows: MutableState<Int> = mutableIntStateOf(0),
+  val points: MutableState<List<Pair<Float, Float>>> = mutableStateOf(listOf()),
+  val colors: MutableState<List<Int>> = mutableStateOf(listOf()),
+  val resolution: MutableState<Resolution> = mutableStateOf(Resolution()),
+  val smoothsColors: MutableState<Boolean> = mutableStateOf(true)
+) : ComposeProps
+
+@SuppressLint("ViewConstructor")
+class MeshGradientView(context: Context, appContext: AppContext) : ExpoComposeView<MeshGradientViewProps>(context, appContext, withHostingView = true) {
+  override val props = MeshGradientViewProps()
+  private val paint = Paint()
+
+  @Composable
+  override fun Content() {
+    val pointData = pointsFromProps()
+
+    Canvas(modifier = Modifier.fillMaxSize()) {
+      drawIntoCanvas { canvas: Canvas ->
+        scale(
+          scaleX = size.width,
+          scaleY = size.height,
+          pivot = Offset.Zero
+        ) {
+          canvas.drawVertices(
+            vertices = Vertices(
+              vertexMode = VertexMode.Triangles,
+              positions = pointData.value.offsets,
+              textureCoordinates = pointData.value.offsets,
+              colors = pointData.value.colors,
+              indices = pointData.value.indices
+            ),
+            blendMode = BlendMode.Dst,
+            paint = paint
+          )
+        }
+      }
+    }
+  }
+
+  @Composable
+  private fun pointsFromProps(): State<PointData> =
+    remember {
+      derivedStateOf {
+        val points = buildList {
+          val numRows = props.rows.value
+          val numCols = props.columns.value
+          val colors = props.colors.value
+          val definedPoints = props.points.value
+          for (row in 0 until numRows) {
+            val rowList = buildList {
+              for (col in 0 until numCols) {
+                val index = row * numCols + col
+                if (index < definedPoints.size && index < colors.size) {
+                  val (x, y) = definedPoints[index]
+                  val color = Color(colors[index])
+                  add(Pair(Offset(x, y), color))
+                }
+              }
+            }
+            add(rowList)
+          }
+        }
+        return@derivedStateOf PointData(points, props.resolution.value.x, props.resolution.value.y, props.smoothsColors.value)
+      }
+    }
+}

package/build/MeshGradient.types.d.ts

@@ -1,4 +1,4 @@
-import type { ViewProps } from 'react-native';
+import type { ColorValue, ViewProps } from 'react-native';
 export interface MeshGradientViewProps extends ViewProps {
     /**
      * Width of the mesh, i.e. the number of vertices per row.
@@ -19,7 +19,7 @@ export interface MeshGradientViewProps extends ViewProps {
      * An array of colors. Must contain `columns * rows` elements.
      * @default []
      */
-    colors?: string[];
+    colors?: ColorValue[];
     /**
      * Whether cubic (smooth) interpolation should be used for the colors in the mesh
      * rather than only for the shape of the mesh.
@@ -29,13 +29,24 @@ export interface MeshGradientViewProps extends ViewProps {
     /**
      * Whether to ignore safe areas when positioning the view.
      * @default true
+     * @platform ios
      */
     ignoresSafeArea?: boolean;
     /**
      * Masks the gradient using the alpha channel of the given children views.
      * > **Note**: When this option is enabled, all user interactions (gestures) on children views are ignored.
      * @default false
+     * @platform ios
      */
     mask?: boolean;
+    /**
+     * Specifies how many points to sample on the path between points.
+     * @default { x: 1, y: 1 }
+     * @platform android
+     */
+    resolution?: {
+        x?: number;
+        y?: number;
+    };
 }
 //# sourceMappingURL=MeshGradient.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"MeshGradient.types.d.ts","sourceRoot":"","sources":["../src/MeshGradient.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,WAAW,qBAAsB,SAAQ,SAAS;IACtD;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,EAAE,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAElB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB"}
+{"version":3,"file":"MeshGradient.types.d.ts","sourceRoot":"","sources":["../src/MeshGradient.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE1D,MAAM,WAAW,qBAAsB,SAAQ,SAAS;IACtD;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,EAAE,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,UAAU,EAAE,CAAC;IAEtB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;;;OAIG;IACH,UAAU,CAAC,EAAE;QACX,CAAC,CAAC,EAAE,MAAM,CAAC;QACX,CAAC,CAAC,EAAE,MAAM,CAAC;KACZ,CAAC;CACH"}

package/build/MeshGradientView.d.ts

@@ -1,4 +1,4 @@
 import { MeshGradientViewProps } from './MeshGradient.types';
-declare const _default: import("react").ComponentType<MeshGradientViewProps>;
-export default _default;
+declare const MeshGradientView: (props: MeshGradientViewProps) => import("react").JSX.Element;
+export default MeshGradientView;
 //# sourceMappingURL=MeshGradientView.d.ts.map

package/build/MeshGradientView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MeshGradientView.d.ts","sourceRoot":"","sources":["../src/MeshGradientView.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;;AAE7D,wBAA4E"}
+{"version":3,"file":"MeshGradientView.d.ts","sourceRoot":"","sources":["../src/MeshGradientView.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAQ7D,QAAA,MAAM,gBAAgB,GAAI,OAAO,qBAAqB,gCASrD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/expo-module.config.json

@@ -1,6 +1,16 @@
 {
-  "platforms": ["apple"],
+  "platforms": ["apple", "android"],
+  "coreFeatures": ["swiftui", "compose"],
   "apple": {
     "modules": ["MeshGradientModule"]
+  },
+  "android": {
+    "modules": ["expo.modules.meshgradient.MeshGradientModule"],
+    "publication": {
+      "groupId": "host.exp.exponent",
+      "artifactId": "expo.modules.meshgradient",
+      "version": "0.4.0-canary-20250612-338ef55",
+      "repository": "local-maven-repo"
+    }
   }
 }

package/local-maven-repo/host/exp/exponent/expo.modules.meshgradient/0.4.0-canary-20250612-338ef55/expo.modules.meshgradient-0.4.0-canary-20250612-338ef55-sources.jar.md5

@@ -0,0 +1 @@
+ca79fdb6a635597c829ab2557f0dbc3a

package/local-maven-repo/host/exp/exponent/expo.modules.meshgradient/0.4.0-canary-20250612-338ef55/expo.modules.meshgradient-0.4.0-canary-20250612-338ef55-sources.jar.sha1

@@ -0,0 +1 @@
+65c0192f99ad54e44a2b27deb1ffca3dea85e3ff

package/local-maven-repo/host/exp/exponent/expo.modules.meshgradient/0.4.0-canary-20250612-338ef55/expo.modules.meshgradient-0.4.0-canary-20250612-338ef55-sources.jar.sha256

@@ -0,0 +1 @@
+b80119f206bb91853fde59bdcdda8a93900ba9abf605e745f31b0605a5e7fc3d

package/local-maven-repo/host/exp/exponent/expo.modules.meshgradient/0.4.0-canary-20250612-338ef55/expo.modules.meshgradient-0.4.0-canary-20250612-338ef55-sources.jar.sha512

@@ -0,0 +1 @@
+8720b775920bbcf29474c187976f588788735c22da798db873d13985aa6197d51ef4e78baab63d1b4874320bfa555cc2af7963fba6bd0fe4ee100328eb78748b

package/local-maven-repo/host/exp/exponent/expo.modules.meshgradient/0.4.0-canary-20250612-338ef55/expo.modules.meshgradient-0.4.0-canary-20250612-338ef55.aar.md5

@@ -0,0 +1 @@
+a0650e7cf68cce59ce1dfb0fbcd96b16

package/local-maven-repo/host/exp/exponent/expo.modules.meshgradient/0.4.0-canary-20250612-338ef55/expo.modules.meshgradient-0.4.0-canary-20250612-338ef55.aar.sha1

@@ -0,0 +1 @@
+2ee4f5948cbb7bfd01d50dd8148b7708975dd725

package/local-maven-repo/host/exp/exponent/expo.modules.meshgradient/0.4.0-canary-20250612-338ef55/expo.modules.meshgradient-0.4.0-canary-20250612-338ef55.aar.sha256

@@ -0,0 +1 @@
+82dfcc8c73fec8f861bf879703fd09f31936d0c9dced0b1a89b1ed03810f51d1

package/local-maven-repo/host/exp/exponent/expo.modules.meshgradient/0.4.0-canary-20250612-338ef55/expo.modules.meshgradient-0.4.0-canary-20250612-338ef55.aar.sha512

@@ -0,0 +1 @@
+c8e442d46f64599fd9f99013dc027af15316791bf057818c3d718b947f54e3b2ea9de60fe371e37639482266dbc1129708e5c3e8da25d43f22dc435399c45a5a

package/local-maven-repo/host/exp/exponent/expo.modules.meshgradient/0.4.0-canary-20250612-338ef55/expo.modules.meshgradient-0.4.0-canary-20250612-338ef55.module

@@ -0,0 +1,101 @@
+{
+  "formatVersion": "1.1",
+  "component": {
+    "group": "host.exp.exponent",
+    "module": "expo.modules.meshgradient",
+    "version": "0.4.0-canary-20250612-338ef55",
+    "attributes": {
+      "org.gradle.status": "release"
+    }
+  },
+  "createdBy": {
+    "gradle": {
+      "version": "8.14"
+    }
+  },
+  "variants": [
+    {
+      "name": "releaseVariantReleaseApiPublication",
+      "attributes": {
+        "org.gradle.category": "library",
+        "org.gradle.dependency.bundling": "external",
+        "org.gradle.libraryelements": "aar",
+        "org.gradle.usage": "java-api"
+      },
+      "files": [
+        {
+          "name": "expo.modules.meshgradient-0.4.0-canary-20250612-338ef55.aar",
+          "url": "expo.modules.meshgradient-0.4.0-canary-20250612-338ef55.aar",
+          "size": 24200,
+          "sha512": "c8e442d46f64599fd9f99013dc027af15316791bf057818c3d718b947f54e3b2ea9de60fe371e37639482266dbc1129708e5c3e8da25d43f22dc435399c45a5a",
+          "sha256": "82dfcc8c73fec8f861bf879703fd09f31936d0c9dced0b1a89b1ed03810f51d1",
+          "sha1": "2ee4f5948cbb7bfd01d50dd8148b7708975dd725",
+          "md5": "a0650e7cf68cce59ce1dfb0fbcd96b16"
+        }
+      ]
+    },
+    {
+      "name": "releaseVariantReleaseRuntimePublication",
+      "attributes": {
+        "org.gradle.category": "library",
+        "org.gradle.dependency.bundling": "external",
+        "org.gradle.libraryelements": "aar",
+        "org.gradle.usage": "java-runtime"
+      },
+      "dependencies": [
+        {
+          "group": "org.jetbrains.kotlin",
+          "module": "kotlin-stdlib-jdk7",
+          "version": {
+            "requires": "2.1.20"
+          }
+        },
+        {
+          "group": "androidx.compose.foundation",
+          "module": "foundation-android",
+          "version": {
+            "requires": "1.7.6"
+          }
+        },
+        {
+          "group": "androidx.compose.ui",
+          "module": "ui-android",
+          "version": {
+            "requires": "1.7.6"
+          }
+        }
+      ],
+      "files": [
+        {
+          "name": "expo.modules.meshgradient-0.4.0-canary-20250612-338ef55.aar",
+          "url": "expo.modules.meshgradient-0.4.0-canary-20250612-338ef55.aar",
+          "size": 24200,
+          "sha512": "c8e442d46f64599fd9f99013dc027af15316791bf057818c3d718b947f54e3b2ea9de60fe371e37639482266dbc1129708e5c3e8da25d43f22dc435399c45a5a",
+          "sha256": "82dfcc8c73fec8f861bf879703fd09f31936d0c9dced0b1a89b1ed03810f51d1",
+          "sha1": "2ee4f5948cbb7bfd01d50dd8148b7708975dd725",
+          "md5": "a0650e7cf68cce59ce1dfb0fbcd96b16"
+        }
+      ]
+    },
+    {
+      "name": "releaseVariantReleaseSourcePublication",
+      "attributes": {
+        "org.gradle.category": "documentation",
+        "org.gradle.dependency.bundling": "external",
+        "org.gradle.docstype": "sources",
+        "org.gradle.usage": "java-runtime"
+      },
+      "files": [
+        {
+          "name": "expo.modules.meshgradient-0.4.0-canary-20250612-338ef55-sources.jar",
+          "url": "expo.modules.meshgradient-0.4.0-canary-20250612-338ef55-sources.jar",
+          "size": 4430,
+          "sha512": "8720b775920bbcf29474c187976f588788735c22da798db873d13985aa6197d51ef4e78baab63d1b4874320bfa555cc2af7963fba6bd0fe4ee100328eb78748b",
+          "sha256": "b80119f206bb91853fde59bdcdda8a93900ba9abf605e745f31b0605a5e7fc3d",
+          "sha1": "65c0192f99ad54e44a2b27deb1ffca3dea85e3ff",
+          "md5": "ca79fdb6a635597c829ab2557f0dbc3a"
+        }
+      ]
+    }
+  ]
+}

package/local-maven-repo/host/exp/exponent/expo.modules.meshgradient/0.4.0-canary-20250612-338ef55/expo.modules.meshgradient-0.4.0-canary-20250612-338ef55.module.md5

@@ -0,0 +1 @@
+5e400917bab3a0f0cd328c3e660375b8

package/local-maven-repo/host/exp/exponent/expo.modules.meshgradient/0.4.0-canary-20250612-338ef55/expo.modules.meshgradient-0.4.0-canary-20250612-338ef55.module.sha1

@@ -0,0 +1 @@
+988d9c1b364c4121f6312d5699622efe892b9bdc

package/local-maven-repo/host/exp/exponent/expo.modules.meshgradient/0.4.0-canary-20250612-338ef55/expo.modules.meshgradient-0.4.0-canary-20250612-338ef55.module.sha256

@@ -0,0 +1 @@
+a57fdec621258663df8f803365f22066e679516436d887b1907fa48eda2dad4b

package/local-maven-repo/host/exp/exponent/expo.modules.meshgradient/0.4.0-canary-20250612-338ef55/expo.modules.meshgradient-0.4.0-canary-20250612-338ef55.module.sha512

@@ -0,0 +1 @@
+ffe8b0ea61a0dd3d40c8c0453e6fddf72b99bb1ae1209fc76904e605c0513628ac7786a345fbb69f970b787e38360ceceb44bbbb491a76f90b3fd51a62f23986

package/local-maven-repo/host/exp/exponent/expo.modules.meshgradient/0.4.0-canary-20250612-338ef55/expo.modules.meshgradient-0.4.0-canary-20250612-338ef55.pom

@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd" xmlns="http://maven.apache.org/POM/4.0.0"
+    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
+  <!-- This module was also published with a richer model, Gradle metadata,  -->
+  <!-- which should be used instead. Do not delete the following line which  -->
+  <!-- is to indicate to Gradle or any Gradle module metadata file consumer  -->
+  <!-- that they should prefer consuming it instead. -->
+  <!-- do_not_remove: published-with-gradle-metadata -->
+  <modelVersion>4.0.0</modelVersion>
+  <groupId>host.exp.exponent</groupId>
+  <artifactId>expo.modules.meshgradient</artifactId>
+  <version>0.4.0-canary-20250612-338ef55</version>
+  <packaging>aar</packaging>
+  <name>expo.modules.meshgradient</name>
+  <url>https://github.com/expo/expo</url>
+  <licenses>
+    <license>
+      <name>MIT License</name>
+      <url>https://github.com/expo/expo/blob/main/LICENSE</url>
+    </license>
+  </licenses>
+  <scm>
+    <connection>https://github.com/expo/expo.git</connection>
+    <developerConnection>https://github.com/expo/expo.git</developerConnection>
+    <url>https://github.com/expo/expo</url>
+  </scm>
+  <dependencies>
+    <dependency>
+      <groupId>org.jetbrains.kotlin</groupId>
+      <artifactId>kotlin-stdlib-jdk7</artifactId>
+      <version>2.1.20</version>
+      <scope>runtime</scope>
+    </dependency>
+    <dependency>
+      <groupId>androidx.compose.foundation</groupId>
+      <artifactId>foundation-android</artifactId>
+      <version>1.7.6</version>
+      <scope>runtime</scope>
+    </dependency>
+    <dependency>
+      <groupId>androidx.compose.ui</groupId>
+      <artifactId>ui-android</artifactId>
+      <version>1.7.6</version>
+      <scope>runtime</scope>
+    </dependency>
+  </dependencies>
+</project>

package/local-maven-repo/host/exp/exponent/expo.modules.meshgradient/0.4.0-canary-20250612-338ef55/expo.modules.meshgradient-0.4.0-canary-20250612-338ef55.pom.md5

@@ -0,0 +1 @@
+707e348c116140bc02dfb0ca771d3770

package/local-maven-repo/host/exp/exponent/expo.modules.meshgradient/0.4.0-canary-20250612-338ef55/expo.modules.meshgradient-0.4.0-canary-20250612-338ef55.pom.sha1

@@ -0,0 +1 @@
+56e485b5d5a11dca5c03166d3c64e879aaa9f9cd

package/local-maven-repo/host/exp/exponent/expo.modules.meshgradient/0.4.0-canary-20250612-338ef55/expo.modules.meshgradient-0.4.0-canary-20250612-338ef55.pom.sha256

@@ -0,0 +1 @@
+63c08346b094aaf635d94a17f3a654b94b3c279aa1e619a80be8be4c2c238e4d

package/local-maven-repo/host/exp/exponent/expo.modules.meshgradient/0.4.0-canary-20250612-338ef55/expo.modules.meshgradient-0.4.0-canary-20250612-338ef55.pom.sha512

@@ -0,0 +1 @@
+f1979c913fcc17391382f223bddfcf0937c02f09bf89711198dff1f7df880e5ac726a8bff33acd2f1449349fb3d6bdc78495ea434e370113b08aeef4765ac322

package/local-maven-repo/host/exp/exponent/expo.modules.meshgradient/maven-metadata.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<metadata>
+  <groupId>host.exp.exponent</groupId>
+  <artifactId>expo.modules.meshgradient</artifactId>
+  <versioning>
+    <latest>0.4.0-canary-20250612-338ef55</latest>
+    <release>0.4.0-canary-20250612-338ef55</release>
+    <versions>
+      <version>0.4.0-canary-20250612-338ef55</version>
+    </versions>
+    <lastUpdated>20250612174741</lastUpdated>
+  </versioning>
+</metadata>

package/local-maven-repo/host/exp/exponent/expo.modules.meshgradient/maven-metadata.xml.md5

@@ -0,0 +1 @@
+fe7d72e2672a4a4722a532024427dab1

package/local-maven-repo/host/exp/exponent/expo.modules.meshgradient/maven-metadata.xml.sha1

@@ -0,0 +1 @@
+433ee5db3efee0354941f57511adbe0ab30e8fc7

package/local-maven-repo/host/exp/exponent/expo.modules.meshgradient/maven-metadata.xml.sha256

@@ -0,0 +1 @@
+bf1ca35f4bd43ff8d8aaeb449fbea4e226ed79eb610cae23adfc19b8d9ce138a

package/local-maven-repo/host/exp/exponent/expo.modules.meshgradient/maven-metadata.xml.sha512

@@ -0,0 +1 @@
+66a9d8ab37fd7258a9d1827e3b5f6cef396fc5f47752c4ab3d8195c471657117c2e61e72befd4ec2b88b423a63ac1ba1f9a8accdb9ea78dec8b19196cd25534f

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "expo-mesh-gradient",
-  "version": "0.3.4",
+  "version": "0.4.0-canary-20250612-338ef55",
   "description": "A module that exposes MeshGradient view from SwiftUI to React Native",
   "main": "src/index.ts",
   "types": "build/index.d.ts",
@@ -31,12 +31,11 @@
   "dependencies": {},
   "devDependencies": {
     "@types/react": "~19.0.10",
-    "expo-module-scripts": "^4.1.6"
+    "expo-module-scripts": "4.1.8-canary-20250612-338ef55"
   },
   "peerDependencies": {
-    "expo": "*",
+    "expo": "54.0.0-canary-20250612-338ef55",
     "react": "*",
     "react-native": "*"
-  },
-  "gitHead": "84355076bc31a356aa3d23257f387f221885f53d"
+  }
 }

package/src/MeshGradient.types.ts

@@ -1,4 +1,4 @@
-import type { ViewProps } from 'react-native';
+import type { ColorValue, ViewProps } from 'react-native';
 
 export interface MeshGradientViewProps extends ViewProps {
   /**
@@ -23,7 +23,7 @@ export interface MeshGradientViewProps extends ViewProps {
    * An array of colors. Must contain `columns * rows` elements.
    * @default []
    */
-  colors?: string[];
+  colors?: ColorValue[];
 
   /**
    * Whether cubic (smooth) interpolation should be used for the colors in the mesh
@@ -35,6 +35,7 @@ export interface MeshGradientViewProps extends ViewProps {
   /**
    * Whether to ignore safe areas when positioning the view.
    * @default true
+   * @platform ios
    */
   ignoresSafeArea?: boolean;
 
@@ -42,6 +43,17 @@ export interface MeshGradientViewProps extends ViewProps {
    * Masks the gradient using the alpha channel of the given children views.
    * > **Note**: When this option is enabled, all user interactions (gestures) on children views are ignored.
    * @default false
+   * @platform ios
    */
   mask?: boolean;
+
+  /**
+   * Specifies how many points to sample on the path between points.
+   * @default { x: 1, y: 1 }
+   * @platform android
+   */
+  resolution?: {
+    x?: number;
+    y?: number;
+  };
 }

package/src/MeshGradientView.tsx

@@ -1,5 +1,23 @@
 import { requireNativeView } from 'expo';
+import { Platform, processColor, ProcessedColorValue } from 'react-native';
 
 import { MeshGradientViewProps } from './MeshGradient.types';
 
-export default requireNativeView<MeshGradientViewProps>('ExpoMeshGradient');
+const NativeView = requireNativeView<
+  Omit<MeshGradientViewProps, 'colors'> & {
+    colors?: (ProcessedColorValue | null | undefined)[];
+  }
+>('ExpoMeshGradient');
+
+const MeshGradientView = (props: MeshGradientViewProps) => {
+  const { colors, children, ...restProps } = props;
+  return (
+    <NativeView
+      {...restProps}
+      colors={colors?.map((color) => processColor(color))}
+      children={Platform.OS !== 'android' ? children : undefined}
+    />
+  );
+};
+
+export default MeshGradientView;