> For the complete documentation index, see [llms.txt](https://help.twinr.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.twinr.dev/screens/add-new-screen.md).

# Add New Screen

Add a screen to your app's tab bar — either a page from your website or one built from native elements.

Screens are the destinations in your app's bottom tab bar. Click **Add New Screen** below the screen list to add one.

<figure><img src="https://3731994945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBy5z08zL1UoCwNqmg%2Fuploads%2Fgit-blob-885a0560eefe719ee500917dc06c55435cafa602%2Fscreens-list.png?alt=media" alt="The Screens editor with the screen list on the left and the Add New Screen button below it"><figcaption></figcaption></figure>

## Choose the screen type

This is the first and most important choice, because it decides what the screen is made of.

<figure><img src="https://3731994945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBy5z08zL1UoCwNqmg%2Fuploads%2Fgit-blob-a1b02c72ad03d768c4c8205340cb4cfc88c3924b%2Fscreens-add-new.png?alt=media" alt="The Add new screen dialog showing the Web screen and Native screen options"><figcaption></figcaption></figure>

<table><thead><tr><th width="170">Type</th><th>What it is</th></tr></thead><tbody><tr><td><strong>Web screen</strong></td><td>Loads a page from your website inside the app. Whatever is on that page is what customers see, and it updates when your site does.</td></tr><tr><td><strong>Native screen</strong></td><td>Built from native elements you arrange yourself — text, images, buttons, lists. Faster than a web page, and it works offline.</td></tr></tbody></table>

**Native screen is a premium feature.** On a free trial or a lower plan, selecting it prompts you to upgrade.

{% hint style="info" %}
**Which should you pick?** Use a web screen when the content already exists on your site and changes often — your shop, your blog, a product listing. Use a native screen when you want something that loads instantly and does not depend on your site, such as a home screen, an onboarding page, or an offers screen.
{% endhint %}

## Fill in the details

<table><thead><tr><th width="190">Field</th><th>What it does</th></tr></thead><tbody><tr><td><strong>Screen name</strong></td><td>Shown under the icon in the tab bar, and in the navigation bar. Up to 30 characters, and no two screens can share a name.</td></tr><tr><td><strong>Screen URL</strong></td><td>The page this screen opens. Must start with <code>https://</code>. Web screens only.</td></tr><tr><td><strong>Tab icon</strong></td><td>The icon in the tab bar. PNG, JPG or JPEG.</td></tr><tr><td><strong>Selected tab icon</strong></td><td>An optional second icon, shown while the customer is on that screen. Leave it empty to use the same icon throughout.</td></tr></tbody></table>

{% hint style="info" %}
**Keep names short.** The tab bar gives each screen very little width, so a long name is truncated. One word is usually right — Home, Shop, Cart.
{% endhint %}

Click **Add screen**. It appears at the bottom of your screen list and in the tab bar.

## Build a native screen

A native screen starts empty. Open it and use **Add Element** to build it up from titles, paragraphs, images, buttons, lists and more.

{% content-ref url="/pages/gh3V2p1EnbKz9PjLLtSV" %}
[Overview](/native-screen/native-screen.md)
{% endcontent-ref %}

## Common Questions

<details>

<summary>How many screens can I have?</summary>

As many as you need, but only the first few fit in the tab bar comfortably. Four or five is usual — beyond that, consider grouping the rest behind a **More** screen.

</details>

<details>

<summary>Can I change a web screen into a native one later?</summary>

No. The type is set when the screen is created. Add a new screen of the type you want, then delete the old one.

</details>

<details>

<summary>Why does my screen open in a browser instead of the app?</summary>

That is the external URL handling rule for the screen. Check **General Settings → External URL handling**, where each screen is set to open in **Application** or **Mobile Browser**.

</details>

<details>

<summary>Do I have to upload two icons?</summary>

No. **Tab icon** is required; **Selected tab icon** is optional and only changes what customers see while they are on that screen.

</details>