diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/image/ReactImageView.kt b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/image/ReactImageView.kt index 5ed3c15d781e29..6a2a6c922ed0aa 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/image/ReactImageView.kt +++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/image/ReactImageView.kt @@ -338,7 +338,16 @@ public class ReactImageView( public override fun onDraw(canvas: Canvas) { BackgroundStyleApplicator.clipToPaddingBox(this, canvas) - super.onDraw(canvas) + try { + super.onDraw(canvas) + } catch (e: RuntimeException) { + // Only provide updates if downloadListener is set (shouldNotify is true) + if (downloadListener != null) { + val eventDispatcher = + UIManagerHelper.getEventDispatcherForReactTag(context as ReactContext, id) + eventDispatcher?.dispatchEvent(createErrorEvent(UIManagerHelper.getSurfaceId(this), id, e)) + } + } } public fun maybeUpdateView() { diff --git a/packages/rn-tester/js/examples/Image/ImageExample.js b/packages/rn-tester/js/examples/Image/ImageExample.js index 05bb37e214c5e2..20bb44c754cfc3 100644 --- a/packages/rn-tester/js/examples/Image/ImageExample.js +++ b/packages/rn-tester/js/examples/Image/ImageExample.js @@ -10,6 +10,7 @@ 'use strict'; +import type {ImageProps} from 'react-native/Libraries/Image/ImageProps'; import type {LayoutEvent} from 'react-native/Libraries/Types/CoreEventTypes'; import * as ReactNativeFeatureFlags from 'react-native/src/private/featureflags/ReactNativeFeatureFlags'; @@ -228,12 +229,8 @@ type NetworkImageExampleState = {| progress: $ReadOnlyArray, |}; -type NetworkImageExampleProps = $ReadOnly<{| - source: ImageSource, -|}>; - class NetworkImageExample extends React.Component< - NetworkImageExampleProps, + ImageProps, NetworkImageExampleState, > { state: NetworkImageExampleState = { @@ -248,7 +245,7 @@ class NetworkImageExample extends React.Component< ) : ( <> this.setState({loading: true})} onError={e => @@ -970,6 +967,20 @@ exports.examples = [ ); }, }, + { + title: 'Error Handler for Large Images', + render: function (): React.Node { + return ( + 100MB bitmap + uri: 'https://upload.wikimedia.org/wikipedia/commons/2/2c/Mars_topography_%28MOLA_dataset%29_with_poles_HiRes.jpg', + }} + /> + ); + }, + }, { title: 'Image Download Progress', render: function (): React.Node {