> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getnativeflow.com/llms.txt
> Use this file to discover all available pages before exploring further.
# App Settings
> Your app's identity and packaging: names, entry page, icons, deep links and languages.
## Overview
**App Config is not App Settings.** These are two different panes, one icon apart in the sidebar's CONFIG group, and confusing them is the single easiest mistake to make in this area.
* **App Settings** is the gear icon. It holds the app's *identity and packaging*: project and package names, the entry page, the icon and splash, the deep link scheme, and the languages the app ships with. That is this page.
* **App Config** is the palette icon, inside Theme Settings. It holds the app *shell*: navigation type, tab bar, header, breakpoints and scale.
If you are looking for navigation type or breakpoints, you want App Config.
Everything else in Studio edits a screen, a component or a token. App Settings edits the app. None of it changes how a page looks on the canvas. All of it changes what the exported app is.
Colour tokens, the typography scale, and App Config, which is the pane this one is confused with.
The recording above is a real, unscripted session — it runs at automation speed with no narration. The Deep Linking scheme typed on camera is cleared again before the session ends, and confirmed empty on a fresh reload afterward — no locale is added, matching how this pane was verified.
## Open it and read what is in it
In the left sidebar, expand **CONFIG** and click the **gear** icon. The group starts collapsed, and its buttons are not rendered at all until you expand it, so an apparently missing gear icon usually means a collapsed group.
The pane opens on **App Details** and has its own navigation column with a search box.
Four panes are available, in two groups:
| Group | Entries |
| - | - |
| **GENERAL** | App Details, App Assets, Deep Linking |
| **PROJECT SETUP** | Languages |
Each has its own section below.
The search box filters the navigation column, groups included. Typing `lang` narrows it to the entry that matches.
**There is no Save button in this pane, and no saving indicator either.**
Verified at the network level: editing **Project Description** and clicking away fired no save request of any kind, and the value was gone after a reload. The same edit did persist once a change was made in a *different* App Settings pane, which triggered a whole project save that swept it up.
Do not trust an App Details edit on its own. Reload the project and check the field actually kept your value.
## App Details
Names, the entry point, and one URL that reaches outside the project.
The recording above is a real, unscripted session — it runs at automation speed with no narration, and it live-reproduces the bug in the Note above rather than just describing it. **Display Name** and **Theme API URL** are typed, cleared, and blurred exactly like any other field edit — and the first take of this recording, doing only that, left both fields reading the *typed* value on a fresh reload, not the cleared one. The published recording's closing step — typing and clearing a scheme in **Deep Linking** — is what actually commits the reverts; without it, an App Details-only edit isn't reliably saved at all.
| Section | Field | What it is for |
| - | - | - |
| | **Project Name** (required) | The name of the project in Studio |
| | **Project Description** | Free text, optional |
| **APP NAMES** | **Package Name** (required) | Reverse domain format, for example `com.company.app` |
| | **Display Name** | The name shown on the device home screen |
| **STUDIO VERSION** | A version badge | Read only |
| **INITIAL PAGE** | **Entry Page** | The first screen shown on app launch |
| | **Logged In Page** | The screen shown after user login |
| **RUNTIME THEMING** | **Theme API URL** | Optional. When set, the exported app fetches its theme from this URL on launch and caches it locally. Leave it empty to ship with the bundled theme snapshot. |
**Display Name falls back to Project Name.** Its placeholder is literally the project name, so leaving it empty means the home screen name is whatever the project is called in Studio. If the app's home screen name is wrong, set Display Name explicitly.
Entry Page and Logged In Page list the project's real pages by their Studio names. Logged In Page additionally offers `None`, which is the honest state for a project with no authentication configured.
## App Assets
Splash screen, icons and the error image.
The recording above is a real, unscripted session — it runs at automation speed with no narration. **Background Color** is taken from `Unset` to `Primary` and back, and the **Image Width** unit toggle from `PX` to `%` and back — both confirmed reverted, the color on a fresh reload afterward. Nothing is uploaded to any of the three image targets, which stay `Unset` throughout.
**SPLASH SCREEN** takes one **Splash Image**, with a recommended size of 1242 x 2688px, and shows live **Phone** and **Tablet** previews beside it.
**SPLASH IMAGE SETTINGS** below it holds:
* **Image Fit**, seven icon only buttons with no visible labels. Their tooltips, in order: scale to fit within bounds preserving aspect ratio; scale to fill bounds cropping if needed; display at original size centred; stretch to fill exact dimensions; tile to fill the space; no resizing applied; position at the bottom contained within width.
* **Image Width** and **Image Height**, each with a px and percent unit toggle.
* **Min Duration (ms)**, the minimum time the splash is held.
* **Background Color** and **Pre-loading Color**, both dropdowns of the project's own theme colour tokens rather than free form colours. Their options are `Unset`, the sixteen tokens, then `Custom...`. Change a token in Theme Settings and the splash follows.
**ICONS & ERROR IMAGE** holds three upload targets: **Launcher Icon** (app icon), **Android Adaptive Icon** (foreground layer) and **Error Image** (fallback image). Underneath sit three read only aids: a home screen preview with iOS and Android variants, an auto generated sizes row showing that you upload one image and Studio derives the rest, and Studio's own icon tips:
> Upload a square PNG, at least 1024x1024 px. Keep the design simple and avoid small text. Leave about 15% safe zone from the edges for Android adaptive masking. Use a solid or gradient background for best visibility.
## Deep Linking
One field, and it does more than it looks like it does.
The recording above is a real, unscripted session — it runs at automation speed with no narration. The scheme is typed, held for a moment, then cleared and blurred with Tab — confirmed empty again on a fresh reload afterward.
Under **CUSTOM URL SCHEME** there is a text box, placeholdered `app`, followed by a literal `://`. What you type is the scheme part of `yourscheme://...`. With the field empty, a banner tells you to enter a scheme to enable deep linking.
Studio's own three bullet explanation sits below it:
> Each screen automatically gets a deep link based on its name and route parameters. Use deep links in push notifications, emails, or share them with users. Route parameters are automatically passed to the target screen.
**Per screen deep links are automatic.** You do not register them one by one. Setting the scheme is the whole setup, and the route and parameters each screen exposes come from its own page config.
## Languages
The navigation entry is **Languages**, but the pane's own heading is **Localization**. It is not a thin feature. It has three tabs and covers locale selection, a translation catalog with review states, runtime switching and an RTL linter.
The recording above is a real, unscripted session — it runs at automation speed with no narration. Only the **Require approval before export** toggle is actually changed, `off → on → off`, confirmed reverted on a fresh reload afterward. **No locale is added** — the Add locale list is opened to show its options and dismissed without picking one, and neither Translations nor RTL & Layout is touched.
A notice at the top answers the runtime question directly: users can switch language inside the app at any time, and switching between left to right and right to left requires a one time reload, which is a React Native constraint.
| Control | What it does |
| - | - |
| **Default locale** | The locale the app starts in |
| **Supported locales** | The set the app ships with, as chips, plus **+ Add locale** |
| **Fallback locale** | Used when a translation is missing in the active locale |
| **RTL locales** | One toggle chip per supported locale. Switch on the right to left ones |
| **Auto-detect device locale** | Pick a supported locale from the user's device on first launch |
| **Persist user choice** | Remember the locale the user selects across launches |
| **Require approval before export** | Block export when any string is still draft |
| **Number format locale** | Follow app locale, or follow device locale |
**Default locale and Fallback locale only offer locales you have already added.** Add the locale under Supported locales first, then pick it as default or fallback.
**+ Add locale** opens a searchable list of 62 locales, each with a flag, its endonym, its English name and its code, including the four right to left ones: Arabic, Hebrew, Persian and Urdu.
**Remote translation catalog**, at the bottom, is the localization counterpart of App Details' Theme API URL. The exported app fetches per locale JSON from a **Catalog URL** at runtime and overlays it on the bundled catalog, using `{locale}` as a placeholder. You also set **When to fetch** (on app launch, on locale change, or both) and **Cache for (minutes)**. So translations can ship bundled and be patched remotely without a rebuild.
| Control | What it is |
| - | - |
| **Search keys** | Filters the key table |
| **All statuses** | A filter with four states: Draft, Reviewed, Approved, Missing |
| **+ Add key** | Creates a translation key by hand |
| **Extract from canvas** | Pulls strings out of the screens you have already built |
| **Auto-translate** | Machine translates the catalog |
| **COVERAGE** | A per locale progress card, with the caveat that built-in plugin strings are not included in v1 |
| Key table | One Key column plus one column per supported locale |
Those four statuses are the same vocabulary the Settings tab's "block export when any string is still draft" toggle refers to, so the review workflow can gate an export.
With no RTL locale switched on in the Settings tab, the tab shows a notice saying so and pointing you back there.
Below it sits the **Logical-edge linter** with a **Scan pages** button. It detects use of properties such as `marginLeft` and `right` and suggests logical replacements such as `marginStart` and `end`. That is the practical half of RTL support: a left anchored margin stays on the left when the app flips, and this finds those.
## Where backend linking lives
Connecting Supabase is not part of App Settings. It lives in the sidebar's own **CONNECT** group, under **Database**, and it is a credential free authorization handoff rather than a form. You click one button, authorize NativeFlow on Supabase's own site, and then pick or create a project.
Until a project has been through that handoff, the AI Assistant panel shows an orange banner saying no backend is linked. Treat the banner as a status indicator and open **CONNECT → Database** yourself.
What Studio can connect to, and what each connection form asks of you.
## Summary
App Settings is the app's identity and packaging, not its shell. It holds four panes: App Details, App Assets, Deep Linking and Languages. There is no Save button and no saving indicator here, so reload and check any App Details edit you care about.