Bootsplash splash screen is half size on galaxy s10

[raymondjacobson]

Bug summary

Trying to understand how hdpi and this library work together.
My splash screen was generated with width of 150px and I have an Animated.Image component that is also width of 150px. On iOS & pixel phones, the BootSplash screen and the Animated.Image are identical size, however on a Galaxy S10, the image is twice the size of the bootsplash (e.g. the width of the bootsplash image is equivalent to React Native 75px).

Library version

4.3.3

Environment info

info Fetching system and libraries information...
System:
    OS: macOS 12.6
    CPU: (8) arm64 Apple M1
    Memory: 101.00 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 14.17.5 - ~/.nvm/versions/node/v14.17.5/bin/node
    Yarn: 1.22.17 - /opt/homebrew/bin/yarn
    npm: 6.14.15 - ~/.nvm/versions/node/v14.17.5/bin/npm
    Watchman: 2022.10.03.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /opt/homebrew/lib/ruby/gems/3.0.0/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.1, iOS 16.1, macOS 13.0, tvOS 16.1, watchOS 9.1
    Android SDK:
      API Levels: 29, 30, 31, 33
      Build Tools: 28.0.3, 30.0.2, 30.0.3, 31.0.0
      System Images: android-31 | Google APIs ARM 64 v8a, android-33 | Google APIs ARM 64 v8a
      Android NDK: Not Found
  IDEs:
    Android Studio: 2021.3 AI-213.7172.25.2113.9123335
    Xcode: 14.1/14B47b - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_292 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2
    react-native: 0.66.5 => 0.66.5
    react-native-macos: Not Found

Steps to reproduce

Run on Galaxy S10

Reproducible sample code

1.

npx react-native generate-bootsplash src/assets/images/bootsplash_logo.png --background-color=7E1BCC --logo-width=150 --assets-path=src/assets/images

logo: {
    width: 150
}

<Animated.Image
    source={bootSplashLogo}
    fadeDuration={0}
    resizeMode="contain"
    onLoadEnd={() => setBootSplashLogoIsLoaded(true)}
    style={[
      styles.logo,
      { transform: [{ translateY: translateY.current }] },
    ]}
  />

[raymondjacobson]

The underlying issue here appears to me that android:windowSplashScreenAnimatedIcon is not consistently sized between android devices. This is even reflected in apps like Youtube. The question I guess to answer is can we programmatically detect the size of android:windowSplashScreenAnimatedIcon in such a way where we can scale our react native animation accordingly? Otherwise, our best bet is just bootsplash.hide() with no react native counterpart that animates nicely.

[zoontek]

@raymondjacobson First, re-read the README to be sure you didn't miss a thing. (ex: uses <item name="windowSplashScreenAnimatedIcon">@mipmap/bootsplash_logo</item>, not <item name="android:windowSplashScreenAnimatedIcon">@mipmap/bootsplash_logo</item> if you want support of Android < 12 (needed to use AndroidX core package)

Secondly, by default, the android image include some padding (it's computed for you if you use the CLI tool). But if you want to output files to use with Image, use the --assets-path param. It will output a logo without padding, and the transition will be perfect.

Check the example app on the repository, you will get it.

[zoontek]

@raymondjacobson I saw that this PR has been merged. Does this mean you fixed your issue?

[SchlagerKhan]

@raymondjacobson Did you manage to solve this? I'm having the same issue.

[dowon938]

I'm having the same issue. in 4.7.1

[RamProg]

We are having the same issue with 4.7.3. Looks good on an emulated Pixel 5, then too small on a physical Samsung Galaxy S20+

[RamProg]

@zoontek should this be reopened?

[raymondjacobson]

@raymondjacobson Did you manage to solve this? I'm having the same issue.

Nope- just removed the animation