AutoGineer
Generated banner for React Navigation
Generated logo for React Navigation

React Navigation

CallstackOfficialPublished by Callstack

  • Skill
  • Tool integration
  • Software development
  • MIT
  • No issues found
Download ZIP

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

  1. Download the skill as a ZIP:

    https://mp-staging.autogineer.com/agent-skills/callstackincubator/react-navigation/download

  2. 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

React Navigation

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

FileDescription
stacks.mdStack based navigation
form-sheet.mdBottom sheet and form sheets
bottom-tabs.mdCross-platform bottom tabs
native-bottom-tabs.mdNative bottom tabs
material-top-tabs.mdSwipeable Top tabs
drawers.mdDrawer navigation and sidebars
header.mdConfiguring headers
safe-areas.mdSafe-area handling

Problem -> Skill Mapping

ProblemStart With
Showing screens and modals in a stackstacks.md
Showing bottom sheets or form sheetsform-sheet.md
Showing screens in bottom tabs or responsive sidebars with web supportbottom-tabs.md
Showing screens in native tabs on iOS & Androidnative-bottom-tabs.md
Showing content in swipeable top tabsmaterial-top-tabs.md
Using a drawer or sidebardrawers.md
Configuring the header in bottom tab or drawer navigatorheader.md
Handling safe-area such as status bar, header insets, tab bar insets etc.safe-areas.md

Files

references/header.md

title: Header impact: MEDIUM tags: react-navigation, header, title, header-buttons, header-background, react-navigation-elements

Skill: Header

Description

Use this when customizing the header in bottom tabs or drawer which render a JS-based header.

For native stack headers, use stacks.md instead.

When to Use

  • Styling the built-in header in bottom tabs or drawer screens

  • Adding header buttons, custom title content, or a custom background

Basic Example

The shared header options work the same in bottom tabs and drawer. The examples below use bottom tabs.

Static API

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

const AppTabs = createBottomTabNavigator({
  screens: {
    Home: {
      screen: HomeScreen,
      options: {
        title: 'Home',
        headerStyle: {
          backgroundColor: '#fff',
        },
        headerTintColor: '#111',
        headerRight: () => <HeaderAction />,
      },
    },
  },
});

Dynamic API

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

const Tab = createBottomTabNavigator();

function AppTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          title: 'Home',
          headerStyle: {
            backgroundColor: '#fff',
          },
          headerTintColor: '#111',
          headerRight: () => <HeaderAction />,
        }}
      />
    </Tab.Navigator>
  );
}

  • Use title, headerStyle, headerTintColor, headerTitleStyle, and headerTitleAlign for the default header. Put shared config in navigator screenOptions and per-screen overrides in options.

  • Use headerShown: false for screens that contain a navigator - the header from the child navigator should be shown instead.

Common Features

Buttons and Custom Content

Use headerLeft, headerRight, headerTitle, and headerBackground when the default header layout is fine but specific pieces need customization.

Static API

import { Button, Text } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const AppTabs = createBottomTabNavigator({
  screens: {
    Inbox: {
      screen: InboxScreen,
      options: {
        headerLeft: ({ tintColor }) => (
          <Button title="Edit" color={tintColor} onPress={() => {}} />
        ),
        headerTitle: ({ tintColor, children }) => (
          <Text style={{ color: tintColor, fontSize: 18 }}>{children}</Text>
        ),
        headerRight: ({ tintColor }) => (
          <Button title="Done" color={tintColor} onPress={() => {}} />
        ),
      },
    },
  },
});

Dynamic API

import { Button, Text } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function AppTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen
        name="Inbox"
        component={InboxScreen}
        options={{
          headerLeft: ({ tintColor }) => (
            <Button title="Edit" color={tintColor} onPress={() => {}} />
          ),
          headerTitle: ({ tintColor, children }) => (
            <Text style={{ color: tintColor, fontSize: 18 }}>{children}</Text>
          ),
          headerRight: ({ tintColor }) => (
            <Button title="Done" color={tintColor} onPress={() => {}} />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

  • headerLeft and headerRight receive props such as tintColor, pressColor, and pressOpacity.

  • headerTitle is useful when the title needs custom typography, icons, or extra layout.

  • Use headerTitleContainerStyle, headerLeftContainerStyle, and headerRightContainerStyle to customize the container styles.

Search Bar

Use headerSearchBarOptions to add a search button that expands into a search input in the header. If the search configuration depends on screen state, update it with navigation.setOptions(...).

Static API

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

const AppTabs = createBottomTabNavigator({
  screens: {
    Search: {
      screen: SearchScreen,
      options: {
        headerSearchBarOptions: {
          placeholder: 'Search',
          onChangeText: (text) => {
            // Do something
          },
        },
      },
    },
  },
});

Dynamic API

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

const Tab = createBottomTabNavigator();

function AppTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen
        name="Search"
        component={SearchScreen}
        options={{
          headerSearchBarOptions: {
            placeholder: 'Search',
            onChangeText: (text) => {
              // Do something
            },
          },
        }}
      />
    </Tab.Navigator>
  );
}
Translucent Headers

Use headerTransparent: true to let content show underneath the header. Combine it with headerBackground for effects such as a blur, gradient, or image background.

Static API

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { BlurView } from 'expo-blur';
import { StyleSheet } from 'react-native';

const AppTabs = createBottomTabNavigator({
  screens: {
    Feed: {
      screen: FeedScreen,
      options: {
        headerTransparent: true,
        headerBackground: () => (
          <BlurView
            tint="light"
            intensity={100}
            style={StyleSheet.absoluteFill}
          />
        ),
      },
    },
  },
});

Dynamic API

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { BlurView } from 'expo-blur';
import { StyleSheet } from 'react-native';

const Tab = createBottomTabNavigator();

function AppTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen
        name="Feed"
        component={FeedScreen}
        options={{
          headerTransparent: true,
          headerBackground: () => (
            <BlurView
              tint="light"
              intensity={100}
              style={StyleSheet.absoluteFill}
            />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

  • headerStyle does not apply when headerBackground is used. Style the element returned from headerBackground instead.

  • Transparent headers overlap the content below. Add top spacing manually using useHeaderHeight hook from @react-navigation/elements

Canonical Docs

Related Skills

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.

Attribution and licence

Published by
Callstack
Publisher
Callstack (Official)
Source
callstackincubator/agent-skills · skills/react-navigation · commit 59e9d17
Licence
MIT License (redistribution allowed)
  • LICENSE (added by AutoGineer from LICENSE)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by Callstack.

Download ZIP

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