274
Dark Mode Splash Screen
planned
Activity
Newest
Oldest
تقنيتي Taknity
amazing
Brent Vatne
planned
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.
Slapbox
@Brent Vatne: I'm sure you get a bunch of these sorts of notifications so I'm sorry to ask, but any updated ETA? Is this expected in SDK 40? Thanks for the great work you and the Expo team do.
Brent Vatne
@Slapbox: we've postponed working on this indefinitely. we may work on it in sdk 41 but no promises. we have other priorities at the moment and if someone absolutely needs this feature they can eject and use it with expo-splash-screen :)
Slapbox
@Brent Vatne: Thanks for your reply! That's a letdown, but I understand.
If this isn't "In Progress" is it possible to remove that tag from this request?
We've got a whole dark mode implemented but the splash screen being mostly white is jarring for users who don't expect that in dark mode.
Ejecting just for the splash screen is too much of a nuclear option for us. Dark mode users tend to be real sticklers for stuff like that so it would be really awesome to see this implemented in SDK 41.
Thanks for all your great work @Brent Vatne!
Brent Vatne
@Slapbox: i'd suggest just using a dark splash screen always, it won't bother light mode users imo
Slapbox
@Brent Vatne: That's a great point! It won't work for our situation for branding reasons, but that's a really great suggestion and I appreciate it.
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