📱Loading Screen

The Loading Screen is a temporary transition view displayed to users while your App URL is loading in the background.

OS Sequence Behavior

• Android: When the app is launched, users will see the App Icon first, followed immediately by the Loading Screen.

• iOS: When the app is launched, users will see the Launch Screen first, followed by the Loading Screen.

Loading Screen Elements

Your loading screen is completely modular and can be built using any combination of the following 4 key elements:

1. Background Color: Sets the base color fill for the entire screen.

2. Text Field: Displays custom text on top of the background. You can fully customize the string, font type, color, size, and vertical/horizontal alignment coordinates.

3. Background Image: Applies an image behind your text and foreground assets.

4. Image (Foreground): Places a foreground graphic or loader animation on top of your background.

Popular Combinations

Because these options use simple toggle switches, you can combine them however you like:

• Background Color only (Minimalist approach).

• Background Color + Text Field (Simple branding).

• Background Image only (Full-screen illustration).

Natively Preview App Style: For a dynamic experience, combine a Background Color, a Background Image, and a Foreground Image.

The Foreground Image tool supports .gif files, allowing you to use a custom animated spinning loader!

Configuring the Background Image with AI

When you turn on the Background image toggle, you can leverage Natively's automated asset tools instead of manually resizing templates.

Method A: Describe with AI

As shown in the screenshot, you can dictate exactly what your background should look like:

1. Select the Describe with AI tab.

2. Enter your creative description (e.g., "A fantasy elven warrior").

3. Click Generate background.

Method B: Custom Image Upload

If you already have a design asset you want to use:

1. Select the Upload image tab.

2. Drag and drop your image file or click to browse. File Format Requirement: Your uploaded reference file must be in PNG or JPG format.

3. Natively will automatically process your asset into a standardized mobile background layout.

Previewing and Managing Assets

Once an image is generated or uploaded, the layout syncs up with the interactive live preview on the right side of your dashboard screen.

• Reviewing your design: Check the mock device frame to verify that your layout components do not clash and that text elements remain readable.

• Regenerating: If a generated background or uploaded graphic is not sitting right in the phone frame, simply click the red Trash Can icon. This removes the asset, allowing you to test a new prompt or upload an adjusted file.

• Saving: When everything looks perfect, click Next/Save to lock in your settings.