React Navigation

From the author

Provides React Navigation UI patterns for stacks, tabs, drawers etc. Use when building navigation UIs with React Navigation, configuring headers, bottom sheets or handling safe areas and insets.

— the description by Callstack

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides a structured reference for building navigation interfaces in React applications using React Navigation 7. It covers both the modern Static API and the traditional Dynamic API, offering guidance on implementing stacks, tabs, drawers, and sheets. The documentation includes best practices for configuring headers, handling safe areas, and managing navigation state across different platforms.

What it does

Provides patterns for implementing stack, tab, and drawer navigation.
Explains how to configure headers and navigation UI elements.
Offers guidance on handling safe areas and screen insets.
Demonstrates how to integrate icons and custom backgrounds into navigation components.
Supports both Static and Dynamic API styles for navigation configuration.
Includes techniques for programmatic navigation control and scroll-to-top functionality.

When to use it

When building navigation structures for React-based mobile or web applications.
When you need to implement consistent UI patterns like sidebars, bottom tabs, or modals.
When configuring platform-specific navigation behaviors or safe-area insets.
When migrating or setting up navigation in a React Navigation 7 environment.

Advantages

Provides clear API selection guidance for new and existing projects.
Offers standardized patterns for common navigation UI components.
Includes practical code examples for both Static and Dynamic APIs.
Addresses cross-platform layout requirements for web and mobile.

Usage examples

“How do I create a bottom tab navigator in React Navigation 7?”: The skill provides code snippets for both Static and Dynamic APIs, showing how to use createBottomTabNavigator and configure tab icons.
“How can I handle safe areas in my navigation header?”: The skill directs you to the safe-areas reference, explaining how to manage status bar and header insets for a consistent UI.

Install

Download the skill as a ZIP:
https://autogineer.com/agent-skills/callstackincubator/react-navigation/download

Unzip it into the cross-client skills folder of your project:

mkdir -p .agents/skills && unzip react-navigation.zip -d .agents/skills

Documentation by Callstack

Overview

Guide for building navigation UIs with React Navigation.

This skill only applies to React Navigation 7. The API and patterns may not work with different versions.

API Selection

React Navigation offers two API - object-based Static API and component-based Dynamic API.

Existing Apps: Check the current navigation setup and follow the same API style when using the references
New Apps: If the app does not have an existing navigation setup yet, prefer Static API

When to Apply

Reference this skill when:

Building navigation UI patterns such as stacks, tabs, drawers, sheets etc.
Configuring headers and other built-in navigator UI
Handling safe areas and insets in navigation UI

References

File	Description
stacks.md	Stack based navigation
form-sheet.md	Bottom sheet and form sheets
bottom-tabs.md	Cross-platform bottom tabs
native-bottom-tabs.md	Native bottom tabs
material-top-tabs.md	Swipeable Top tabs
drawers.md	Drawer navigation and sidebars
header.md	Configuring headers
safe-areas.md	Safe-area handling

Problem -> Skill Mapping

Problem	Start With
Showing screens and modals in a stack	stacks.md
Showing bottom sheets or form sheets	form-sheet.md
Showing screens in bottom tabs or responsive sidebars with web support	bottom-tabs.md
Showing screens in native tabs on iOS & Android	native-bottom-tabs.md
Showing content in swipeable top tabs	material-top-tabs.md
Using a drawer or sidebar	drawers.md
Configuring the header in bottom tab or drawer navigator	header.md
Handling safe-area such as status bar, header insets, tab bar insets etc.	safe-areas.md

Files

ATTRIBUTION.mdAdded by AutoGineer851 B
LICENSELicence file added by AutoGineer1.1 KiB
SKILL.md3.3 KiB
agents/openai.yaml268 B
references/bottom-tabs.md12.7 KiB
references/drawers.md12.0 KiB
references/form-sheet.md8.0 KiB
references/header.md6.8 KiB
references/material-top-tabs.md11.5 KiB
references/native-bottom-tabs.md8.7 KiB
references/safe-areas.md3.8 KiB
references/stacks.md11.7 KiB

references/native-bottom-tabs.md

Skill: Native Bottom Tabs

Description

Use createNativeBottomTabNavigator for a native tab bar on iOS and Android.

Conditionally use bottom-tabs.md if web support is needed.

When to Use

Building primary app destinations behind a tab bar
The app runs on iOS or Android

Basic Example

Static API

import { createNativeBottomTabNavigator } from '@react-navigation/bottom-tabs/unstable';

const AppTabs = createNativeBottomTabNavigator({
  screens: {
    Home: HomeScreen,
    Profile: ProfileScreen,
  },
});

Dynamic API

import { createNativeBottomTabNavigator } from '@react-navigation/bottom-tabs/unstable';

const Tab = createNativeBottomTabNavigator();

function AppTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
    </Tab.Navigator>
  );
}

Avoiding Overlap with the Tab Bar

On iOS, content inset is automatically adjusted for scrollable views to avoid overlap with the tab bar.

For non-scrollable content, or on Android, use the experimental SafeAreaView from react-native-screens/experimental to apply padding for the tab bar.

import { SafeAreaView } from 'react-native-screens/experimental';

function ProfileScreen() {
  return <SafeAreaView edges={{ bottom: true }}>{/* content */}</SafeAreaView>;
}

Common Features

Displaying Icons

Use tabBarIcon in screenOptions or per-screen options. Optionally use tabBarActiveTintColor and tabBarInactiveTintColor to change the color of the icon (support varies based on platform).

Static API

const AppTabs = createNativeBottomTabNavigator({
  screens: {
    Feed: {
      screen: FeedScreen,
      options: {
        tabBarIcon: Platform.select({
          ios: {
            type: 'sfSymbol',
            name: 'favorites',
          },
          default: {
            type: 'image',
            source: require('./assets/feed.png'),
          },
        }),
      },
    },
  },
});

Dynamic API

const Tab = createNativeBottomTabNavigator();

function AppTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen
        name="Feed"
        component={FeedScreen}
        options={{
          tabBarIcon: Platform.select({
            ios: {
              type: 'sfSymbol',
              name: 'favorites',
            },
            default: {
              type: 'image',
              source: require('./assets/feed.png'),
            },
          }),
        }}
      />
    </Tab.Navigator>
  );
}

The tabBarIcon option supports multiple types of icons:

SF Symbols on iOS with type: 'sfSymbol' and name.
Local images with type: 'image' and source.

Prefer SF Symbols on iOS, and image icons for other platforms. Use Platform.select to specify different icons per platform if needed.

When using image icons:

Provide 1x, 2x, and 3x image assets (image.png, [email protected], [email protected]) because iOS does not scale tab icons automatically.
Set tinted: false on iOS ({ type: 'image', tinted: false, source: require('./assets/feed.png') }) if the image should keep its original colors. Android always tints image icons.

Search Tab on iOS 26+

Use the built-in search system item together with a nested native stack navigator whose focused screen defines headerSearchBarOptions.

Static API

import { createNativeStackNavigator } from '@react-navigation/native-stack';

const SearchStack = createNativeStackNavigator({
  screens: {
    FruitsList: {
      screen: FruitsListScreen,
      options: {
        title: 'Search',
        headerSearchBarOptions: {
          placeholder: 'Search fruits',
        },
      },
    },
  },
});

const AppTabs = createNativeBottomTabNavigator({
  screens: {
    Search: {
      screen: SearchStack,
      options: {
        tabBarSystemItem: 'search',
      },
    },
  },
});

Dynamic API

import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();
const Tab = createNativeBottomTabNavigator();

function SearchStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="FruitsList"
        component={FruitsListScreen}
        options={{
          title: 'Search',
          headerSearchBarOptions: {
            placeholder: 'Search fruits',
          },
        }}
      />
    </Stack.Navigator>
  );
}

function AppTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen
        name="Search"
        component={SearchStack}
        options={{
          tabBarSystemItem: 'search',
        }}
      />
    </Tab.Navigator>
  );
}

This behavior is available on iOS 26 and above.
The tab bar transforms into a search field only when the selected tab renders a nested native stack navigator.
The focused screen in that nested native stack must define headerSearchBarOptions.

Bottom Accessory

Use bottomAccessory to render content above the tab bar or inline with the collapsed bar.

Static API

const AppTabs = createNativeBottomTabNavigator({
  screenOptions: {
    bottomAccessory: ({ placement }) => {
      return (
        <View style={{ padding: 16 }}>
          <Text>Placement: {placement}</Text>
        </View>
      );
    },
  },
  screens: {
    Home: HomeScreen,
  },
});

Dynamic API

const Tab = createNativeBottomTabNavigator();

function AppTabs() {
  return (
    <Tab.Navigator
      screenOptions={{
        bottomAccessory: ({ placement }) => {
          return (
            <View style={{ padding: 16 }}>
              <Text>Placement: {placement}</Text>
            </View>
          );
        },
      }}
    >
      <Tab.Screen name="Home" component={HomeScreen} />
    </Tab.Navigator>
  );
}

placement is regular above the bar or inline when the bar is collapsed.
This is supported on iOS 26 and above.
The accessory renders twice, once per placement, so shared state should live outside the returned component.

Sidebar

Use tabBarControllerMode: 'tabSidebar' to display the native tab controller as a sidebar.

Static API

const AppTabs = createNativeBottomTabNavigator({
  screenOptions: {
    tabBarControllerMode: 'tabSidebar',
  },
  screens: {
    Home: HomeScreen,
    Search: SearchScreen,
  },
});

Dynamic API

const Tab = createNativeBottomTabNavigator();

function AppTabs() {
  return (
    <Tab.Navigator
      screenOptions={{
        tabBarControllerMode: 'tabSidebar',
      }}
    >
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Search" component={SearchScreen} />
    </Tab.Navigator>
  );
}

auto lets the system choose the presentation.
tabBar forces the standard tab bar.
Sidebar mode is supported on iOS 18 and above and not on tvOS.

Minimize on Scroll

Use tabBarMinimizeBehavior to let the system collapse the tab bar while scrolling.

Static API

const AppTabs = createNativeBottomTabNavigator({
  screenOptions: {
    tabBarMinimizeBehavior: 'onScrollDown',
  },
  screens: {
    Home: HomeScreen,
  },
});

Dynamic API

const Tab = createNativeBottomTabNavigator();

function AppTabs() {
  return (
    <Tab.Navigator
      screenOptions={{
        tabBarMinimizeBehavior: 'onScrollDown',
      }}
    >
      <Tab.Screen name="Home" component={HomeScreen} />
    </Tab.Navigator>
  );
}

Supported values are auto, never, onScrollDown, and onScrollUp.
This is supported on iOS 26 and above.

Notes

React Native 0.79 or above is required. If you're using Expo, SDK 53 or above is required.
The app must use the latest react-native-screens along with the latest version of @react-navigation/bottom-tabs to avoid compatibility issues.
When using Expo, development builds maybe required to support the latest version of react-native-screens.
Liquid Glass effect on iOS 26+ requires your app to be built with Xcode 26 or above.
On Android, at most 5 tabs are supported. This is a limitation of the underlying native component.
No header is shown by default. A basic JS based header can be shown with headerShown: true option (see header.md), or a native header can be shown by nesting a native stack navigator inside each tab screen.

Canonical Docs

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Web Artifacts Builder
AnthropicOfficial
A structured workflow for developing and bundling complex, multi-component React artifacts for Claude.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
Apache-2.0Medium riskHas scriptsGitHub stars of the source repository188.6k
Frontend UI Engineering
Addy Osmani· Community
Engineering standards for building accessible, responsive, and production-ready frontend user interfaces.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository113.9k
Anti UI Slop
GitHubOfficial
Prevent generic AI-generated UI by grounding interface development in real-world design patterns and rigorous review gates.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
Apache-2.0GitHub stars of the source repository40.9k
Ask Sonner
Emil Kowalski· Community
A comprehensive guide for implementing, styling, and troubleshooting the Sonner toast notification library in React applications.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository54.3k
Pick UI Library
Emil Kowalski· Community
Get recommendations for frontend UI libraries based on a curated, opinionated list.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository54.3k
Animate Expo
Emil Kowalski· Community
A senior mobile engineering guide for building React Native and Expo animations that feel correct on real devices.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository54.3k

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download react-navigation.zip

From the author

AutoGineer summary

What it does

When to use it

Advantages

Usage examples

Install

Documentation by Callstack