Improve splash display on android (#3105)

* Set window background during startup on android

* Set statusbar color to transparent and fine-tune it
zio/stable
Eiichi Yoshikawa 2024-03-06 14:28:27 +09:00 committed by GitHub
parent 317e0cda7a
commit 26fc0cf66d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 39 additions and 4 deletions

View File

@ -11,6 +11,17 @@ const DARK_SPLASH_CONFIG = {
resizeMode: 'cover', resizeMode: 'cover',
} }
const SPLASH_CONFIG_ANDROID = {
backgroundColor: '#0c7cff',
image: './assets/splash.png',
resizeMode: 'cover',
}
const DARK_SPLASH_CONFIG_ANDROID = {
backgroundColor: '#0f141b',
image: './assets/splash-dark.png',
resizeMode: 'cover',
}
module.exports = function (config) { module.exports = function (config) {
/** /**
* App version number. Should be incremented as part of a release cycle. * App version number. Should be incremented as part of a release cycle.
@ -70,8 +81,8 @@ module.exports = function (config) {
}, },
}, },
androidStatusBar: { androidStatusBar: {
barStyle: 'dark-content', barStyle: 'light-content',
backgroundColor: '#ffffff', backgroundColor: '#00000000',
}, },
android: { android: {
icon: './assets/icon.png', icon: './assets/icon.png',
@ -101,8 +112,8 @@ module.exports = function (config) {
}, },
], ],
splash: { splash: {
...SPLASH_CONFIG, ...SPLASH_CONFIG_ANDROID,
dark: DARK_SPLASH_CONFIG, dark: DARK_SPLASH_CONFIG_ANDROID,
}, },
}, },
web: { web: {
@ -146,6 +157,7 @@ module.exports = function (config) {
}, },
], ],
'./plugins/withAndroidManifestPlugin.js', './plugins/withAndroidManifestPlugin.js',
'./plugins/withAndroidStylesWindowBackgroundPlugin.js',
'./plugins/shareExtension/withShareExtensions.js', './plugins/shareExtension/withShareExtensions.js',
].filter(Boolean), ].filter(Boolean),
extra: { extra: {

View File

@ -0,0 +1,20 @@
const {withAndroidStyles, AndroidConfig} = require('@expo/config-plugins')
module.exports = function withAndroidStylesWindowBackgroundPlugin(appConfig) {
return withAndroidStyles(appConfig, function (decoratedAppConfig) {
try {
decoratedAppConfig.modResults = AndroidConfig.Styles.assignStylesValue(
decoratedAppConfig.modResults,
{
add: true,
parent: AndroidConfig.Styles.getAppThemeLightNoActionBarGroup(),
name: 'android:windowBackground',
value: '@drawable/splashscreen',
},
)
} catch (e) {
console.error(`withAndroidStylesWindowBackgroundPlugin failed`, e)
}
return decoratedAppConfig
})
}

View File

@ -46,6 +46,8 @@ import {Provider as PortalProvider} from '#/components/Portal'
import {msg} from '@lingui/macro' import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react' import {useLingui} from '@lingui/react'
import {useIntentHandler} from 'lib/hooks/useIntentHandler' import {useIntentHandler} from 'lib/hooks/useIntentHandler'
import {StatusBar} from 'expo-status-bar'
import {isAndroid} from 'platform/detection'
SplashScreen.preventAutoHideAsync() SplashScreen.preventAutoHideAsync()
@ -69,6 +71,7 @@ function InnerApp() {
return ( return (
<SafeAreaProvider initialMetrics={initialWindowMetrics}> <SafeAreaProvider initialMetrics={initialWindowMetrics}>
{isAndroid && <StatusBar />}
<Alf theme={theme}> <Alf theme={theme}>
<Splash isReady={!isInitialLoad}> <Splash isReady={!isInitialLoad}>
<React.Fragment <React.Fragment