246
Dark Mode Splash Screen
in progress
Activity
Newest
Oldest
costachescucristinel
I have an even better solution, for those willing to master it
import { AppLoading } from "expo";
import * as Font from "expo-font";
// This component just renders react components
// Nothing fancy about it, except, you can use any React Native components
// that you want! Make your splash screen animated too with the Animated module
// add some visual effects, put this screen in React Navigation and use that
// to transition to your main application... your choice of how you want to handle it
function MyCustomSplashScreen(props) {
if (this.props.theme === "dark"){
return <View style={{ flex: 1, backgroundColor: "#333" }} />;
}
return <View style={{ flex: 1, backgroundColor: "#EEE" }} />
}
class MyApp extends React.Component{
state = { initializing: true, loading: true, theme: "light" };
onStartAsync = async () => {
// Limit this function's run time to as critically minimal as possible
// AppLoading will keep your asset SplashScreen visible while this runs
// Use it to load fonts, and at most a few images from the network
// Any longer async tasks will be handled later
await Font.loadAsync( ... );
}
onFinish = () => {
// initialization finished, this will trigger the rendering of your
// custom MyCustomSplashScreen component
// the setState callback will trigger a function that you can use
// to load heavy assets, or to do async tasks that may take a long time
this.setState({ initializing: false }, this.loadHeavyAssets);
}
onError = (error) => { console.error(error); }
loadHeavyAssets = async () => {
const asset1 = await fetch(".../some/heavy/asset/zipfile");
// ...
// You can also make mid-load state updates
await (new Promise((resolve, reject) => {
this.setState({ theme: "dark" }, resolve);
}));
// When you are done, stop showing your custom splash screen
// This will allow the rest of your app to render
this.setState({ loading: false });
}
render = () => {
if (this.state.initializing === true) {
return <AppLoading
startAsync={this.onStartAsync}
onFinish={this.onFinish}
onError={this.onError}
/>;
}
if (this.state.loading === true) {
return <MyCustomSplashScreen theme={this.state.theme} />;
}
return <View style={{ flex: 1 }}>
<Text>Hello, after custom splash screen :)</Text>
</View>
}
}
have fun :)
Eduard Duluman
Any updates on how can this be used for the managed workflow?
costachescucristinel
Any status updates? This didn't make it for SDK36, nor 37, nor 38... will SDK 39 be the one?
Rishi Mohan 🐼
@costachescucristinel: Not there in SDK 39 as well
costachescucristinel
@Rishi Mohan 🐼: Yup, noticed this.... bummer...
Brent Vatne
in progress
this won't make it for sdk37 but should likely be ready for sdk38. it has been built into expo-splash-screen, so you can use it in the bare workflow, but we still need to integrate the native code from expo-splash-screen into the managed workflow.
Andor Davoti
any news on this? doen't look like it was included in sdk37
Brent Vatne
@Andor Davoti: sadly it didn't make it for sdk37. we built it into expo-splash-screen but we didn't have time to integrate expo-splash-screen into the managed workflow. if you eject you can use it, see related pr: https://github.com/expo/expo-cli/pull/2106
Brent Vatne
we didn't get around to this for sdk36 but it's planned for sdk37
Bill Pairaktaridis
@Brent Vatne: I guess it's going to SDK 38?
Brent Vatne
planned