Started seeing "Grey splash" for 1 sec after SplashScreen. only Android

[dvijeniii05]

Before submitting a new issue

• [X] I tested using the latest version of the library, as the bug might be already fixed.
• [X] I tested using a supported version of react native.
• [X] I checked for possible duplicate issues, with possible answers.

Bug summary

Fro some reason, recently noticed that on Physical devices, there is a "Grey splash" for 1 second displayed after SplashScreen. Only on Android.

To confirm, I am calling a hide splash screen method on NavigationContainer ready like so:

      <NavigationContainer
        onReady={() => {
          BootSplash.hide();
        }}
        theme={MyTheme}>
        <AppView />
      </NavigationContainer>

Video attached below:

https://github.com/user-attachments/assets/a1a74164-600b-4b18-8628-26a96cfedcdc

Library version

5.1.0

Environment info

System:
  OS: macOS 14.4
  CPU: (12) arm64 Apple M3 Pro
  Memory: 123.33 MB / 36.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.18.0
    path: ~/.nvm/versions/node/v18.18.0/bin/node
  Yarn:
    version: 1.22.22
    path: /opt/homebrew/bin/yarn
  npm:
    version: 9.8.1
    path: ~/.nvm/versions/node/v18.18.0/bin/npm
  Watchman:
    version: 2024.07.15.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /Users/mm/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.5
      - iOS 17.5
      - macOS 14.5
      - tvOS 17.5
      - visionOS 1.2
      - watchOS 10.5
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.1 AI-241.18034.62.2411.12071903
  Xcode:
    version: 15.4/15F31d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.12
    path: /usr/bin/javac
  Ruby:
    version: 3.2.5
    path: /Users/mm/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.6
    wanted: ^0.72.0
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

Steps to reproduce

1. Implement boothSplash into React-Native cli project
2. Initiate the app on Android physical device

Reproducible sample code

<NavigationContainer
        onReady={() => {
          BootSplash.hide();
        }}
        theme={MyTheme}>
        <AppView />
      </NavigationContainer>

[zoontek]

NavigationContainer onReady is fired too soon by react-navigation.

Ideally, fire hide in your screen main View / ScrollView onLayout.

[dvijeniii05]

@zoontek - are you suggesting just to call it within useEffect of the main (fist) Screen?

[zoontek]

No, on layout event of this first screen.

[dvijeniii05]

@zoontek - thanks for the suggestion, but the issue is still present even after moving bootsplash.hide() into useLayoutEffect hook on the Screen level :( :

  useLayoutEffect(() => {
    BootSplash.hide();
  }, []);

Must say tho, the splash screen does disappear on a later stage compared to the previous implementation, but the grey fish is still there. I am also getting a "Double splash screen" warning on my pre-launch report in Play Store. Not sure wether this is related tho.

[dvijeniii05]

Ohh, I think I misunderstood your suggestion, and after moving the .hide() method into actual onLayout prop event of the View container, the issue seemed to be gone :)

[dvijeniii05]

Yep, issue is gone.