Expo Docs MCP Server

--- title: SplashScreen description: A library that provides access to controlling the visibility behavior of native splash screen. sourceCodeUrl: https://github.com/expo/expo/tree/sdk-52/packages/expo-splash-screen packageName: expo-splash-screen iconUrl: /static/images/packages/expo-splash-screen.png platforms: ["android", "ios", "tvos"] --- import { ConfigReactNative, ConfigPluginExample, ConfigPluginProperties, } from '~/ui/components/ConfigSection'; The `SplashScreen` module from the `expo-splash-screen` library is used to tell the splash screen to remain visible until it has been explicitly told to hide. This is useful to do tasks that will happen behind the scenes such as making API calls, pre-loading fonts, animating the splash screen and so on. Also, see the guide on [creating a splash screen image](/develop/user-interface/splash-screen-and-app-icon/#splash-screen), or [quickly generate an icon and splash screen using your browser](https://buildicon.netlify.app/). ## Installation ## Usage This example shows how to keep the splash screen visible while loading app resources and then hide the splash screen when the app has rendered some initial content. ```jsx App.js // Keep the splash screen visible while we fetch resources SplashScreen.preventAutoHideAsync(); // Set the animation options. This is optional. SplashScreen.setOptions({ duration: 1000, fade: true, }); const [appIsReady, setAppIsReady] = useState(false); useEffect(() => { async function prepare() { try { // Pre-load fonts, make any API calls you need to do here await Font.loadAsync(Entypo.font); // Artificially delay for two seconds to simulate a slow loading // experience. Remove this if you copy and paste the code! await new Promise(resolve => setTimeout(resolve, 2000)); } catch (e) { console.warn(e); } finally { // Tell the application to render setAppIsReady(true); } } prepare(); }, []); const onLayoutRootView = useCallback(() => { if (appIsReady) { // This tells the splash screen to hide immediately! If we call this after // `setAppIsReady`, then we may see a blank screen while the app is // loading its initial state and rendering its first pixels. So instead, // we hide the splash screen once we know the root view has already // performed layout. SplashScreen.hide(); } }, [appIsReady]); if (!appIsReady) { return null; } return ( <Text>SplashScreen Demo! 👋</Text> ); } ``` ## Configuration You can configure `expo-splash-screen` using its built-in [config plugin](/config-plugins/introduction/) if you use config plugins in your project ([EAS Build](/build/introduction) or `npx expo run:[android|ios]`). The plugin allows you to configure various properties that cannot be set at runtime and require building a new app binary to take effect. If your app does **not** use EAS Build, then you'll need to manually configure the package. **Using the config plugin, as shown below, is the recommended method for configuring the splash screen.** The other methods are now considered legacy and will be removed in the future. ```json app.json { "expo": { "plugins": [ [ "expo-splash-screen", { "backgroundColor": "#232323", "image": "./assets/splash-icon.png", "dark": { "image": "./assets/splash-icon-dark.png", "backgroundColor": "#000000" }, "imageWidth": 200 } ] ], } } ``` You can also configure `expo-splash-screen`, using the following [app config](/workflow/configuration/) properties but the config plugin should be preferred. - [`splash`](../config/app/#splash) - [`android.splash`](../config/app/#splash-2) - [`ios.splash`](../config/app/#splash-1) See how to configure the native projects in the [installation instructions in the `expo-splash-screen` repository](https://github.com/expo/expo/tree/sdk-52/packages/expo-splash-screen#-installation-in-bare-react-native-projects). ### Animating the splash screen `SplashScreen` provides an out-of-the-box fade animation. It can be configured using the `setOptions` method. ```js SplashScreen.setOptions({ duration: 1000, fade: true, }); ``` If you prefer to use custom animation, see the [`with-splash-screen`](https://github.com/expo/examples/tree/master/with-splash-screen) example on how to apply any arbitrary animations to your splash screen. You can initialize a new project from this example by running `npx create-expo-app --example with-splash-screen`. ## API ```js ```