[Android] Splash screen is appear as a background when opening debug menu

[7dp]

Bug summary

[Android] Splash screen is appear as a background when opening debug menu (shake the device > select Settings).

Expectation:

Reality:

Any help would be appreciated 😊. And thanks for this really good library!

Library version

^5.1.3

Environment info

System:
  OS: macOS 12.6
  CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
  Memory: 27.30 MB / 8.00 GB
  Shell:
    version: 5.8.1
    path: /bin/zsh
Binaries:
  Node:
    version: 18.17.1
    path: ~/.nvm/versions/node/v18.17.1/bin/node
  Yarn:
    version: 1.22.19
    path: ~/.nvm/versions/node/v18.17.1/bin/yarn
  npm:
    version: 9.6.7
    path: ~/.nvm/versions/node/v18.17.1/bin/npm
  Watchman:
    version: 2023.08.28.00
    path: /usr/local/bin/watchman
Managers:
  CocoaPods:
    version: 1.11.3
    path: /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:
    API Levels:
      - "28"
      - "29"
      - "30"
      - "31"
      - "32"
      - "33"
    Build Tools:
      - 28.0.3
      - 29.0.2
      - 29.0.3
      - 30.0.2
      - 30.0.3
      - 31.0.0
      - 33.0.0
    System Images:
      - android-33 | Google APIs Intel x86_64 Atom
    Android NDK: Not Found
IDEs:
  Android Studio: 2022.1 AI-221.6008.13.2211.9619390
  Xcode:
    version: 14.1/14B47b
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 11.0.20
    path: /usr/bin/javac
  Ruby:
    version: 2.7.5
    path: /Users/wicakradityo/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.5
    wanted: 0.72.5
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

Steps to reproduce

0. Install & setup BootSplash
1. Shake the device, then debug popup will show
2. Select Settings

Reproducible sample code

// app.tsx

...

const onNavigationReady = () => {
    BootSplash.hide({ fade: true })
}

return (
    <SafeAreaProvider initialMetrics={initialWindowMetrics}>
      <KeyboardProvider>
        <Provider store={store}>
          <PersistGate persistor={persistor}>
            <PortalProvider>
              <ErrorBoundary FallbackComponent={ErrorFallback} onError={onError}>
                <NavigationContainer
                  ref={navigationContainerRef}
                  onReady={onNavigationReady}
                  onStateChange={(state) => {
                    console.log('CURRENT SCREEN:', state?.routes[state.index].name)
                  }}
                >
                  <StatusBar backgroundColor={Colors.white} style="dark" animated />
                  <StackNavigator />
                  <NetworkInfo />
                  <RNToast config={toastConfig} />
                  {Config.ENV_LEVEL !== 'production' ? <DevButton /> : null}
                </NavigationContainer>
              </ErrorBoundary>
            </PortalProvider>
          </PersistGate>
        </Provider>
      </KeyboardProvider>
    </SafeAreaProvider>
  )

[zoontek]

This is caused by the theme being applied to the whole application, and not activity only. An easy way to fix this, by editing your AndroidManifest.xml:

<manifest xmlns:android="http://schemas.android.com/apk/res/android">

    <uses-permission android:name="android.permission.INTERNET" />

    <application
        android:name=".MainApplication"
        android:label="@string/app_name"
        android:icon="@mipmap/ic_launcher"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:allowBackup="false"
-       android:theme="@style/BootTheme">
+       android:theme="@style/AppTheme">
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name"
            android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
            android:launchMode="singleTask"
            android:windowSoftInputMode="adjustResize"
+           android:theme="@style/BootTheme"
            android:exported="true"> <!-- note the new "exported" element needed for API31 -->
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

I will update the README accordingly

[zoontek]

README updated: https://github.com/zoontek/react-native-bootsplash/commit/eec2a1a82de816ac0dc436eb53f35589a081ec9a

[7dp]

Thank you Mathieu for the excellent solution, and the README update!