Distorted image upon opening the app as oppose to running the app after successful build

[jgudo]

Environment

• Windows 10 10.0.19041
• Node: 14.16.1
• Yarn: 1.22.10
• npm: 6.14.12

Dependencies

• react-native 0.64.0
• react-native-splash-screen 3.2.0

Platform issue

I have only tested the app on Android

Demo

I am testing the app on my Samsung Galaxy Tab-A (Android 9) and as you can see, upon opening the app, the image/logo gets stretched/distorted for a few seconds. But this doesn't occur when I run and build the app. The same problem occur when I test it on a phone.

I have followed all the steps in the docs and also referred to other issues #70 and #312 and have tried all possible solutions but still no luck.

This is what my launch_screen.xml looks like

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/splash_background"
  >
    <ImageView
        android:layout_width="180dp"
        android:layout_height="180dp"
        android:src="@drawable/logo_md"
        android:layout_centerHorizontal="true"
        android:scaleType="fitCenter"
        android:adjustViewBounds="true"
        android:layout_centerVertical="true"
      />
</RelativeLayout>

[sugata98]

Any solutions?

[jgudo]

@sugata98 None of the solutions I've tried worked. I ended up using another package. Check out react-native-bootsplash