[Android] Splash screen image is scaled

[vlkpa]

Bug summary

Splash screen image is scaled.

Library version

4.1.0

Environment info

System:
    OS: Windows 10 10.0.19041
    CPU: (8) x64 AMD Ryzen 7 4700U with Radeon Graphics
    Memory: 10.97 GB / 31.40 GB
  Binaries:
    Node: 14.15.4 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 7.17.0 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK: Not Found
    Windows SDK: Not Found
  IDEs:
    Android Studio: Version  4.1.0.0 AI-201.8743.12.41.7042882
    Visual Studio: Not Found
  Languages:
    Java: 15.0.2 - C:\Program Files\Common Files\Oracle\Java\javapath\javac.EXE
  npmPackages:
    @react-native-community/cli: Not Found
    react: Not Found
    react-native: Not Found
    react-native-windows: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

1. Integrate this library into project following Readme (migrate from react-native-splash-screen)
2. Generate bootsplash using React logo from example project yarn react-native generate-bootsplash src/assets/logo/bootsplash_logo_original.png --background-color=73be46

3. Open app styles.xml `

   `

AndroidManifest.xml ` <manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" package="com.ttt.mobile.android">

<application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher" android:allowBackup="false" tools:replace="android:allowBackup" android:usesCleartextTraffic="true" android:networkSecurityConfig="@xml/network_security_config" android:theme="@style/BootTheme"> <meta-data android:name="com.google.ar.core" android:value="optional"/>

<activity
  android:name=".MainActivity"
  android:label="@string/app_name"
  android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
  android:launchMode="singleTask"
  android:usesCleartextTraffic="true"
  android:windowSoftInputMode="adjustResize"
  android:screenOrientation="portrait"
  android:exported="true">
  <intent-filter>
    <action android:name="android.intent.action.VIEW"/>

    <category android:name="android.intent.category.DEFAULT"/>
    <category android:name="android.intent.category.BROWSABLE"/>

    <data android:scheme="tttmobile"/>
  </intent-filter>
  <intent-filter>
    <action android:name="android.intent.action.MAIN"/>
    <category android:name="android.intent.category.LAUNCHER"/>
  </intent-filter>
</activity>

<activity
  android:name="com.facebook.react.devsupport.DevSettingsActivity"
  android:exported="false"/>

<!-- … -->

` android/build.gradle -same as Readme

android/app/build.gradle -same as Readme

MainActivity.java -same as Readme

Reproducible sample code

import * as BootSplash from 'react-native-bootsplash';

export const App = () => {
  useEffect(() => {
    setTimeout(() => BootSplash.hide(), 4000);
  }, []);

  return (
    <>
      <AppMenu />
    </>
  );
};

export default App;

[zoontek]

Use the CLI assets generator.

[vlkpa]

Yes, I am using CLI assets generator with logo from example project. yarn react-native generate-bootsplash src/assets/logo/bootsplash_logo_original.png --background-color=73be46

I want to migrate from react-native-splash-screen. Also removed mimap-anydpi-v26 folder as here

Initially the logo is cut off and then a second or so after, it's corrected as here but without changing width during the asset generation.

[AmirDiafi]

+1

[zoontek]

Can you publish a repository to reproduce the issue?

[AmirDiafi]

I fixed it by removing the width from the logo generator command:

yarn react-native generate-bootsplash assets/bootsplash_logo_original.png \ 
  --background-color=8EF9C3 \
  --assets-path=assets \
  --flavor=main

[zoontek]

@vlkpa Please publish a repository so I can help or I will close this issue, thanks.

[anija]

I had the same problem, this is my workaround:

• generate assets with yarn react-native generate-bootsplash <PATH>
• copy the generated bootsplash_logo.png from mipmap-xxhdpi
• paste it to drawable-xhdpi
• use the drawable in styles: <item name="windowSplashScreenAnimatedIcon">@drawable/bootsplash_logo</item>

[anija]

Closed? It's a bug a lot of us are experiencing.

[zoontek]

@anija Yes, I couldn't reproduce it and didn't receive a reproduction repository, which make me think of userland issues (maybe author forgot to regenerate assets for v4?)

[Thanaen]

Hi @zoontek What does it mean to "regenerate assets"?

[zoontek]

@Thanaen Re-run the CLI react-native generate-bootsplash command

[maxperry]

I was having the same issue. Moving all the generated files from mimap-* to the respective drawable-* folders as suggested by @anija fixed it for me.

[RobertSasak]

I tried to reproduce the issue with following steps without any success. However in my project I still face the same issue.

react-native init rnbootsplash
cd rnbootsplash
yarn add react-native-bootsplash
code .
# Do Android changes as described from 1-5.
yarn react-native generate-bootsplash react.png
react-native run-android --variant release

package.json

"dependencies": {
    "react": "17.0.2",
    "react-native": "0.68.2",
    "react-native-bootsplash": "4.1.5"
  },