Table of contents

react-native-fast-image Error while updating property 'source' of a view managed by: FastImageView

Android Feb 22, 2020 Viewed 2.5K Comments 0

react-native-fast-image FastImage is an Image replacement that solves these issues. FastImage is a wrapper around SDWebImage (iOS) and Glide (Android).

Question

If the source object passed to FastImage contains illegal uri:

{ uri: 'INVALID_URL' }

For example:

<FastImage source={{uri: "/logo.png"}} />

When running on Android, an exception will occur, but it is normal on iOS.

com.facebook.react.bridge.JSApplicationIllegalArgumentException: Error while updating property 'source' of a view managed by: FastImageView
	at com.facebook.react.uimanager.ViewManagersPropertyCache$PropSetter.updateViewProp(ViewManagersPropertyCache.java:98)
	at com.facebook.react.uimanager.ViewManagerPropertyUpdater$FallbackViewManagerSetter.setProperty(ViewManagerPropertyUpdater.java:131)
	at com.facebook.react.uimanager.ViewManagerPropertyUpdater.updateProps(ViewManagerPropertyUpdater.java:51)
	at com.facebook.react.uimanager.ViewManager.updateProperties(ViewManager.java:46)
	at com.facebook.react.uimanager.NativeViewHierarchyManager.createView(NativeViewHierarchyManager.java:268)
	at com.facebook.react.uimanager.UIViewOperationQueue$CreateViewOperation.execute(UIViewOperationQueue.java:198)
	at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.dispatchPendingNonBatchedOperations(UIViewOperationQueue.java:1036)
	at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuarded(UIViewOperationQueue.java:1007)
	at com.facebook.react.uimanager.GuardedFrameCallback.doFrame(GuardedFrameCallback.java:29)
	at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:172)
	at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame(ChoreographerCompat.java:84)
	at android.view.Choreographer$CallbackRecord.run(Choreographer.java:984)
	at android.view.Choreographer.doCallbacks(Choreographer.java:798)
	at android.view.Choreographer.doFrame(Choreographer.java:727)
	at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:972)
	at android.os.Handler.handleCallback(Handler.java:790)
	at android.os.Handler.dispatchMessage(Handler.java:99)
	at android.os.Looper.loop(Looper.java:192)
	at android.app.ActivityThread.main(ActivityThread.java:6906)
	at java.lang.reflect.Method.invoke(Native Method)
	at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:550)
	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:828)
Caused by: java.lang.reflect.InvocationTargetException
	at java.lang.reflect.Method.invoke(Native Method)
	at com.facebook.react.uimanager.ViewManagersPropertyCache$PropSetter.updateViewProp(ViewManagersPropertyCache.java:83)
	... 21 more
Caused by: java.lang.IllegalArgumentException: Must not be null or empty
	at com.bumptech.glide.util.Preconditions.checkNotEmpty(Preconditions.java:39)
	at com.bumptech.glide.load.model.GlideUrl.<init>(GlideUrl.java:57)
	at com.dylanvann.fastimage.FastImageSource.getGlideUrl(FastImageSource.java:110)
	at com.dylanvann.fastimage.FastImageViewManager.setSrc(FastImageViewManager.java:75)
	... 23 more
java.lang.reflect.InvocationTargetException
	at java.lang.reflect.Method.invoke(Native Method)
	at com.facebook.react.uimanager.ViewManagersPropertyCache$PropSetter.updateViewProp(ViewManagersPropertyCache.java:83)
	at com.facebook.react.uimanager.ViewManagerPropertyUpdater$FallbackViewManagerSetter.setProperty(ViewManagerPropertyUpdater.java:131)
	at com.facebook.react.uimanager.ViewManagerPropertyUpdater.updateProps(ViewManagerPropertyUpdater.java:51)
	at com.facebook.react.uimanager.ViewManager.updateProperties(ViewManager.java:46)
	at com.facebook.react.uimanager.NativeViewHierarchyManager.createView(NativeViewHierarchyManager.java:268)
	at com.facebook.react.uimanager.UIViewOperationQueue$CreateViewOperation.execute(UIViewOperationQueue.java:198)
	at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.dispatchPendingNonBatchedOperations(UIViewOperationQueue.java:1036)
	at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuarded(UIViewOperationQueue.java:1007)
	at com.facebook.react.uimanager.GuardedFrameCallback.doFrame(GuardedFrameCallback.java:29)
	at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:172)
	at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame(ChoreographerCompat.java:84)
	at android.view.Choreographer$CallbackRecord.run(Choreographer.java:984)
	at android.view.Choreographer.doCallbacks(Choreographer.java:798)
	at android.view.Choreographer.doFrame(Choreographer.java:727)
	at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:972)
	at android.os.Handler.handleCallback(Handler.java:790)
	at android.os.Handler.dispatchMessage(Handler.java:99)
	at android.os.Looper.loop(Looper.java:192)
	at android.app.ActivityThread.main(ActivityThread.java:6906)
	at java.lang.reflect.Method.invoke(Native Method)
	at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:550)
	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:828)
Caused by: java.lang.IllegalArgumentException: Must not be null or empty
	at com.bumptech.glide.util.Preconditions.checkNotEmpty(Preconditions.java:39)
	at com.bumptech.glide.load.model.GlideUrl.<init>(GlideUrl.java:57)
	at com.dylanvann.fastimage.FastImageSource.getGlideUrl(FastImageSource.java:110)
	at com.dylanvann.fastimage.FastImageViewManager.setSrc(FastImageViewManager.java:75)
	... 23 more
java.lang.IllegalArgumentException: Must not be null or empty
	at com.bumptech.glide.util.Preconditions.checkNotEmpty(Preconditions.java:39)
	at com.bumptech.glide.load.model.GlideUrl.<init>(GlideUrl.java:57)
	at com.dylanvann.fastimage.FastImageSource.getGlideUrl(FastImageSource.java:110)
	at com.dylanvann.fastimage.FastImageViewManager.setSrc(FastImageViewManager.java:75)
	at java.lang.reflect.Method.invoke(Native Method)
	at com.facebook.react.uimanager.ViewManagersPropertyCache$PropSetter.updateViewProp(ViewManagersPropertyCache.java:83)
	at com.facebook.react.uimanager.ViewManagerPropertyUpdater$FallbackViewManagerSetter.setProperty(ViewManagerPropertyUpdater.java:131)
	at com.facebook.react.uimanager.ViewManagerPropertyUpdater.updateProps(ViewManagerPropertyUpdater.java:51)
	at com.facebook.react.uimanager.ViewManager.updateProperties(ViewManager.java:46)
	at com.facebook.react.uimanager.NativeViewHierarchyManager.createView(NativeViewHierarchyManager.java:268)
	at com.facebook.react.uimanager.UIViewOperationQueue$CreateViewOperation.execute(UIViewOperationQueue.java:198)
	at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.dispatchPendingNonBatchedOperations(UIViewOperationQueue.java:1036)
	at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuarded(UIViewOperationQueue.java:1007)
	at com.facebook.react.uimanager.GuardedFrameCallback.doFrame(GuardedFrameCallback.java:29)
	at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:172)
	at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame(ChoreographerCompat.java:84)
	at android.view.Choreographer$CallbackRecord.run(Choreographer.java:984)
	at android.view.Choreographer.doCallbacks(Choreographer.java:798)
	at android.view.Choreographer.doFrame(Choreographer.java:727)
	at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:972)
	at android.os.Handler.handleCallback(Handler.java:790)
	at android.os.Handler.dispatchMessage(Handler.java:99)
	at android.os.Looper.loop(Looper.java:192)
	at android.app.ActivityThread.main(ActivityThread.java:6906)
	at java.lang.reflect.Method.invoke(Native Method)
	at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:550)
	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:828)

Solution

Before using FastImage, verify the uri. Check if it starts with http/https. If no, return null.

const normalisedSource = source && typeof source.uri === 'string' && (source.uri.split('https://')[1] || source.uri.split('http://')[1]) ? source : null;
<FastImage source={normalisedSource} />
Updated Feb 22, 2020