react-native 0.86.0-rc.0 → 0.86.0-rc.2

package/Libraries/Components/Pressable/Pressable.d.ts

@@ -30,6 +30,7 @@ export interface PressableAndroidRippleConfig {
   borderless?: null | boolean | undefined;
   radius?: null | number | undefined;
   foreground?: null | boolean | undefined;
+  alpha?: null | number | undefined;
 }
 
 export interface PressableProps

package/Libraries/Components/Pressable/useAndroidRippleForView.js

@@ -8,6 +8,7 @@
  * @format
  */
 
+import type {ProcessedColorValue} from '../../StyleSheet/processColor';
 import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {GestureResponderEvent} from '../../Types/CoreEventTypes';
 
@@ -15,15 +16,15 @@ import processColor from '../../StyleSheet/processColor';
 import Platform from '../../Utilities/Platform';
 import View from '../View/View';
 import {Commands} from '../View/ViewNativeComponent';
-import invariant from 'invariant';
 import * as React from 'react';
 import {useMemo} from 'react';
 
 type NativeBackgroundProp = Readonly<{
   type: 'RippleAndroid',
-  color: ?number,
+  color: ?ProcessedColorValue,
   borderless: boolean,
   rippleRadius: ?number,
+  alpha: ?number,
 }>;
 
 export type PressableAndroidRippleConfig = {
@@ -31,6 +32,7 @@ export type PressableAndroidRippleConfig = {
   borderless?: boolean,
   radius?: number,
   foreground?: boolean,
+  alpha?: number,
 };
 
 /**
@@ -48,7 +50,7 @@ export default function useAndroidRippleForView(
     | Readonly<{nativeBackgroundAndroid: NativeBackgroundProp}>
     | Readonly<{nativeForegroundAndroid: NativeBackgroundProp}>,
 }> {
-  const {color, borderless, radius, foreground} = rippleConfig ?? {};
+  const {color, borderless, radius, foreground, alpha} = rippleConfig ?? {};
 
   return useMemo(() => {
     if (
@@ -56,16 +58,13 @@ export default function useAndroidRippleForView(
       (color != null || borderless != null || radius != null)
     ) {
       const processedColor = processColor(color);
-      invariant(
-        processedColor == null || typeof processedColor === 'number',
-        'Unexpected color given for Ripple color',
-      );
 
       const nativeRippleValue = {
         type: 'RippleAndroid',
         color: processedColor,
         borderless: borderless === true,
         rippleRadius: radius,
+        alpha: alpha ?? null,
       };
 
       return {
@@ -105,5 +104,5 @@ export default function useAndroidRippleForView(
       };
     }
     return null;
-  }, [borderless, color, foreground, radius, viewRef]);
+  }, [alpha, borderless, color, foreground, radius, viewRef]);
 }

package/Libraries/Components/Touchable/TouchableNativeFeedback.js

@@ -8,6 +8,8 @@
  * @format
  */
 
+import type {ProcessedColorValue} from '../../StyleSheet/processColor';
+import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {GestureResponderEvent} from '../../Types/CoreEventTypes';
 import type {TouchableWithoutFeedbackProps} from './TouchableWithoutFeedback';
 
@@ -20,7 +22,6 @@ import {findHostInstance_DEPRECATED} from '../../ReactNative/RendererProxy';
 import processColor from '../../StyleSheet/processColor';
 import Platform from '../../Utilities/Platform';
 import {Commands} from '../View/ViewNativeComponent';
-import invariant from 'invariant';
 import * as React from 'react';
 import {cloneElement} from 'react';
 
@@ -96,7 +97,7 @@ export type TouchableNativeFeedbackProps = Readonly<{
       }>
     | Readonly<{
         type: 'RippleAndroid',
-        color: ?number,
+        color: ?ProcessedColorValue,
         borderless: boolean,
         rippleRadius: ?number,
       }>
@@ -177,23 +178,18 @@ class TouchableNativeFeedback extends React.Component<
    * @param rippleRadius The radius of ripple effect
    */
   static Ripple: (
-    color: string,
+    color: ColorValue,
     borderless: boolean,
     rippleRadius?: ?number,
   ) => Readonly<{
     borderless: boolean,
-    color: ?number,
+    color: ?ProcessedColorValue,
     rippleRadius: ?number,
     type: 'RippleAndroid',
-  }> = (color: string, borderless: boolean, rippleRadius?: ?number) => {
+  }> = (color: ColorValue, borderless: boolean, rippleRadius?: ?number) => {
     const processedColor = processColor(color);
-    invariant(
-      processedColor == null || typeof processedColor === 'number',
-      'Unexpected color given for Ripple color',
-    );
     return {
       type: 'RippleAndroid',
-      // $FlowFixMe[incompatible-type]
       color: processedColor,
       borderless,
       rippleRadius,

package/Libraries/Components/View/ViewPropTypes.js

@@ -11,6 +11,7 @@
 'use strict';
 
 import type {EdgeInsetsOrSizeProp} from '../../StyleSheet/EdgeInsetsPropType';
+import type {ProcessedColorValue} from '../../StyleSheet/processColor';
 import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
 import type {
   BlurEvent,
@@ -264,9 +265,10 @@ type AndroidDrawableThemeAttr = Readonly<{
 
 type AndroidDrawableRipple = Readonly<{
   type: 'RippleAndroid',
-  color?: ?number,
+  color?: ?ProcessedColorValue,
   borderless?: ?boolean,
   rippleRadius?: ?number,
+  alpha?: ?number,
 }>;
 
 type AndroidDrawable = AndroidDrawableThemeAttr | AndroidDrawableRipple;

package/Libraries/Core/ReactNativeVersion.js

@@ -29,7 +29,7 @@ export default class ReactNativeVersion {
   static major: number = 0;
   static minor: number = 86;
   static patch: number = 0;
-  static prerelease: string | null = 'rc.0';
+  static prerelease: string | null = 'rc.2';
 
   static getVersionString(): string {
     return `${this.major}.${this.minor}.${this.patch}${this.prerelease != null ? `-${this.prerelease}` : ''}`;

package/React/Base/RCTVersion.m

@@ -24,7 +24,7 @@ NSDictionary* RCTGetReactNativeVersion(void)
                   RCTVersionMajor: @(0),
                   RCTVersionMinor: @(86),
                   RCTVersionPatch: @(0),
-                  RCTVersionPrerelease: @"rc.0",
+                  RCTVersionPrerelease: @"rc.2",
                   };
   });
   return __rnVersion;

package/ReactAndroid/api/ReactAndroid.api

@@ -6468,6 +6468,7 @@ public class com/facebook/react/views/view/ReactViewGroup : android/view/ViewGro
 	public fun getZIndexMappedChildIndex (I)I
 	public fun hasOverlappingRendering ()Z
 	protected fun onAttachedToWindow ()V
+	protected fun onConfigurationChanged (Landroid/content/res/Configuration;)V
 	public fun onHoverEvent (Landroid/view/MotionEvent;)Z
 	public fun onInterceptTouchEvent (Landroid/view/MotionEvent;)Z
 	protected fun onLayout (ZIIII)V

package/ReactAndroid/gradle.properties

@@ -1,4 +1,4 @@
-VERSION_NAME=0.86.0-rc.0
+VERSION_NAME=0.86.0-rc.2
 react.internal.publishingGroup=com.facebook.react
 react.internal.hermesPublishingGroup=com.facebook.hermes
 

package/ReactAndroid/src/main/java/com/facebook/react/modules/image/ImageLoaderModule.kt

@@ -7,17 +7,20 @@
 
 package com.facebook.react.modules.image
 
+import android.media.ExifInterface
 import android.net.Uri
 import android.util.SparseArray
 import com.facebook.common.executors.CallerThreadExecutor
+import com.facebook.common.memory.PooledByteBuffer
 import com.facebook.common.references.CloseableReference
 import com.facebook.datasource.BaseDataSubscriber
 import com.facebook.datasource.DataSource
 import com.facebook.datasource.DataSubscriber
 import com.facebook.drawee.backends.pipeline.Fresco
 import com.facebook.fbreact.specs.NativeImageLoaderAndroidSpec
+import com.facebook.imagepipeline.common.RotationOptions
 import com.facebook.imagepipeline.core.ImagePipeline
-import com.facebook.imagepipeline.image.CloseableImage
+import com.facebook.imagepipeline.image.EncodedImage
 import com.facebook.imagepipeline.request.ImageRequest
 import com.facebook.imagepipeline.request.ImageRequestBuilder
 import com.facebook.react.bridge.GuardedAsyncTask
@@ -82,39 +85,13 @@ internal class ImageLoaderModule : NativeImageLoaderAndroidSpec, LifecycleEventL
       return
     }
     val source = ImageSource(reactApplicationContext, uriString)
-    val request: ImageRequest = ImageRequestBuilder.newBuilderWithSource(source.uri).build()
-    val dataSource: DataSource<CloseableReference<CloseableImage>> =
-        this.imagePipeline.fetchDecodedImage(request, this.callerContext)
-    val dataSubscriber: DataSubscriber<CloseableReference<CloseableImage>> =
-        object : BaseDataSubscriber<CloseableReference<CloseableImage>>() {
-          override fun onNewResultImpl(dataSource: DataSource<CloseableReference<CloseableImage>>) {
-            if (!dataSource.isFinished) {
-              return
-            }
-            val ref = dataSource.result
-            if (ref != null) {
-              try {
-                val image: CloseableImage = ref.get()
-                val sizes = buildReadableMap {
-                  put("width", image.width)
-                  put("height", image.height)
-                }
-                promise.resolve(sizes)
-              } catch (e: Exception) {
-                promise.reject(ERROR_GET_SIZE_FAILURE, e)
-              } finally {
-                CloseableReference.closeSafely(ref)
-              }
-            } else {
-              promise.reject(ERROR_GET_SIZE_FAILURE, "Failed to get the size of the image")
-            }
-          }
-
-          override fun onFailureImpl(dataSource: DataSource<CloseableReference<CloseableImage>>) {
-            promise.reject(ERROR_GET_SIZE_FAILURE, dataSource.failureCause)
-          }
-        }
-    dataSource.subscribe(dataSubscriber, CallerThreadExecutor.getInstance())
+    val request: ImageRequest =
+        ImageRequestBuilder.newBuilderWithSource(source.uri)
+            .setRotationOptions(RotationOptions.disableRotation())
+            .build()
+    val dataSource: DataSource<CloseableReference<PooledByteBuffer>> =
+        this.imagePipeline.fetchEncodedImage(request, this.callerContext)
+    dataSource.subscribe(createSizeSubscriber(promise), CallerThreadExecutor.getInstance())
   }
 
   /**
@@ -134,41 +111,61 @@ internal class ImageLoaderModule : NativeImageLoaderAndroidSpec, LifecycleEventL
     val source = ImageSource(reactApplicationContext, uriString)
     val imageRequestBuilder: ImageRequestBuilder =
         ImageRequestBuilder.newBuilderWithSource(source.uri)
+            .setRotationOptions(RotationOptions.disableRotation())
     val request: ImageRequest =
         ReactNetworkImageRequest.fromBuilderWithHeaders(imageRequestBuilder, headers)
-    val dataSource: DataSource<CloseableReference<CloseableImage>> =
-        this.imagePipeline.fetchDecodedImage(request, this.callerContext)
-    val dataSubscriber: DataSubscriber<CloseableReference<CloseableImage>> =
-        object : BaseDataSubscriber<CloseableReference<CloseableImage>>() {
-          override fun onNewResultImpl(dataSource: DataSource<CloseableReference<CloseableImage>>) {
-            if (!dataSource.isFinished) {
-              return
-            }
-            val ref = dataSource.result
-            if (ref != null) {
-              try {
-                val image: CloseableImage = ref.get()
-                val sizes = buildReadableMap {
-                  put("width", image.width)
-                  put("height", image.height)
-                }
-                promise.resolve(sizes)
-              } catch (e: Exception) {
-                promise.reject(ERROR_GET_SIZE_FAILURE, e)
-              } finally {
-                CloseableReference.closeSafely(ref)
+    val dataSource: DataSource<CloseableReference<PooledByteBuffer>> =
+        this.imagePipeline.fetchEncodedImage(request, this.callerContext)
+    dataSource.subscribe(createSizeSubscriber(promise), CallerThreadExecutor.getInstance())
+  }
+
+  private fun createSizeSubscriber(
+      promise: Promise
+  ): DataSubscriber<CloseableReference<PooledByteBuffer>> =
+      object : BaseDataSubscriber<CloseableReference<PooledByteBuffer>>() {
+        override fun onNewResultImpl(dataSource: DataSource<CloseableReference<PooledByteBuffer>>) {
+          if (!dataSource.isFinished) {
+            return
+          }
+          val ref = dataSource.result
+          if (ref != null) {
+            var encodedImage: EncodedImage? = null
+            try {
+              encodedImage = EncodedImage(ref)
+              // Swap width and height when the image's EXIF orientation swaps the X/Y axes
+              // (90°/270° rotations, or transpose/transverse), so the values reflect the
+              // visible dimensions, matching iOS behavior.
+              val rotated =
+                  encodedImage.rotationAngle == 90 ||
+                      encodedImage.rotationAngle == 270 ||
+                      encodedImage.exifOrientation == ExifInterface.ORIENTATION_TRANSPOSE ||
+                      encodedImage.exifOrientation == ExifInterface.ORIENTATION_TRANSVERSE
+              val width = if (rotated) encodedImage.height else encodedImage.width
+              val height = if (rotated) encodedImage.width else encodedImage.height
+              if (width < 0 || height < 0) {
+                promise.reject(ERROR_GET_SIZE_FAILURE, "Failed to get the size of the image")
+                return
+              }
+              val sizes = buildReadableMap {
+                put("width", width)
+                put("height", height)
               }
-            } else {
-              promise.reject(ERROR_GET_SIZE_FAILURE, "Failed to get the size of the image")
+              promise.resolve(sizes)
+            } catch (e: Exception) {
+              promise.reject(ERROR_GET_SIZE_FAILURE, e)
+            } finally {
+              encodedImage?.close()
+              CloseableReference.closeSafely(ref)
             }
+          } else {
+            promise.reject(ERROR_GET_SIZE_FAILURE, "Failed to get the size of the image")
           }
+        }
 
-          override fun onFailureImpl(dataSource: DataSource<CloseableReference<CloseableImage>>) {
-            promise.reject(ERROR_GET_SIZE_FAILURE, dataSource.failureCause)
-          }
+        override fun onFailureImpl(dataSource: DataSource<CloseableReference<PooledByteBuffer>>) {
+          promise.reject(ERROR_GET_SIZE_FAILURE, dataSource.failureCause)
         }
-    dataSource.subscribe(dataSubscriber, CallerThreadExecutor.getInstance())
-  }
+      }
 
   /**
    * Prefetches the given image to the Fresco image disk cache.

package/ReactAndroid/src/main/java/com/facebook/react/modules/systeminfo/ReactNativeVersion.kt

@@ -15,6 +15,6 @@ public object ReactNativeVersion {
     "major" to 0,
     "minor" to 86,
     "patch" to 0,
-    "prerelease" to "rc.0"
+    "prerelease" to "rc.2"
   )
 }

package/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactDrawableHelper.kt

@@ -15,10 +15,16 @@ import android.graphics.drawable.ColorDrawable
 import android.graphics.drawable.Drawable
 import android.graphics.drawable.RippleDrawable
 import android.util.TypedValue
+import com.facebook.common.logging.FLog
+import com.facebook.react.bridge.ColorPropConverter
+import com.facebook.react.bridge.JSApplicationCausedNativeException
 import com.facebook.react.bridge.JSApplicationIllegalArgumentException
 import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.bridge.ReadableType
+import com.facebook.react.common.ReactConstants
 import com.facebook.react.uimanager.PixelUtil
 import com.facebook.react.uimanager.ViewProps
+import kotlin.math.roundToInt
 
 /**
  * Utility class that helps with converting android drawable description used in JS to an actual
@@ -73,11 +79,21 @@ public object ReactDrawableHelper {
       context: Context,
       drawableDescriptionDict: ReadableMap,
   ): RippleDrawable {
-    val color = getColor(context, drawableDescriptionDict)
-    val mask = getMask(drawableDescriptionDict)
-    val colorStateList = ColorStateList(arrayOf(intArrayOf()), intArrayOf(color))
+    val resolvedColor = getColor(context, drawableDescriptionDict)
+    var color = resolvedColor ?: getFallbackColor(context)
+
+    if (
+        resolvedColor != null &&
+            drawableDescriptionDict.hasKey("alpha") &&
+            !drawableDescriptionDict.isNull("alpha")
+    ) {
+      val alphaFactor = drawableDescriptionDict.getDouble("alpha").coerceIn(0.0, 1.0)
+      val newAlpha = (Color.alpha(color) * alphaFactor).roundToInt()
+      color = Color.argb(newAlpha, Color.red(color), Color.green(color), Color.blue(color))
+    }
 
-    return RippleDrawable(colorStateList, null, mask)
+    val mask = getMask(drawableDescriptionDict)
+    return RippleDrawable(ColorStateList(arrayOf(intArrayOf()), intArrayOf(color)), null, mask)
   }
 
   private fun setRadius(drawableDescriptionDict: ReadableMap, drawable: Drawable?): Drawable? {
@@ -88,26 +104,49 @@ public object ReactDrawableHelper {
     return drawable
   }
 
-  private fun getColor(context: Context, drawableDescriptionDict: ReadableMap): Int =
-      if (
-          drawableDescriptionDict.hasKey(ViewProps.COLOR) &&
-              !drawableDescriptionDict.isNull(ViewProps.COLOR)
-      ) {
-        drawableDescriptionDict.getInt(ViewProps.COLOR)
-      } else {
+  /**
+   * Returns the resolved ripple color, or null if none was provided or the PlatformColor resource
+   * couldn't be found.
+   */
+  private fun getColor(context: Context, drawableDescriptionDict: ReadableMap): Int? {
+    val rawColor: Any? =
         if (
-            context.theme.resolveAttribute(
-                android.R.attr.colorControlHighlight,
-                resolveOutValue,
-                true,
-            )
+            drawableDescriptionDict.hasKey(ViewProps.COLOR) &&
+                !drawableDescriptionDict.isNull(ViewProps.COLOR)
         ) {
-          context.resources.getColor(resolveOutValue.resourceId, context.theme)
+          when (drawableDescriptionDict.getType(ViewProps.COLOR)) {
+            ReadableType.Number -> drawableDescriptionDict.getDouble(ViewProps.COLOR)
+            ReadableType.Map -> drawableDescriptionDict.getMap(ViewProps.COLOR)
+            else -> null
+          }
         } else {
-          throw JSApplicationIllegalArgumentException(
-              "Attribute colorControlHighlight couldn't be resolved into a drawable"
-          )
+          null
         }
+    return try {
+      ColorPropConverter.getColor(rawColor, context)
+    } catch (e: JSApplicationCausedNativeException) {
+      FLog.w(
+          ReactConstants.TAG,
+          e,
+          "android_ripple: color resource not found, using colorControlHighlight",
+      )
+      null
+    }
+  }
+
+  private fun getFallbackColor(context: Context): Int =
+      if (
+          context.theme.resolveAttribute(
+              android.R.attr.colorControlHighlight,
+              resolveOutValue,
+              true,
+          )
+      ) {
+        context.resources.getColor(resolveOutValue.resourceId, context.theme)
+      } else {
+        throw JSApplicationIllegalArgumentException(
+            "Attribute colorControlHighlight couldn't be resolved into a drawable"
+        )
       }
 
   private fun getMask(drawableDescriptionDict: ReadableMap): Drawable? {

package/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewGroup.kt

@@ -12,6 +12,7 @@ package com.facebook.react.views.view
 import android.annotation.SuppressLint
 import android.annotation.TargetApi
 import android.content.Context
+import android.content.res.Configuration
 import android.graphics.BlendMode
 import android.graphics.Canvas
 import android.graphics.Paint
@@ -28,6 +29,7 @@ import com.facebook.react.R
 import com.facebook.react.bridge.ReactNoCrashSoftException
 import com.facebook.react.bridge.ReactSoftExceptionLogger
 import com.facebook.react.bridge.ReactSoftExceptionLogger.logSoftException
+import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.bridge.UiThreadUtil.assertOnUiThread
 import com.facebook.react.bridge.UiThreadUtil.runOnUiThread
 import com.facebook.react.common.ReactConstants.TAG
@@ -154,6 +156,9 @@ public open class ReactViewGroup public constructor(context: Context?) :
       null
   private var focusOnAttach = false
 
+  internal var nativeBackgroundMap: ReadableMap? = null
+  internal var nativeForegroundMap: ReadableMap? = null
+
   init {
     initView()
   }
@@ -181,6 +186,8 @@ public open class ReactViewGroup public constructor(context: Context?) :
     backfaceOpacity = 1f
     backfaceVisible = true
     childrenRemovedWhileTransitioning = null
+    nativeBackgroundMap = null
+    nativeForegroundMap = null
   }
 
   internal open fun recycleView() {
@@ -587,6 +594,29 @@ public open class ReactViewGroup public constructor(context: Context?) :
     }
   }
 
+  override fun onConfigurationChanged(newConfig: Configuration) {
+    super.onConfigurationChanged(newConfig)
+    if (nativeBackgroundMap != null) {
+      applyNativeBackground(nativeBackgroundMap)
+    }
+    if (nativeForegroundMap != null) {
+      applyNativeForeground(nativeForegroundMap)
+    }
+  }
+
+  internal fun applyNativeBackground(map: ReadableMap?) {
+    nativeBackgroundMap = map
+    setFeedbackUnderlay(
+        this,
+        map?.let { ReactDrawableHelper.createDrawableFromJSDescription(context, it) },
+    )
+  }
+
+  internal fun applyNativeForeground(map: ReadableMap?) {
+    nativeForegroundMap = map
+    foreground = map?.let { ReactDrawableHelper.createDrawableFromJSDescription(context, it) }
+  }
+
   override fun onViewAdded(child: View) {
     assertOnUiThread()
     checkViewClippingTag(child, false)

package/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewManager.kt

@@ -305,17 +305,12 @@ public open class ReactViewManager : ReactClippingViewManager<ReactViewGroup>()
 
   @ReactProp(name = "nativeBackgroundAndroid")
   public open fun setNativeBackground(view: ReactViewGroup, background: ReadableMap?) {
-    val bg = background?.let {
-      ReactDrawableHelper.createDrawableFromJSDescription(view.context, it)
-    }
-    BackgroundStyleApplicator.setFeedbackUnderlay(view, bg)
+    view.applyNativeBackground(background)
   }
 
   @ReactProp(name = "nativeForegroundAndroid")
   public open fun setNativeForeground(view: ReactViewGroup, foreground: ReadableMap?) {
-    view.foreground = foreground?.let {
-      ReactDrawableHelper.createDrawableFromJSDescription(view.context, it)
-    }
+    view.applyNativeForeground(foreground)
   }
 
   @ReactProp(name = ViewProps.NEEDS_OFFSCREEN_ALPHA_COMPOSITING)

package/ReactCommon/cxxreact/ReactNativeVersion.h

@@ -22,7 +22,7 @@ struct ReactNativeVersionType {
   int32_t Major = 0;
   int32_t Minor = 86;
   int32_t Patch = 0;
-  std::string_view Prerelease = "rc.0";
+  std::string_view Prerelease = "rc.2";
 };
 
 constexpr ReactNativeVersionType ReactNativeVersion;

package/ReactCommon/react/renderer/components/view/platform/android/react/renderer/components/view/HostPlatformViewProps.cpp

@@ -450,8 +450,25 @@ inline static void updateNativeDrawableProp(
       nativeDrawableResult["rippleRadius"] =
           nativeDrawableValue.ripple.rippleRadius.value();
     }
-    if (nativeDrawableValue.ripple.color.has_value()) {
-      nativeDrawableResult["color"] = nativeDrawableValue.ripple.color.value();
+    if (nativeDrawableValue.ripple.color.has_value() ||
+        nativeDrawableValue.ripple.colorResourcePaths.has_value()) {
+      if (nativeDrawableValue.ripple.colorResourcePaths.has_value()) {
+        folly::dynamic resourcePaths = folly::dynamic::array();
+        for (const auto& path :
+             nativeDrawableValue.ripple.colorResourcePaths.value()) {
+          resourcePaths.push_back(path);
+        }
+        folly::dynamic platformColorMap = folly::dynamic::object();
+        platformColorMap["resource_paths"] = resourcePaths;
+        nativeDrawableResult["color"] = platformColorMap;
+      } else {
+        nativeDrawableResult["color"] =
+            toAndroidRepr(nativeDrawableValue.ripple.color.value());
+      }
+      if (nativeDrawableValue.ripple.alpha.has_value()) {
+        nativeDrawableResult["alpha"] =
+            nativeDrawableValue.ripple.alpha.value();
+      }
     }
     nativeDrawableResult["borderless"] = nativeDrawableValue.ripple.borderless;
   } else {