377
Dark Mode Splash Screen
planned
Activity
Newest
Oldest
Joe Knight
Hello, I didn't notice anything in SDK41 CHANGELOG referencing this feature, any chance it's making it in?
Michael Wood
Merged in a post:
Appearance-Specific Config in app.json
Taha Attari
It would be great if app.json had dark/light mode specific configs for stuff like the splash screen and android navigation bar. I understand updating the theme on the fly might be hard for native components but since the app knows the theme when it starts up it should be able to pick appropriate options.
Michael Wood
I think the following is basically the same feature request:
Arnaud Dellinger
Really looking forward to having this. It makes a big difference since major apps are now using it
MomoAmoory
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...
Slapbox
@Rishi Mohan 🐼: Nor 40, nor 41.
Rishi Mohan 🐼
@Slapbox: I've started to learn SwiftUI :D
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.
Load More
→