Support loading vector drawables in ImageView (facebook#45354)

Summary:
Pull Request resolved: facebook#45354

Fresco has indicated that they have no plans to support loading vector assets and similar drawable types in Drawee-backed views ([issue](facebook/fresco#329), [issue](facebook/fresco#1463), [issue](facebook/fresco#2463)). Guidance has been to instead load the vector drawable onto the backing image view ourselves. On the React Native side, having the ability to load vector drawables has been requested many times ([issue](facebook#16651), [issue](facebook#27502)).

I went this route over using a custom Fresco decoder for XML assets because vector drawables are compiled down into binary XML and I couldn't find a trivial, performant way to parse those files in a context-aware manner. This change only accounts for vector drawables, not any of the other XML-based drawable types (layer lists, level lists, state lists, 9-patch, etc.). Support could be added easily in the future by expanding the `getDrawableIfUnsupported` function.

## Changelog

[Android] [Added] - Added support for rendering XML assets provided to `Image`

Reviewed By: javache

Differential Revision: D59530172

packages/react-native/ReactAndroid/api/ReactAndroid.api

@@ -6463,6 +6463,7 @@ public final class com/facebook/react/views/imagehelper/ResourceDrawableIdHelper
 	public final fun getResourceDrawable (Landroid/content/Context;Ljava/lang/String;)Landroid/graphics/drawable/Drawable;
 	public final fun getResourceDrawableId (Landroid/content/Context;Ljava/lang/String;)I
 	public final fun getResourceDrawableUri (Landroid/content/Context;Ljava/lang/String;)Landroid/net/Uri;
+	public final fun isVectorDrawable (Landroid/content/Context;Ljava/lang/String;)Z
 }
 
 public final class com/facebook/react/views/imagehelper/ResourceDrawableIdHelper$Companion {

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/image/ReactImageView.java

@@ -496,6 +496,17 @@ public void maybeUpdateView() {
             ? mFadeDurationMs
             : mImageSource.isResource() ? 0 : REMOTE_IMAGE_FADE_DURATION_MS);
 
+    Drawable drawable = getDrawableIfUnsupported(mImageSource);
+    if (drawable != null) {
+      maybeUpdateViewFromDrawable(drawable);
+    } else {
+      maybeUpdateViewFromRequest(doResize);
+    }
+
+    mIsDirty = false;
+  }
+
+  private void maybeUpdateViewFromRequest(boolean doResize) {
     List<Postprocessor> postprocessors = new LinkedList<>();
     if (mIterativeBoxBlurPostProcessor != null) {
       postprocessors.add(mIterativeBoxBlurPostProcessor);
@@ -553,17 +564,45 @@ public void maybeUpdateView() {
     }
 
     if (mDownloadListener != null) {
-      hierarchy.setProgressBarImage(mDownloadListener);
+      getHierarchy().setProgressBarImage(mDownloadListener);
     }
 
     setController(mDraweeControllerBuilder.build());
-    mIsDirty = false;
 
     // Reset again so the DraweeControllerBuilder clears all it's references. Otherwise, this causes
     // a memory leak.
     mDraweeControllerBuilder.reset();
   }
 
+  private void maybeUpdateViewFromDrawable(Drawable drawable) {
+    final boolean shouldNotify = mDownloadListener != null;
+    final EventDispatcher mEventDispatcher =
+        shouldNotify
+            ? UIManagerHelper.getEventDispatcherForReactTag((ReactContext) getContext(), getId())
+            : null;
+
+    if (mEventDispatcher != null) {
+      mEventDispatcher.dispatchEvent(
+          ImageLoadEvent.createLoadStartEvent(
+              UIManagerHelper.getSurfaceId(ReactImageView.this), getId()));
+    }
+
+    getHierarchy().setImage(drawable, 1, false);
+
+    if (mEventDispatcher != null) {
+      mEventDispatcher.dispatchEvent(
+          ImageLoadEvent.createLoadEvent(
+              UIManagerHelper.getSurfaceId(ReactImageView.this),
+              getId(),
+              mImageSource.getSource(),
+              getWidth(),
+              getHeight()));
+      mEventDispatcher.dispatchEvent(
+          ImageLoadEvent.createLoadEndEvent(
+              UIManagerHelper.getSurfaceId(ReactImageView.this), getId()));
+    }
+  }
+
   // VisibleForTesting
   public void setControllerListener(ControllerListener controllerListener) {
     mControllerForTesting = controllerListener;
@@ -635,6 +674,30 @@ private boolean shouldResize(ImageSource imageSource) {
     }
   }
 
+  /**
+   * Checks if the provided ImageSource should not be requested through Fresco and instead loaded
+   * directly from the resources table. Fresco explicitly does not support a number of drawable
+   * types like VectorDrawable but they can still be mounted in the image hierarchy.
+   *
+   * @param imageSource
+   * @return drawable resource if Fresco cannot load the image, null otherwise
+   */
+  private @Nullable Drawable getDrawableIfUnsupported(ImageSource imageSource) {
+    if (!ReactNativeFeatureFlags.loadVectorDrawablesOnImages()) {
+      return null;
+    }
+    String resourceName = imageSource.getSource();
+    if (!imageSource.isResource() || resourceName == null) {
+      return null;
+    }
+    ResourceDrawableIdHelper drawableHelper = ResourceDrawableIdHelper.getInstance();
+    boolean isVectorDrawable = drawableHelper.isVectorDrawable(getContext(), resourceName);
+    if (!isVectorDrawable) {
+      return null;
+    }
+    return drawableHelper.getResourceDrawable(getContext(), resourceName);
+  }
+
   @Nullable
   private ResizeOptions getResizeOptions() {
     int width = Math.round((float) getWidth() * mResizeMultiplier);

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/imagehelper/ResourceDrawableIdHelper.kt

@@ -8,10 +8,12 @@
 package com.facebook.react.views.imagehelper
 
 import android.content.Context
+import android.content.res.Resources
 import android.graphics.drawable.Drawable
 import android.net.Uri
 import androidx.core.content.res.ResourcesCompat
 import javax.annotation.concurrent.ThreadSafe
+import org.xmlpull.v1.XmlPullParser
 
 /** Helper class for obtaining information about local images. */
 @ThreadSafe
@@ -61,6 +63,39 @@ public class ResourceDrawableIdHelper private constructor() {
     }
   }
 
+  public fun isVectorDrawable(context: Context, name: String): Boolean {
+    return getOpeningXmlTag(context, name) == "vector"
+  }
+
+  /**
+   * If the provided resource name is a valid drawable resource and is an XML file, returns the root
+   * XML tag. Skips over the versioning/encoding header. Non-XML files and malformed XML files
+   * return null.
+   *
+   * For example, a vector drawable file would return "vector".
+   */
+  private fun getOpeningXmlTag(context: Context, name: String): String? {
+    val resId = getResourceDrawableId(context, name).takeIf { it > 0 } ?: return null
+    return try {
+      val xmlParser = context.resources.getXml(resId)
+      xmlParser.use {
+        var parentTag: String? = null
+        var eventType = xmlParser.eventType
+        while (eventType != XmlPullParser.END_DOCUMENT) {
+          if (eventType == XmlPullParser.START_TAG) {
+            parentTag = xmlParser.name
+            break
+          }
+          eventType = xmlParser.next()
+        }
+        parentTag
+      }
+    } catch (e: Resources.NotFoundException) {
+      // Drawable image is not an XML file
+      null
+    }
+  }
+
   public companion object {
     private const val LOCAL_RESOURCE_SCHEME = "res"
     private val resourceDrawableIdHelper: ResourceDrawableIdHelper = ResourceDrawableIdHelper()

packages/rn-tester/android/app/src/main/res/drawable/ic_android.xml

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:tint="#a4c639"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+    <path
+        android:fillColor="#000"
+        android:pathData="M17.6,11.48 L19.44,8.3a0.63,0.63 0,0 0,-1.09 -0.63l-1.88,3.24a11.43,11.43 0,0 0,-8.94 0L5.65,7.67a0.63,0.63 0,0 0,-1.09 0.63L6.4,11.48A10.81,10.81 0,0 0,1 20L23,20A10.81,10.81 0,0 0,17.6 11.48ZM7,17.25A1.25,1.25 0,1 1,8.25 16,1.25 1.25,0 0,1 7,17.25ZM17,17.25A1.25,1.25 0,1 1,18.25 16,1.25 1.25,0 0,1 17,17.25Z" />
+</vector>

packages/rn-tester/js/examples/Image/ImageExample.js

@@ -601,6 +601,23 @@ class OnPartialLoadExample extends React.Component<
   }
 }
 
+type VectorDrawableExampleState = {||};
+
+type VectorDrawableExampleProps = $ReadOnly<{||}>;
+
+class VectorDrawableExample extends React.Component<
+  VectorDrawableExampleProps,
+  VectorDrawableExampleState,
+> {
+  render(): React.Node {
+    return (
+      <View style={styles.flex}>
+        <Image source={{uri: 'ic_android'}} style={{height: 64, width: 64}} />
+      </View>
+    );
+  }
+}
+
 const fullImage: ImageSource = {
   uri: IMAGE2,
 };
@@ -1511,4 +1528,13 @@ exports.examples = [
     },
     platform: 'ios',
   },
+  {
+    title: 'Vector Drawable',
+    description:
+      'Demonstrating an example of loading a vector drawable asset by name',
+    render: function (): React.Node {
+      return <VectorDrawableExample />;
+    },
+    platform: 'android',
+  },
 ];