474
Dark Mode Splash Screen
planned
Activity
Newest
Oldest
Adrian Carolli
Any update on this feature request Brent Vatne or Evan Bacon? :)
Brent Vatne
Adrian Carolli: it's technically possible by configuring expo-splash-screen via the plugin (rather than using the
splash
key). we haven't documented this yet because the api may change.https://github.com/expo/expo-cli/blob/76b720688d635e588066e571df15d8f787d9fd87/packages/prebuild-config/src/plugins/unversioned/expo-splash-screen/getIosSplashConfig.ts#L17-L22
https://github.com/expo/expo-cli/blob/76b720688d635e588066e571df15d8f787d9fd87/packages/prebuild-config/src/plugins/unversioned/expo-splash-screen/getAndroidSplashConfig.ts#L50-L71
sita berete
Brent Vatne: Can you give me an example or link to a resource that explain how it can be done using the plugin? I'm new to react native.
Brent Vatne
sita berete: it is intentionally not documented yet because it's not final :) i don't recommend using this if you are new
Slapbox
Brent Vatne: any idea when the API might be nailed down? If it changes, would that be expected in SDK 43, or some ways down the road? Might make sense for us to pull the trigger on this if we won't have to rewrite it as soon as SDK 43 comes out.
Brent Vatne
Slapbox: we are not actively working on this, we just built it out while rewriting splash screen config logic for eas build. unknown when it will change in the future. at worst you'll have to change the config object a bit so it's not a big deal
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
vahdet
Slapbox: Nor 42
Load More
→