[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