@stripe/stripe-react-native 0.57.0 → 0.57.2

package/android/src/main/java/com/reactnativestripesdk/StripeSdkModule.kt

@@ -7,6 +7,7 @@ import android.content.Intent
 import android.os.Bundle
 import android.util.Log
 import android.view.ViewGroup
+import androidx.browser.customtabs.CustomTabsIntent
 import androidx.fragment.app.FragmentActivity
 import com.facebook.react.ReactActivity
 import com.facebook.react.bridge.Arguments
@@ -18,7 +19,6 @@ import com.facebook.react.bridge.ReadableArray
 import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.bridge.UiThreadUtil
 import com.facebook.react.bridge.WritableMap
-import com.facebook.react.bridge.WritableNativeMap
 import com.facebook.react.module.annotations.ReactModule
 import com.reactnativestripesdk.addresssheet.AddressLauncherManager
 import com.reactnativestripesdk.customersheet.CustomerSheetManager
@@ -35,6 +35,7 @@ import com.reactnativestripesdk.utils.createMissingInitError
 import com.reactnativestripesdk.utils.createResult
 import com.reactnativestripesdk.utils.getBooleanOr
 import com.reactnativestripesdk.utils.getIntOrNull
+import com.reactnativestripesdk.utils.getLongOrNull
 import com.reactnativestripesdk.utils.getValOr
 import com.reactnativestripesdk.utils.mapFromPaymentIntentResult
 import com.reactnativestripesdk.utils.mapFromPaymentMethod
@@ -163,7 +164,7 @@ class StripeSdkModule(
 
   private fun configure3dSecure(params: ReadableMap) {
     val stripe3dsConfigBuilder = PaymentAuthConfig.Stripe3ds2Config.Builder()
-    if (params.hasKey("timeout")) stripe3dsConfigBuilder.setTimeout(params.getInt("timeout"))
+    params.getIntOrNull("timeout")?.let { stripe3dsConfigBuilder.setTimeout(it) }
     val uiCustomization = mapToUICustomization(params)
 
     PaymentAuthConfig.init(
@@ -244,10 +245,10 @@ class StripeSdkModule(
       return
     }
 
-    val timeoutKey = "timeout"
-    if (options.hasKey(timeoutKey)) {
+    val timeout = options.getLongOrNull("timeout")
+    if (timeout != null) {
       paymentSheetManager?.presentWithTimeout(
-        options.getInt(timeoutKey).toLong(),
+        timeout,
         promise,
       )
     } else {
@@ -502,7 +503,7 @@ class StripeSdkModule(
         object : ApiResultCallback<Token> {
           override fun onSuccess(result: Token) {
             val tokenId = result.id
-            val res = WritableNativeMap()
+            val res = Arguments.createMap()
             res.putString("tokenId", tokenId)
             promise.resolve(res)
           }
@@ -760,6 +761,7 @@ class StripeSdkModule(
         return
       }
 
+    unregisterStripeUIManager(googlePayLauncherManager)
     googlePayLauncherManager =
       GooglePayLauncherManager(
         reactApplicationContext,
@@ -779,7 +781,7 @@ class StripeSdkModule(
                   expand = listOf("payment_method"),
                   object : ApiResultCallback<PaymentIntent> {
                     override fun onError(e: Exception) {
-                      promise.resolve(createResult("paymentIntent", WritableNativeMap()))
+                      promise.resolve(createResult("paymentIntent", Arguments.createMap()))
                     }
 
                     override fun onSuccess(result: PaymentIntent) {
@@ -799,7 +801,7 @@ class StripeSdkModule(
                   expand = listOf("payment_method"),
                   object : ApiResultCallback<SetupIntent> {
                     override fun onError(e: Exception) {
-                      promise.resolve(createResult("setupIntent", WritableNativeMap()))
+                      promise.resolve(createResult("setupIntent", Arguments.createMap()))
                     }
 
                     override fun onSuccess(result: SetupIntent) {
@@ -829,6 +831,9 @@ class StripeSdkModule(
             }
           }
         }
+      }.also {
+        registerStripeUIManager(it)
+        it.present()
       }
   }
 
@@ -909,7 +914,7 @@ class StripeSdkModule(
       PushProvisioningProxy.isCardInWallet(it, last4) { isCardInWallet, token, error ->
         val result: WritableMap =
           error ?: run {
-            val map = WritableNativeMap()
+            val map = Arguments.createMap()
             map.putBoolean("isInWallet", isCardInWallet)
             map.putMap("token", token)
             map
@@ -1129,7 +1134,7 @@ class StripeSdkModule(
     params: ReadableMap,
     promise: Promise,
   ) {
-    val timeout = params.getIntOrNull("timeout")?.toLong()
+    val timeout = params.getLongOrNull("timeout")
     customerSheetManager?.present(promise, timeout) ?: run {
       promise.resolve(CustomerSheetManager.createMissingInitError())
     }
@@ -1329,6 +1334,39 @@ class StripeSdkModule(
     // noop, iOS only
   }
 
+  @ReactMethod
+  override fun openAuthenticatedWebView(
+    id: String,
+    url: String,
+    promise: Promise,
+  ) {
+    val activity = getCurrentActivityOrResolveWithError(promise) ?: return
+
+    UiThreadUtil.runOnUiThread {
+      try {
+        val uri = android.net.Uri.parse(url)
+        val builder =
+          androidx.browser.customtabs.CustomTabsIntent
+            .Builder()
+
+        // Set toolbar color for better UX
+        builder.setShowTitle(true)
+        builder.setUrlBarHidingEnabled(true)
+
+        val customTabsIntent = builder.build()
+
+        // Note: Custom Tabs doesn't have built-in redirect handling like iOS ASWebAuthenticationSession.
+        // The redirect will be handled via deep linking when the auth server redirects to stripe-connect://
+        // The React Native Linking module will capture the deep link and pass it back to the JS layer.
+        customTabsIntent.launchUrl(activity, uri)
+
+        promise.resolve(null)
+      } catch (e: Exception) {
+        promise.resolve(createError("Failed", e))
+      }
+    }
+  }
+
   override fun addListener(eventType: String?) {
     // noop, iOS only
   }
@@ -1376,7 +1414,7 @@ class StripeSdkModule(
    * provided will be resolved with an error message instructing the user to retry the method.
    */
   private fun getCurrentActivityOrResolveWithError(promise: Promise?): FragmentActivity? {
-    (currentActivity as? FragmentActivity)?.let {
+    (reactApplicationContext.currentActivity as? FragmentActivity)?.let {
       return it
     }
     promise?.resolve(createMissingActivityError())
@@ -1430,14 +1468,14 @@ class StripeSdkModule(
    */
   private fun preventActivityRecreation() {
     isRecreatingReactActivity = false
-    currentActivity?.application?.unregisterActivityLifecycleCallbacks(activityLifecycleCallbacks)
-    currentActivity?.application?.registerActivityLifecycleCallbacks(activityLifecycleCallbacks)
+    reactApplicationContext.currentActivity?.application?.unregisterActivityLifecycleCallbacks(activityLifecycleCallbacks)
+    reactApplicationContext.currentActivity?.application?.registerActivityLifecycleCallbacks(activityLifecycleCallbacks)
   }
 
   private fun setupComposeCompatView() {
     UiThreadUtil.runOnUiThread {
       composeCompatView = composeCompatView ?: StripeAbstractComposeView.CompatView(context = reactApplicationContext).also {
-        currentActivity?.findViewById<ViewGroup>(android.R.id.content)?.addView(
+        reactApplicationContext.currentActivity?.findViewById<ViewGroup>(android.R.id.content)?.addView(
           it,
         )
       }

package/android/src/main/java/com/reactnativestripesdk/StripeSdkPackage.kt

@@ -19,11 +19,20 @@ class StripeSdkPackage : BaseReactPackage() {
   ): NativeModule? =
     when (name) {
       StripeSdkModule.NAME -> StripeSdkModule(reactContext)
+      NativeOnrampSdkModuleSpec.NAME -> {
+        val onrampModuleClass = getOnrampModuleClass()
+        val constructor = onrampModuleClass.getConstructor(ReactApplicationContext::class.java)
+        constructor.newInstance(reactContext) as NativeModule
+      }
       else -> null
     }
 
   override fun getReactModuleInfoProvider(): ReactModuleInfoProvider {
-    val moduleList: Array<Class<out NativeModule?>> = arrayOf(StripeSdkModule::class.java)
+    val moduleList: Array<Class<out NativeModule?>> =
+      arrayOf(
+        StripeSdkModule::class.java,
+        getOnrampModuleClass(),
+      )
     val reactModuleInfoMap: MutableMap<String, ReactModuleInfo> = HashMap()
     for (moduleClass in moduleList) {
       val reactModule = moduleClass.getAnnotation(ReactModule::class.java) ?: continue
@@ -47,8 +56,18 @@ class StripeSdkPackage : BaseReactPackage() {
       StripeContainerManager(),
       CardFormViewManager(),
       GooglePayButtonManager(),
-      AddToWalletButtonManager(reactContext),
+      AddToWalletButtonManager(),
       AddressSheetViewManager(),
       EmbeddedPaymentElementViewManager(),
+      NavigationBarManager(),
     )
+
+  private fun getOnrampModuleClass(): Class<out NativeModule?> {
+    if (BuildConfig.IS_ONRAMP_INCLUDED) {
+      @Suppress("UNCHECKED_CAST")
+      return Class.forName("com.reactnativestripesdk.OnrampSdkModule") as Class<out NativeModule?>
+    } else {
+      return FakeOnrampSdkModule::class.java
+    }
+  }
 }

package/android/src/main/java/com/reactnativestripesdk/addresssheet/AddressSheetView.kt

@@ -3,9 +3,9 @@ package com.reactnativestripesdk.addresssheet
 import android.annotation.SuppressLint
 import android.util.Log
 import android.widget.FrameLayout
+import com.facebook.react.bridge.Arguments
 import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.bridge.WritableMap
-import com.facebook.react.bridge.WritableNativeMap
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.UIManagerHelper
 import com.reactnativestripesdk.buildPaymentSheetAppearance
@@ -172,14 +172,14 @@ class AddressSheetView(
     }
 
     internal fun buildResult(addressDetails: AddressDetails): WritableMap =
-      WritableNativeMap().apply {
+      Arguments.createMap().apply {
         putMap(
           "result",
-          WritableNativeMap().apply {
+          Arguments.createMap().apply {
             putString("name", addressDetails.name)
             putMap(
               "address",
-              WritableNativeMap().apply {
+              Arguments.createMap().apply {
                 putString("city", addressDetails.address?.city)
                 putString("country", addressDetails.address?.country)
                 putString("line1", addressDetails.address?.line1)

package/android/src/main/java/com/reactnativestripesdk/addresssheet/AddressSheetViewManager.kt

@@ -41,7 +41,7 @@ class AddressSheetViewManager :
     view: AddressSheetView,
     appearance: Dynamic,
   ) {
-    view.setAppearance(appearance.asMap())
+    view.setAppearance(appearance.asMapOrNull())
   }
 
   @ReactProp(name = "defaultValues")
@@ -49,7 +49,7 @@ class AddressSheetViewManager :
     view: AddressSheetView,
     defaults: Dynamic,
   ) {
-    view.setDefaultValues(defaults.asMap())
+    view.setDefaultValues(defaults.asMapOrNull())
   }
 
   @ReactProp(name = "additionalFields")

package/android/src/main/java/com/reactnativestripesdk/customersheet/CustomerSheetManager.kt

@@ -12,17 +12,14 @@ import com.facebook.react.bridge.Promise
 import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.bridge.WritableMap
-import com.facebook.react.bridge.WritableNativeMap
 import com.reactnativestripesdk.ReactNativeCustomerAdapter
 import com.reactnativestripesdk.ReactNativeCustomerSessionProvider
+import com.reactnativestripesdk.buildBillingDetails
+import com.reactnativestripesdk.buildBillingDetailsCollectionConfiguration
 import com.reactnativestripesdk.buildPaymentSheetAppearance
 import com.reactnativestripesdk.getBase64FromBitmap
 import com.reactnativestripesdk.getBitmapFromDrawable
-import com.reactnativestripesdk.getIntegerArrayList
-import com.reactnativestripesdk.getStringArrayList
-import com.reactnativestripesdk.mapToAddressCollectionMode
 import com.reactnativestripesdk.mapToCardBrandAcceptance
-import com.reactnativestripesdk.mapToCollectionMode
 import com.reactnativestripesdk.utils.CreateTokenErrorType
 import com.reactnativestripesdk.utils.ErrorType
 import com.reactnativestripesdk.utils.KeepJsAwakeTask
@@ -30,6 +27,8 @@ import com.reactnativestripesdk.utils.PaymentSheetAppearanceException
 import com.reactnativestripesdk.utils.StripeUIManager
 import com.reactnativestripesdk.utils.createError
 import com.reactnativestripesdk.utils.getBooleanOr
+import com.reactnativestripesdk.utils.getIntegerList
+import com.reactnativestripesdk.utils.getStringList
 import com.reactnativestripesdk.utils.mapFromPaymentMethod
 import com.reactnativestripesdk.utils.mapToPreferredNetworks
 import com.stripe.android.ExperimentalAllowsRemovalOfLastSavedPaymentMethodApi
@@ -66,7 +65,7 @@ class CustomerSheetManager(
     val billingConfigParams = arguments.getMap("billingDetailsCollectionConfiguration")
     val allowsRemovalOfLastSavedPaymentMethod =
       arguments.getBooleanOr("allowsRemovalOfLastSavedPaymentMethod", true)
-    val paymentMethodOrder = arguments.getStringArrayList("paymentMethodOrder")
+    val paymentMethodOrder = arguments.getStringList("paymentMethodOrder")
 
     val appearance =
       try {
@@ -83,7 +82,7 @@ class CustomerSheetManager(
         .googlePayEnabled(googlePayEnabled)
         .headerTextForSelectionScreen(headerTextForSelectionScreen)
         .preferredNetworks(
-          mapToPreferredNetworks(arguments.getIntegerArrayList("preferredNetworks")),
+          mapToPreferredNetworks(arguments.getIntegerList("preferredNetworks")),
         ).allowsRemovalOfLastSavedPaymentMethod(allowsRemovalOfLastSavedPaymentMethod)
         .cardBrandAcceptance(mapToCardBrandAcceptance(arguments))
 
@@ -126,7 +125,10 @@ class CustomerSheetManager(
       val customerId = arguments.getString("customerId")
       if (customerId == null) {
         initPromise.resolve(
-          createError(ErrorType.Failed.toString(), "When using `customerEphemeralKeySecret` you must provide a value for `customerId`"),
+          createError(
+            ErrorType.Failed.toString(),
+            "When using `customerEphemeralKeySecret` you must provide a value for `customerId`",
+          ),
         )
         return
       }
@@ -157,7 +159,7 @@ class CustomerSheetManager(
 
     customerSheet?.configure(configuration.build())
 
-    initPromise.resolve(WritableNativeMap())
+    initPromise.resolve(Arguments.createMap())
   }
 
   private fun handleResult(result: CustomerSheetResult) {
@@ -295,33 +297,11 @@ class CustomerSheetManager(
     internal fun createMissingInitError(): WritableMap =
       createError(ErrorType.Failed.toString(), "No customer sheet has been initialized yet.")
 
-    internal fun createDefaultBillingDetails(map: ReadableMap): PaymentSheet.BillingDetails {
-      val addressMap = map.getMap("address")
-      val address =
-        PaymentSheet.Address(
-          addressMap?.getString("city"),
-          addressMap?.getString("country"),
-          addressMap?.getString("line1"),
-          addressMap?.getString("line2"),
-          addressMap?.getString("postalCode"),
-          addressMap?.getString("state"),
-        )
-      return PaymentSheet.BillingDetails(
-        address,
-        map.getString("email"),
-        map.getString("name"),
-        map.getString("phone"),
-      )
-    }
+    internal fun createDefaultBillingDetails(map: ReadableMap): PaymentSheet.BillingDetails =
+      buildBillingDetails(map) ?: PaymentSheet.BillingDetails()
 
     internal fun createBillingDetailsCollectionConfiguration(map: ReadableMap): PaymentSheet.BillingDetailsCollectionConfiguration =
-      PaymentSheet.BillingDetailsCollectionConfiguration(
-        name = mapToCollectionMode(map.getString("name")),
-        phone = mapToCollectionMode(map.getString("phone")),
-        email = mapToCollectionMode(map.getString("email")),
-        address = mapToAddressCollectionMode(map.getString("address")),
-        attachDefaultsToPaymentMethod = map.getBooleanOr("attachDefaultsToPaymentMethod", false),
-      )
+      buildBillingDetailsCollectionConfiguration(map)
 
     internal fun createCustomerAdapter(
       context: ReactApplicationContext,
@@ -404,7 +384,7 @@ class CustomerSheetManager(
         val onBehalfOf = bundle.getString("onBehalfOf")
         CustomerSheet.IntentConfiguration
           .Builder()
-          .paymentMethodTypes(bundle.getStringArrayList("paymentMethodTypes") ?: emptyList())
+          .paymentMethodTypes(bundle.getStringList("paymentMethodTypes") ?: emptyList())
           .apply {
             if (onBehalfOf != null) {
               this.onBehalfOf(onBehalfOf)

package/android/src/main/java/com/reactnativestripesdk/customersheet/ReactNativeCustomerSessionProvider.kt

@@ -11,7 +11,8 @@ class ReactNativeCustomerSessionProvider(
   private val stripeSdkModule = context.getNativeModule(StripeSdkModule::class.java)
 
   internal var provideSetupIntentClientSecretCallback: CompletableDeferred<String>? = null
-  internal var providesCustomerSessionClientSecretCallback: CompletableDeferred<CustomerSheet.CustomerSessionClientSecret>? = null
+  internal var providesCustomerSessionClientSecretCallback:
+    CompletableDeferred<CustomerSheet.CustomerSessionClientSecret>? = null
 
   override suspend fun intentConfiguration(): Result<CustomerSheet.IntentConfiguration> = Result.success(intentConfiguration)
 

package/android/src/main/java/com/reactnativestripesdk/pushprovisioning/AddToWalletButtonManager.kt

@@ -1,7 +1,5 @@
 package com.reactnativestripesdk.pushprovisioning
 
-import android.content.Context
-import com.bumptech.glide.Glide
 import com.facebook.react.bridge.Dynamic
 import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.module.annotations.ReactModule
@@ -13,12 +11,10 @@ import com.facebook.react.viewmanagers.AddToWalletButtonManagerInterface
 import com.reactnativestripesdk.utils.asMapOrNull
 
 @ReactModule(name = AddToWalletButtonManager.REACT_CLASS)
-class AddToWalletButtonManager(
-  applicationContext: Context,
-) : SimpleViewManager<AddToWalletButtonView>(),
+class AddToWalletButtonManager :
+  SimpleViewManager<AddToWalletButtonView>(),
   AddToWalletButtonManagerInterface<AddToWalletButtonView> {
   private val delegate = AddToWalletButtonManagerDelegate(this)
-  private val requestManager = Glide.with(applicationContext)
 
   override fun getName() = REACT_CLASS
 
@@ -34,8 +30,7 @@ class AddToWalletButtonManager(
     view.onAfterUpdateTransaction()
   }
 
-  override fun createViewInstance(reactContext: ThemedReactContext): AddToWalletButtonView =
-    AddToWalletButtonView(reactContext, requestManager)
+  override fun createViewInstance(reactContext: ThemedReactContext): AddToWalletButtonView = AddToWalletButtonView(reactContext)
 
   override fun getExportedCustomDirectEventTypeConstants() =
     mutableMapOf(
@@ -64,7 +59,7 @@ class AddToWalletButtonManager(
     view: AddToWalletButtonView,
     ephemeralKey: Dynamic,
   ) {
-    val map = ephemeralKey.asMap()
+    val map = ephemeralKey.asMapOrNull()
     if (map == null) return
     view.setEphemeralKey(map)
   }
@@ -74,7 +69,7 @@ class AddToWalletButtonManager(
     view: AddToWalletButtonView,
     token: Dynamic,
   ) {
-    val map = token.asMap()
+    val map = token.asMapOrNull()
     if (map == null) return
     view.setToken(map)
   }

package/android/src/main/java/com/reactnativestripesdk/pushprovisioning/AddToWalletButtonView.kt

@@ -2,37 +2,45 @@ package com.reactnativestripesdk.pushprovisioning
 
 import android.annotation.SuppressLint
 import android.content.res.ColorStateList
-import android.graphics.Color
 import android.graphics.drawable.Drawable
 import android.graphics.drawable.RippleDrawable
 import android.view.MotionEvent
 import android.webkit.URLUtil
 import androidx.appcompat.widget.AppCompatImageView
-import com.bumptech.glide.RequestManager
-import com.bumptech.glide.load.DataSource
-import com.bumptech.glide.load.engine.GlideException
-import com.bumptech.glide.load.model.GlideUrl
-import com.bumptech.glide.request.RequestListener
-import com.bumptech.glide.request.target.Target
+import androidx.core.graphics.drawable.toDrawable
+import androidx.core.graphics.toColorInt
+import androidx.core.net.toUri
+import com.facebook.common.executors.UiThreadImmediateExecutorService
+import com.facebook.common.references.CloseableReference
+import com.facebook.datasource.BaseDataSubscriber
+import com.facebook.datasource.DataSource
+import com.facebook.drawee.backends.pipeline.Fresco
+import com.facebook.imagepipeline.image.CloseableBitmap
+import com.facebook.imagepipeline.image.CloseableImage
+import com.facebook.imagepipeline.request.ImageRequestBuilder
 import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.bridge.WritableMap
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.UIManagerHelper
+import com.facebook.react.views.imagehelper.ResourceDrawableIdHelper
 import com.reactnativestripesdk.utils.createError
 
 @SuppressLint("ViewConstructor")
 class AddToWalletButtonView(
   private val context: ThemedReactContext,
-  private val requestManager: RequestManager,
 ) : AppCompatImageView(context) {
   private var cardDetails: ReadableMap? = null
   private var ephemeralKey: String? = null
   private var sourceMap: ReadableMap? = null
   private var token: ReadableMap? = null
 
-  private var loadedSource: Any? = null
-  private var heightOverride: Int = 0
-  private var widthOverride: Int = 0
+  private var loadedSource: String? = null
+  private var currentDataSource: DataSource<CloseableReference<CloseableImage>>? = null
+
+  init {
+    scaleType = ScaleType.CENTER_CROP
+    clipToOutline = true
+  }
 
   override fun performClick(): Boolean {
     super.performClick()
@@ -78,85 +86,90 @@ class AddToWalletButtonView(
   }
 
   fun onAfterUpdateTransaction() {
-    val sourceToLoad = getUrlOrResourceId(sourceMap)
-    if (sourceToLoad == null) {
-      requestManager.clear(this)
+    val uri = sourceMap?.getString("uri")
+    if (uri == null) {
+      cancelCurrentRequest()
       setImageDrawable(null)
       loadedSource = null
-    } else if (sourceToLoad != loadedSource || (heightOverride > 0 || widthOverride > 0)) {
-      loadedSource = sourceToLoad
-      val scale = sourceMap?.getDouble("scale") ?: 1.0
-
-      requestManager
-        .load(sourceToLoad)
-        .addListener(
-          object : RequestListener<Drawable> {
-            override fun onLoadFailed(
-              e: GlideException?,
-              model: Any?,
-              target: Target<Drawable>?,
-              isFirstResource: Boolean,
-            ): Boolean {
-              dispatchEvent(
-                createError("Failed", "Failed to load the source from $sourceToLoad"),
-              )
-              return true
-            }
-
-            override fun onResourceReady(
-              resource: Drawable?,
-              model: Any?,
-              target: Target<Drawable>?,
-              dataSource: DataSource?,
-              isFirstResource: Boolean,
-            ): Boolean {
-              setImageDrawable(
-                RippleDrawable(
-                  ColorStateList.valueOf(Color.parseColor("#e0e0e0")),
-                  resource,
-                  null,
-                ),
-              )
-              return true
-            }
-          },
-        ).centerCrop()
-        .override((widthOverride * scale).toInt(), (heightOverride * scale).toInt())
-        .into(this)
+      return
     }
-  }
 
-  private fun getUrlOrResourceId(sourceMap: ReadableMap?): Any? {
-    sourceMap?.getString("uri")?.let {
-      return if (URLUtil.isValidUrl(it)) {
-        // Debug mode, Image.resolveAssetSource resolves to local http:// URL
-        GlideUrl(it)
+    if (uri != loadedSource) {
+      loadedSource = uri
+      if (URLUtil.isValidUrl(uri)) {
+        // Debug mode: Image.resolveAssetSource resolves to local http:// URL
+        loadImageFromUrl(uri)
       } else {
-        // Release mode, Image.resolveAssetSource resolves to a drawable resource
-        context.resources.getIdentifier(it, "drawable", context.packageName)
+        // Release mode: Image.resolveAssetSource resolves to a drawable resource name
+        loadImageFromDrawable(uri)
       }
     }
-    return null
   }
 
-  override fun onSizeChanged(
-    w: Int,
-    h: Int,
-    oldw: Int,
-    oldh: Int,
-  ) {
-    super.onSizeChanged(w, h, oldw, oldh)
-    if (w > 0 && h > 0) {
-      heightOverride = h
-      widthOverride = w
-      onAfterUpdateTransaction()
-      heightOverride = 0
-      widthOverride = 0
+  private fun loadImageFromUrl(url: String) {
+    cancelCurrentRequest()
+
+    val imageRequest =
+      ImageRequestBuilder
+        .newBuilderWithSource(url.toUri())
+        .build()
+
+    val dataSource = Fresco.getImagePipeline().fetchDecodedImage(imageRequest, context)
+    currentDataSource = dataSource
+
+    dataSource.subscribe(
+      object : BaseDataSubscriber<CloseableReference<CloseableImage>>() {
+        override fun onNewResultImpl(dataSource: DataSource<CloseableReference<CloseableImage>>) {
+          if (!dataSource.isFinished) return
+          val imageRef = dataSource.result ?: return
+
+          try {
+            val image = imageRef.get()
+            if (image is CloseableBitmap) {
+              val drawable = image.underlyingBitmap.toDrawable(resources)
+              setImageWithRipple(drawable)
+            }
+          } finally {
+            CloseableReference.closeSafely(imageRef)
+          }
+        }
+
+        override fun onFailureImpl(dataSource: DataSource<CloseableReference<CloseableImage>>) {
+          dispatchEvent(createError("Failed", "Failed to load the source from $url"))
+        }
+      },
+      UiThreadImmediateExecutorService.getInstance(),
+    )
+  }
+
+  private fun loadImageFromDrawable(resourceName: String) {
+    // Instance is deprecated, but have to use until we drop support for RN 0.79
+    @Suppress("DEPRECATION")
+    val drawable = ResourceDrawableIdHelper.instance.getResourceDrawable(context, resourceName)
+    if (drawable != null) {
+      setImageWithRipple(drawable)
+    } else {
+      dispatchEvent(createError("Failed", "Failed to load drawable resource: $resourceName"))
     }
   }
 
+  private fun setImageWithRipple(drawable: Drawable) {
+    setImageDrawable(
+      RippleDrawable(
+        ColorStateList.valueOf("#e0e0e0".toColorInt()),
+        drawable,
+        null,
+      ),
+    )
+  }
+
+  private fun cancelCurrentRequest() {
+    currentDataSource?.close()
+    currentDataSource = null
+  }
+
   fun onDropViewInstance() {
-    requestManager.clear(this)
+    cancelCurrentRequest()
   }
 
   fun setSourceMap(map: ReadableMap?) {