Splash Screen is not expanding fully to the size of the device dimensions

[Yandamuri]

Bug summary

This is how Splash Screen is rendering in my device,

I want the white background to fully occupy the screen.

Is there any way to control the dimensions of the splash screen?

Library version

react-native-bootsplash: 4.3.2

Environment info

System:
    OS: macOS 12.5
    CPU: (8) x64 Apple M1
    Memory: 24.02 MB / 8.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 14.0.0 - /usr/local/bin/node
    Yarn: Not Found
    npm: 6.14.4 - /usr/local/bin/npm
    Watchman: Not Found
  Managers:
    CocoaPods: 1.11.2 - /opt/homebrew/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.4, iOS 15.5, macOS 12.3, tvOS 15.4, watchOS 8.5
    Android SDK: Not Found
  IDEs:
    Android Studio: 4.2 AI-202.7660.26.42.7351085
    Xcode: 13.4.1/13F100 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.10 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.0.0 => 18.0.0 
    react-native: 0.69.5 => 0.69.5 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

1. Please clone the repository form mentioned link(Repository link is given in Reproducible sample code section)

2.Just run the app in your mobile

Please be notified that App just stays at Splash Screen only as I didn't call RNBootSplash.hide({ fade: true }).

Reproducible sample code

Please find the reproducible demo here -- https://github.com/Yandamuri/-react-native-boot-splash-test

[zoontek]

@Yandamuri https://github.com/Yandamuri/-react-native-boot-splash-test is not accessible.

[Yandamuri]

@Yandamuri https://github.com/Yandamuri/-react-native-boot-splash-test is not accessible.

I have changed the visibility. You must be able to access now.

[zoontek]

@Yandamuri Do you struggle on iOS or Android? Device? System version?

[Yandamuri]

@Yandamuri Do you struggle on iOS or Android? Device? System version?

I tried on Android 12(Motorola Edge 20 Fusion)

[zoontek]

I checked two seconds and it's just that you are not following the documentation 🤦‍♂️ This package even provide a generator that does a huge part of the job for yourself, please use it.

Just remove the comment in your styles.xml (<!-- <item name="windowSplashScreenBackground">@color/bootsplash_background</item> --> is commented!):

<!-- BootTheme should inherit from Theme.SplashScreen -->
<style name="BootTheme" parent="Theme.SplashScreen">
-   <!-- <item name="windowSplashScreenBackground">@color/bootsplash_background</item> -->
+   <item name="windowSplashScreenBackground">@color/bootsplash_background</item> 
    <item name="windowSplashScreenAnimatedIcon">@mipmap/boot_splash</item>
    <item name="postSplashScreenTheme">@style/AppTheme</item>
</style>

Than fix the color in colors.xml to use white:

-   <color name="bootsplash_background">#1A7AF3</color>
+   <color name="bootsplash_background">#FFFFFF</color>
</resources>

Also, hide the splash screen on componentDidMount, not at bundle load (you want to wait for the first app render):

import React, {Component} from 'react';
import {View, Text} from 'react-native';
import RNBootSplash from 'react-native-bootsplash';

class App extends Component {
+ componentDidMount() {
+   RNBootSplash.hide({fade: true});
+ }

  render() {
    return (
      <View style={Styles.container}>
        <Text>Welcome To My App</Text>
      </View>
    );
  }
}

const Styles = {
  container: {
    flex: 1,
    backgroundColor: 'rgba(256, 0, 0, 0.1)',
    justifyContent: 'center',
    alignItems: 'center',
  },
};

export default CodePush(App);

You might thing it's OK to bother open source maintainers for basic helping, it's not. Please, please, next time search a bit before 🙏 Also consider a donation for the help given here.

[Yandamuri]

@zoontek I have gone through the documentation throughly and even applied multiple background colours. If the content of the Splash Screen is so small, Then applying background may work as you said. But If the content is bigger, Then I can certainly say that there are some restrictions to the height and width of the splash screen. To explain this I came with better Splash Screen

below is the Image i am using for Splash Screen

This is how Splash Screen appears with background colour

This is how Splash Screen appears without background colour

From the above images we can understand that Splash Screen dimensions are being restricted. If you think I am wrong, Can you please use the same Splash Screen in your device and share me the snaps?

BTW, I totally agree that Documentation is providing clear explanation. But I didn't find any info about controling the dimensions of the splash screen.

[zoontek]

CLI (with custom --logo-size param, as explained in the README):

▲  Projects/react-native-boot-splash-test main › yarn react-native generate-bootsplash google_logo.png \
  --background-color=1C7AF3 \
  --logo-width=192
yarn run v1.22.19
$ /Users/zoontek/Projects/react-native-boot-splash-test/node_modules/.bin/react-native generate-bootsplash google_logo.png --background-color=1C7AF3 --logo-width=192

    Android
✏️   android/app/src/main/res/values/colors.xml
✨  android/app/src/main/res/mipmap-mdpi/bootsplash_logo.png (288x288)
✨  android/app/src/main/res/mipmap-hdpi/bootsplash_logo.png (432x432)
✨  android/app/src/main/res/mipmap-xxhdpi/bootsplash_logo.png (864x864)
✨  android/app/src/main/res/mipmap-xhdpi/bootsplash_logo.png (576x576)
✨  android/app/src/main/res/mipmap-xxxhdpi/bootsplash_logo.png (1152x1152)

    iOS
✨  ios/Musings/BootSplash.storyboard
✨  ios/Musings/Images.xcassets/BootSplashLogo.imageset/bootsplash_logo@3x.png (576x195)
✨  ios/Musings/Images.xcassets/BootSplashLogo.imageset/bootsplash_logo.png (192x65)
✨  ios/Musings/Images.xcassets/BootSplashLogo.imageset/bootsplash_logo@2x.png (384x130)

 ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
 ┃  💖  Love this library? Consider sponsoring!  ┃
 ┃  One-time amounts are available.              ┃
 ┃  https://github.com/sponsors/zoontek          ┃
 ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

✅  Done! Thanks for using react-native-bootsplash.
✨  Done in 0.94s.
▲  Projects/react-native-boot-splash-test main ›

Generated assets:

styles.xml:

<!-- BootTheme should inherit from Theme.SplashScreen -->
<style name="BootTheme" parent="Theme.SplashScreen">
    <item name="windowSplashScreenBackground">@color/bootsplash_background</item>
    <item name="windowSplashScreenAnimatedIcon">@mipmap/bootsplash_logo</item>
    <item name="postSplashScreenTheme">@style/AppTheme</item>
</style>

https://user-images.githubusercontent.com/1902323/194121882-51d6e52d-f9af-45ba-a695-7435d07f49ff.mp4

---

And yes, the round mask is mandatory. More infos here. The CLI even warn you about this:

[Yandamuri]

@zoontek

Yes You are right, It's working as expected now. Sorry to bother you. Not following the documentation is the only reason behind this issue. And thank you so much for your clarification. BTW, I have few doubts,

1. I assume that, The Splash Screen dimensions which you mentioned in the docs are prescribed by official Android Docs. Am I right?

2. If we don't specify any Splash Screen then logo will be used as Splash Screen. Am I right?

3.How long Splash Screen stays depends on app performance or anything to do with library?

[zoontek]

1. Yes
2. You have to set a logo, or it will only be the background color
3. Until hide() call

[AnisDerbel]

@zoontek I do understand that is preferred to follow the google guidelines but in the end it is up to us if we want to follow it or no based on our requirement.

My question is the library who force this crop when the size is big ? if yes why so , you could just show up a warning.

[zoontek]

@AnisDerbel No, it's Android 12 and AndroidX core which are cropping the logo, not this library 🙂

[AnisDerbel]

@zoontek thanks for your quick reply, is there a way of implementing the splash screen using a separate layout xml file where I can define the RelativeLayout dimensions and to make it flexible to add any component ? like the case in react-native-splash-screen where I don't have the cropping issue.

[zoontek]

@AnisDerbel Every library has it (on Android >= 12)

[Yuniac]

This issue occurred to me as well (library versions at the time of writing was 4.6.0) and I was able to solve it by using the CLI tool to regenerate the images, it generated new images that worked perfectly. (See the readme on how to use the CLI)