I am using the code from https://docs.expo.io/versions/latest/sdk/splash-screen/ to test the splash screen. The splash screen is not showing, instead a white page is showing. The full code
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import * as SplashScreen from 'expo-splash-screen';
export default class App extends React.Component {
state = {
appIsReady: false,
};
async componentDidMount() {
// Prevent native splash screen from autohiding
try {
console.log(await SplashScreen.preventAutoHideAsync());
} catch (e) {
console.warn(e);
}
console.log('start waiting');
await Sleep(5000);
console.log('end waiting');
this.setState({ appIsReady: true }, async () => {
await SplashScreen.hideAsync();
});
}
render() {
if (!this.state.appIsReady) {
return null;
}
return (
<View style={styles.container}>
<Text style={styles.text}>SplashScreen Demo! 👋</Text>
</View>
);
}
}
function Sleep(milliseconds) {
return new Promise(resolve => setTimeout(resolve, milliseconds));
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#aabbcc',
},
text: {
color: 'white',
fontWeight: 'bold',
},
});
Project details:
$ expo diagnostics
Expo CLI 3.28.2 environment info:
System:
OS: Linux 5.4 Ubuntu 20.04.1 LTS (Focal Fossa)
Shell: 5.0.17 - /bin/bash
Binaries:
Node: 10.19.0 - /usr/bin/node
npm: 6.14.4 - /usr/bin/npm
npmPackages:
expo: ~39.0.2 => 39.0.3
react: 16.13.1 => 16.13.1
react-dom: 16.13.1 => 16.13.1
react-native: https://github.com/expo/react-native/archive/sdk-39.0.4.tar.gz => 0.63.2
react-native-web: ~0.13.12 => 0.13.18
npmGlobalPackages:
expo-cli: 3.28.2
Expo Workflow: managed
The html created before appIsReady === true:
<html lang="en"><head><style id="react-native-stylesheet"></style>
<meta charset="utf-8">
<meta httpequiv="X-UA-Compatible" content="IE=edge">
<!--
This viewport works for phones with notches.
It's optimized for gestures by disabling global zoom.
-->
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1.00001, viewport-fit=cover">
<title>TestSplashScreen</title>
<style>
/**
* Extend the react-native-web reset:
* https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/StyleSheet/initialRules.js
*/
html,
body,
#root {
width: 100%;
/* To smooth any scrolling behavior */
-webkit-overflow-scrolling: touch;
margin: 0px;
padding: 0px;
/* Allows content to fill the viewport and go beyond the bottom */
min-height: 100%;
}
#root {
flex-shrink: 0;
flex-basis: auto;
flex-grow: 1;
display: flex;
flex: 1;
}
html {
scroll-behavior: smooth;
/* Prevent text size change on orientation change https://gist.github.com/tfausak/2222823#file-ios-8-web-app-html-L138 */
-webkit-text-size-adjust: 100%;
height: 100%;
}
body {
display: flex;
/* Allows you to scroll below the viewport; default value is visible */
overflow-y: auto;
overscroll-behavior-y: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-ms-overflow-style: scrollbar;
}
/* Enable for apps that support dark-theme */
/*@media (prefers-color-scheme: dark) {
body {
background-color: black;
}
}*/
</style>
<link rel="manifest" href="/manifest.json"><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png"><link rel="shortcut icon" href="/favicon.ico"><script>try {
Object.defineProperty(screen, "availTop", { value: 0 });
} catch (e) {}
try {
Object.defineProperty(screen, "availLeft", { value: 0 });
} catch (e) {}
try {
Object.defineProperty(screen, "availWidth", { value: 1280 });
} catch (e) {}
try {
Object.defineProperty(screen, "availHeight", { value: 800 });
} catch (e) {}
try {
Object.defineProperty(screen, "colorDepth", { value: 24 });
} catch (e) {}
try {
Object.defineProperty(screen, "pixelDepth", { value: 24 });
} catch (e) {}
try {
Object.defineProperty(navigator, "hardwareConcurrency", { value: 8 });
} catch (e) {}
try {
Object.defineProperty(navigator, "appVersion", { value: "5.0 (X11)" });
} catch (e) {}
try {
Object.defineProperty(navigator, "doNotTrack", { value: "unspecified" });
} catch (e) {}
try {
window.screenY = 0
} catch (e) { }
try {
window.screenTop = 0
} catch (e) { }
try {
window.top.window.outerHeight = 736
} catch (e) { }
try {
window.screenX = 0
} catch (e) { }
try {
window.screenLeft = 0
} catch (e) { }
try {
window.top.window.outerWidth = window.screen.width
} catch (e) { }
</script></head>
<body>
<!--
A generic no script element with a reload button and a message.
Feel free to customize this however you'd like.
-->
<noscript>
<form
action=""
style="
background-color: #fff;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
"
>
<div
style="
font-size: 18px;
font-family: Helvetica, sans-serif;
line-height: 24px;
margin: 10%;
width: 80%;
"
>
<p>Oh no! It looks like JavaScript is not enabled in your browser.</p>
<p style="margin: 20px 0;">
<button
type="submit"
style="
background-color: #4630eb;
border-radius: 100px;
border: none;
box-shadow: none;
color: #fff;
cursor: pointer;
font-weight: bold;
line-height: 20px;
padding: 6px 16px;
"
>
Reload
</button>
</p>
</div>
</form>
</noscript>
<!-- The root element for your Expo app. -->
<div id="root">
<div class="css-view-1dbjc4n r-flex-13awgt0 r-pointerEvents-12vffkv">
<div class="css-view-1dbjc4n r-flex-13awgt0 r-pointerEvents-12vffkv">
</div>
</div>
</div>
<script src="/static/js/bundle.js"></script>
</body></html>
Here you can see that no image is being displayed in the body.