diff --git a/learn/react-native/splash-screen.md b/learn/react-native/splash-screen.md index 4b9a0e14e..fb1544fcf 100644 --- a/learn/react-native/splash-screen.md +++ b/learn/react-native/splash-screen.md @@ -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 @@ -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. ---- +