Appnatively
Appnatively
Knowledge Base
Go to Studio
Knowledge Base
Go to Studio
Getting Started
Welcome to AppNativelyCreate your first appFinding your way around the Studio dashboard
Website Connection
Connect your website to AppNativelyInstall and update the required pluginChoose which plugins power your app“Website Not Connected” – what it means and how to clear itFix a failing or dropped connection
App Editor
Build your app with AI chatWrite prompts that get the screen you wantUndo an AI change you don’t wantEdit screens and components by handManage your app’s pagesDesign your headerDesign your bottom navigationAdd and edit drawersManage your themeHow your changes reach your usersSave vs. Publish – what each one doesWhen a new release is requiredWhen AI gets it wrong
Splash & App Icon
Set your app iconAdd Android Adaptive Icon layersDesign your splash screenRecommended image sizes
Publishing Setup
What you need before your first buildSet your app’s name, slug, and package IDAdd Android credentials and your keystoreAdd iOS certificates and provisioningConnect Google PlayConnect the App StoreSet up Firebase Configuration
Build & Deploy
Connect GitHub before you buildBuild your app – and submit it to the storeFix a failed build
Push Notifications
Create and send a push campaignTrack campaign performanceNotifications aren’t arriving
Integrations
Connect a third-party service

Design your header

The header sits at the top of your app’s screens – logo, title, and any actions people need close at hand. You can build several and assign each to different pages, or use one header everywhere.

Steps

1. Open the Headers tab

In the left sidebar, switch to the Headers tab, or select an existing header directly on the canvas.

2. Set its layout

Under Layout Settings, choose which pages use this header, decide whether it should be translucent (“glass,” letting content show through slightly as it scrolls), and set the scroll distance at which it changes appearance.

3. Target specific elements

Under Element Settings, decide whether a change applies to the whole header or to one specific row within it, if your header has more than one.

4. Arrange your elements

Use the header’s layout organizer to position the logo, title, and action items relative to each other.

5. Add action items

Add buttons or dropdown menus to the header. A menu can hold its own list of links underneath it – useful for grouping several destinations behind one icon.

6. Reuse across pages

A single header can be assigned to as many pages as you like. Edit it once, and every page using it updates together – you don’t need to rebuild it per page.

FAQ

Manage your app’s pages
Design your bottom navigation
Was this page helpful?
On this page
Steps1. Open the Headers tab2. Set its layout3. Target specific elements4. Arrange your elements5. Add action items6. Reuse across pagesFAQDo I need a different header for every page?+What’s the difference between “the whole header” and “a specific row” in Element Settings?+