Fix android splash jump (#3316)

* Setup translucent status bar of splash screen on android (#3300)

Co-authored-by: Eric Bailey <git@esb.lol>

* Fix conflict better

---------

Co-authored-by: Eiichi Yoshikawa <edo@bari-ikutsu.com>

app.config.js

@@ -161,6 +161,7 @@ module.exports = function (config) {
         './plugins/withAndroidManifestPlugin.js',
         './plugins/withAndroidManifestFCMIconPlugin.js',
         './plugins/withAndroidStylesWindowBackgroundPlugin.js',
+        './plugins/withAndroidSplashScreenStatusBarTranslucentPlugin.js',
         './plugins/shareExtension/withShareExtensions.js',
       ].filter(Boolean),
       extra: {

plugins/withAndroidSplashScreenStatusBarTranslucentPlugin.js

@@ -0,0 +1,28 @@
+const {withStringsXml, AndroidConfig} = require('@expo/config-plugins')
+
+module.exports = function withAndroidSplashScreenStatusBarTranslucentPlugin(
+  appConfig,
+) {
+  return withStringsXml(appConfig, function (decoratedAppConfig) {
+    try {
+      decoratedAppConfig.modResults = AndroidConfig.Strings.setStringItem(
+        [
+          {
+            _: 'true',
+            $: {
+              name: 'expo_splash_screen_status_bar_translucent',
+              translatable: 'false',
+            },
+          },
+        ],
+        decoratedAppConfig.modResults,
+      )
+    } catch (e) {
+      console.error(
+        `withAndroidSplashScreenStatusBarTranslucentPlugin failed`,
+        e,
+      )
+    }
+    return decoratedAppConfig
+  })
+}

src/App.native.tsx

@@ -10,7 +10,6 @@ import {
   SafeAreaProvider,
 } from 'react-native-safe-area-context'
 import * as SplashScreen from 'expo-splash-screen'
-import {StatusBar} from 'expo-status-bar'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {PersistQueryClientProvider} from '@tanstack/react-query-persist-client'
@@ -28,7 +27,6 @@ import {
 } from 'lib/react-query'
 import {s} from 'lib/styles'
 import {ThemeProvider} from 'lib/ThemeContext'
-import {isAndroid} from 'platform/detection'
 import {Provider as DialogStateProvider} from 'state/dialogs'
 import {Provider as InvitesStateProvider} from 'state/invites'
 import {Provider as LightboxStateProvider} from 'state/lightbox'
@@ -76,7 +74,6 @@ function InnerApp() {
 
   return (
     <SafeAreaProvider initialMetrics={initialWindowMetrics}>
-      {isAndroid && <StatusBar />}
       <Alf theme={theme}>
         <Splash isReady={!isInitialLoad}>
           <React.Fragment