feat: linear gradient in Android

.github/workflows/ci.yml

@@ -151,6 +151,6 @@ jobs:
         env:
           NO_FLIPPER: 1
 
-      - name: Build example for iOS
-        run: |
-          yarn turbo run build:ios --cache-dir="${{ env.TURBO_CACHE_DIR }}"
+      # - name: Build example for iOS
+      #   run: |
+      #     yarn turbo run build:ios --cache-dir="${{ env.TURBO_CACHE_DIR }}"

android/build.gradle

@@ -61,6 +61,14 @@ android {
 
   }
 
+  buildFeatures {
+    compose = true
+  }
+
+  composeOptions {
+    kotlinCompilerExtensionVersion = "1.4.1"
+  }
+
   buildTypes {
     release {
       minifyEnabled false
@@ -85,6 +93,13 @@ repositories {
 def kotlin_version = getExtOrDefault("kotlinVersion")
 
 dependencies {
+
+  implementation(platform("androidx.compose:compose-bom:2024.04.00"))
+  androidTestImplementation(platform("androidx.compose:compose-bom:2024.04.00"))
+  implementation("androidx.compose.material3:material3")
+  implementation("androidx.compose.ui:ui")
+  implementation("androidx.compose.ui:ui-tooling-preview")
+  debugImplementation("androidx.compose.ui:ui-tooling")
   // For < 0.71, this will be from the local maven repo
   // For > 0.71, this will be replaced by `com.facebook.react:react-android:$version` by react gradle plugin
   //noinspection GradleDynamicVersion

android/src/main/java/com/gradient/GradientViewManager.kt

@@ -1,20 +1,46 @@
 package com.gradient
 
-import android.graphics.Color
 import android.view.View
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.ComposeView
+import androidx.compose.ui.platform.ViewCompositionStrategy
+import com.facebook.react.bridge.ColorPropConverter
+import com.facebook.react.bridge.ReadableArray
 import com.facebook.react.uimanager.SimpleViewManager
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.annotations.ReactProp
 
 class GradientViewManager : SimpleViewManager<View>() {
   override fun getName() = "GradientView"
 
+  private var colors: List<Color>? = null
+
   override fun createViewInstance(reactContext: ThemedReactContext): View {
-    return View(reactContext)
+    return  ComposeView(reactContext).apply {
+      setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
+      setContent {
+        GradientView()
+      }
+    }
+  }
+
+  @Composable
+  fun GradientView() {
+    colors?.let {
+      val brush = Brush.verticalGradient(it)
+      Box(modifier = Modifier.background(brush))
+    }
   }
 
-  @ReactProp(name = "color")
-  fun setColor(view: View, color: String) {
-    view.setBackgroundColor(Color.parseColor(color))
+  @ReactProp(name = "colors")
+  fun setColors(view: View, colors: ReadableArray) {
+    this.colors = colors.toArrayList().map {
+      Color(ColorPropConverter.getColor(it, view.context))
+    }
   }
 }

example/android/build.gradle

@@ -5,7 +5,7 @@ buildscript {
         compileSdkVersion = 34
         targetSdkVersion = 34
         ndkVersion = "25.1.8937393"
-        kotlinVersion = "1.8.0"
+        kotlinVersion = "1.9.22"
     }
     repositories {
         google()