Lines Matching refs:splash
3 description: Learn how to create a splash screen for your Expo project and other best practices.
13 …splash screen, also known as a launch screen, is the first screen a user sees when they open your …
15 ## Configure the splash screen for your app
17 The default splash screen is a blank white screen. It can be customized using the `splash` key in t…
19 ## Make a splash image
21 …splash image, you can use this [Figma template](https://www.figma.com/community/file/1155362909441…
29 …splash image automatically, you can stick with our dimensions as long as you don't depend on the s…
33 …s size, and you can specify the strategy used to resize the image with [`splash.resizeMode`](/vers…
35 ## Export the splash image as a .png
37 After creating your splash screen, export it as a **.png** and save it in the **assets** directory.…
39 ### Using `splash.image`
41 …the value of `splash.image` to point to your new splash image. If you haven't renamed the default …
46 "splash": {
47 "image": "./assets/splash.png"
53 Reopen the Expo Go and launch your project. You should see your new splash screen. However, there m…
55 …OS, it's required to close and re-open the Expo Go to see changes to the splash screen from the **…
57 ### `splash.backgroundColor`
59 …ound color other than white for your splash image, you may see a white border around it. This is d…
61 To resolve it, set the `splash.backgroundColor` to be the same as our splash image background color…
66 "splash": {
67 "image": "./assets/splash.png",
76 src="/static/images/splash-screen/backgroundColor-noodles.png"
79 ### `splash.resizeMode`
81 Any splash image you provide gets resized to maintain its aspect ratio and fit the resolution of th…
83 …sizing: `contain` (default) and `cover`. In both cases, the splash image is within the splash scre…
85 <ImageSpotlight alt="Splash screen resize mode" src="/static/images/splash-screen/resizeMode.png" />
92 "splash": {
93 "image": "./assets/splash.png",
104 src="/static/images/splash-screen/resizeMode-noodles.png"
107 …re width while maintaining the aspect ratio. This is why the logo on the splash image ends up bein…
113 Any of the splash options can be configured on a platform basis by nesting the configuration under …
115 - On Android, you can set splash images for [different device DPIs](/versions/latest/config/app/#md…
117 - On iOS, you can set [`ios.splash.tabletImage`](/versions/latest/config/app/#tabletimage) to have …
121 …iguration manually](https://github.com/expo/expo/tree/main/packages/expo-splash-screen#-installati…
127 On Android, the splash screen behaves in most cases the same as on the iOS. There is a slight diffe…
128 …scenario, extra attention should be paid to [`android.splash`](/versions/latest/config/app/#splash…
132 …splash screen API is unable to stretch or scale the splash image. As a result, the `contain` mode …
134 …ication will present the given image centered on the screen. By default `splash.image` would be us…
138 … either published or in development. There are slight differences in the splash screen behavior be…
141 alt="iOS splash screen behavior"
147 …splash screen, you see an information bar that shows information relevant to preparing the JavaScr…
148 - **In the middle**, Expo Go loads a published app. Notice that again the splash image does not app…
149 - **On the right** is a standalone app. Notice that the splash image appears immediately.