Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 15 additions & 12 deletions learn/react-native/splash-screen.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,14 @@ id: "splash-screen"
sidebar_label: "Splash Screen"
---

A **Splash Screen** is the first screen your users see when they launch your app.
import splashScreenDarkLightConfig from '/learn/assets/react-native/splashScreenDarkLightConfig.mp4';

A Splash Screen is the first screen your users see when they launch your app.
It appears instantly after the app icon is tapped and remains visible until the app is fully loaded.

A well-designed splash screen not only masks loading time but also delivers a smooth, branded experience by displaying your app’s logo, colors, or animations right from the start.

The splash screen includes a **centered icon** with an **optional background color**, and an **optional animation**.

---
The splash screen includes a centered icon with an optional background color, and an optional animation.

## Accessing Splash Screen Settings

Expand All @@ -20,32 +20,35 @@ The splash screen includes a **centered icon** with an **optional background col

![Splash Screen Config](/learn/assets/release-notes/splash-screen-config-11-11-7.png)

---

## How the Splash Screen Works

A splash screen consists of **two parts**:
A splash screen consists of two parts:

### 1. First Part – Background & Icon
- **Background**: Set a background color.
- **Icon**: Displayed in the center, with customizable width.

### 2. Second Part – Lottie Animation *(Optional)*
- Upload a [Lottie JSON animation](https://lottiefiles.com/) to play **after** the first part is displayed.
- Upload a [Lottie JSON animation](https://lottiefiles.com/) to play after the first part is displayed.
- The animation continues until the app finishes loading.
- If no animation is added, the first part stays visible until the app loads.

---

## Dark and Light Mode Support
- All configurations (background, icon, animation) can now be defined separately for when the user's device is in Light or Dark mode.
- If no Dark mode configuration is provided, the Light mode splash screen is shown by default.

---
<video
src={splashScreenDarkLightConfig}
autoPlay
loop
controls
preload="metadata"
style={{ maxWidth: "100%", borderRadius: "12px" }}
/>

## Live Preview

Use the **Preview** feature to see your splash screen instantly:
Use the _preview feature_ to see your splash screen instantly:

- **Background** – Displays the background and icon.
- **Animation** – Plays the Lottie animation alone.
Expand Down
Binary file not shown.