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 bottom navigation

The bottom navigation is the tab bar most people use to move around your app – Home, Search, Cart, and whatever else belongs there. It’s set up in two parts: what each item does, and how the whole bar looks.

Steps

1. Open the Navigations tab

In the left sidebar, switch to the Navigations tab, or select the tab bar directly on the canvas.

2. Add navigation items

On the General tab, add each item with a label and icon. Optionally mark one as a Raised Action Button – a visually emphasized center button, common for something like “Add” or “Scan.”

3. Set what each item does

For each item, choose its action: Navigate to Page (jumps to a screen) or Open Drawer (slides out a panel – see Add and edit drawers). Then pick the specific page or drawer it points to.

4. Choose a visual style

On the Style tab, pick how the whole bar looks: Standard (Fixed), Floating, Icon Only, Indicator Line, Active Pill, Center FAB, or Bubble.

5. Set your colors

Set the bar’s background color and the color used to highlight whichever item is currently active.

FAQ

Design your header
Add and edit drawers
Was this page helpful?
On this page
Steps1. Open the Navigations tab2. Add navigation items3. Set what each item does4. Choose a visual style5. Set your colorsFAQWhat’s the difference between “Navigate to Page” and “Open Drawer”?+Can I use more than one Raised Action Button?+