[Android] function RNBootSplash.hide(); doesn't hide splash immediate, working fine on IOS device

[KulBoiz]

Bug summary

I'm called RNBootSplash.hide(); function inside my App.ts file but on my android and it doesn't hide splash immediate https://drive.google.com/file/d/1_ok4feLdBYhiERQXu4L6WGiyggzoPSfZ/view?usp=sharing How can I hide the splash screen immediately?

Library version

^4.4.0

Environment info

System:
    OS: macOS 13.1
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
    Memory: 34.49 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v16.16.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.1, iOS 16.1, macOS 13.0, tvOS 16.1, watchOS 9.1
    Android SDK: Not Found
  IDEs:
    Android Studio: 2021.1 AI-211.7628.21.2111.8309675
    Xcode: 14.1/14B47b - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.15 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2 
    react-native: 0.67.2 => 0.67.2 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

1. …
2. …

Reproducible sample code

...
import RNBootSplash from "react-native-bootsplash";
export const NAVIGATION_PERSISTENCE_KEY = "NAVIGATION_STATE"

function App() {
  const [rootStore, setRootStore] = useState<RootStore | undefined>(undefined)
  const {
    onNavigationStateChange,
    isRestored: isNavigationStateRestored,
  } = useNavigationPersistence(storage, NAVIGATION_PERSISTENCE_KEY)

  async function requestUserPermission() {
    const authStatus = await messaging().requestPermission()
    const enabled =
      authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
      authStatus === messaging.AuthorizationStatus.PROVISIONAL

    if (enabled) {
      // console.log("Authorization status:", authStatus)
    }
  }

  async function onMessageReceived(message) {
    // Do something
    const data = JSON.parse(JSON.stringify(message, null, 2))
    const noti = data?.notification ?? {}
    notifee.displayNotification({
      id: data?.messageId ?? Math.random() * 6,
      title: noti?.title ?? "",
      body: noti?.body ?? "",
    })
  }

  async function onAppBootstrap() {
    // Register the device with FCM
    await messaging().registerDeviceForRemoteMessages()
    // Get the token
    await messaging().getToken()
  }

  messaging().onMessage(onMessageReceived)
  messaging().setBackgroundMessageHandler(onMessageReceived)
  // Kick off initial async loading actions, like loading fonts and RootStore
  useEffect(() => {
    RNBootSplash.hide();
    (async () => {
      await initFonts() // expo
      setupRootStore().then(setRootStore)
      await onAppBootstrap()
      await requestUserPermission()
    })()
  }, [])

  if (!rootStore || !isNavigationStateRestored) return null

  return (
      <GestureHandlerRootView style={{ flex: 1 }}>
        <RootStoreProvider value={rootStore}>
          <NativeBaseProvider theme={theme}>
            <SafeAreaProvider initialMetrics={initialWindowMetrics}>
              <ErrorBoundary catchErrors={"always"}>
                <AppNavigator
                  // initialState={initialNavigationState}
                  onStateChange={onNavigationStateChange}
                />
                <UpdateVersion />
              </ErrorBoundary>
            </SafeAreaProvider>
          </NativeBaseProvider>
        </RootStoreProvider>
      </GestureHandlerRootView>
  )
}
export default App

[zoontek]

@KulBoiz I don't see a splash screen on your video.

[KulBoiz]

@zoontek thanks for the quick reply, the splash screen is the white screen starting at the first of the video, let me change the icon so you can see it more clearly. Here's what happened with android 11: https://drive.google.com/file/d/1fljieK4ygnN6yJjvsBHmtuoH7zRfbxbF/view?usp=sharing and android 12: https://drive.google.com/file/d/1YWO2MB7s787m8pxJ4SVlplF4C3tao-cH/view?usp=sharing I think this bug happened with android 12 below

[zoontek]

I cannot reproduce that. Please provide a reproduction project repository.

[KulBoiz]

I created react native app by using https://github.com/infinitered/ignite, then I integrated [react-native-bootsplash]. You can try that, hope this help.

[KulBoiz]

I clone my project so you can check again https://github.com/KulBoiz/boost-splash-test @zoontek

[zoontek]

No issue at all on my side. Are you sure you just didn't forget to bind port 8081? (adb reverse tcp:8081 tcp:8081) Causing the JS bundle load waiting for timeout in development.

https://user-images.githubusercontent.com/1902323/212656368-72b639f7-8f86-429a-921f-d845b99c7d6c.mov

Anyway, there is no library issue here.