[Android] Vector images from native resources is not working

[yonatanganot]

Based on React Native documentation, we should be able to fetch images from native resources.
This is works great on iOS, but in Android you can't load vector images using uri.

React Native version:

react-native: 0.61.5

Steps To Reproduce

Placing vector image named image.xml in drawable folder and using this code, is not working:
<Image width={100} height={100} source={{ uri: 'image' }} style={{ width: 100, height: 100 }} />

Placing the vector image in assets folder and using this code, is not working either:
<Image width={100} height={100} source={{ uri: 'asset:/image.xml' }} style={{ width: 100, height: 100 }} />

Note that placing .jpg or .png images is working without any issues.

[yonatanganot]

Mentioned in #16651 also.

[crazyjooe]

Having the same issue, unfortunately

[xelven]

same issue here

[Omelyan]

the same

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[yonatanganot]

still exist in version 0.63.1

[valin0k]

and the same issue for me

[aprilmintacpineda]

I'm getting the same effect on my end, in my case, I was implementing a splash screen with https://github.com/crazycodeboy/react-native-splash-screen, here's launch_screen.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#5C4FA0"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/LaunchLogo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="150dp"
        android:contentDescription="@string/LaunchLogoContentDescription"
        android:minWidth="50dp"
        android:minHeight="50dp"
        app:srcCompat="@drawable/ic_circle_with_wallet" />

    <TextView
        android:id="@+id/AppName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="310dp"
        android:fontFamily="sans-serif-black"
        android:text="@string/app_name"
        android:textColor="#fff"
        android:textSize="36sp" />
</RelativeLayout>

I'm doing this via Layout editor on Android studio, in there, it's displaying the image, but when I run the app, the image is not being displayed. I don't get any errors whatsoever, after about an hour of googling around, I found people talking about extending AppCompatActivity (haven't tried doing that because MainActivity is already extending ReactActivity) etc., some even recommended using android.support.v7.widget.AppCompatImageView which doesn't work

https://stackoverflow.com/questions/38221986/android-vector-drawable-appsrccompat-not-showing-images

[lrlineroa]

I solved it, creating any other container for example Linear Layout and putting svg as background


and works fine.

I´m using react-native-splash-screen for the splash flow

[mattmcdonald-uk]

This issue still exists in 0.68 (the originally reported issue, unrelated to splash screens).

[cjimenezst]

Same issue in 0.69.8

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[yonatanganot]

The issue still exists in version 0.72.4

[SamuelBrucksch]

Same issue here unfortunately. Will this ever be supported?

[andrewli-eb]

Also seeing this issue

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.

[Abbondanzo]

Support for loading vector drawables has just landed in #45354. It's currently sitting behind a feature flag called loadVectorDrawablesOnImages while we investigate performance implications of parsing every local image resource. If all goes well and there aren't any regressive behaviors from this change, I'm going to try and get this out in 0.76.0.

Separately, I'm also working on adding Metro support so you can import vector drawable images same as you would any other image by import.