diff --git a/skills/react-navigation/SKILL.md b/skills/react-navigation/SKILL.md
new file mode 100644
index 0000000..036ce68
--- /dev/null
+++ b/skills/react-navigation/SKILL.md
@@ -0,0 +1,66 @@
+---
+name: react-navigation
+description: 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.
+license: MIT
+metadata:
+ author: Callstack
+ tags: react-navigation, navigation, ui, native-stack, header, bottom-tabs, native-bottom-tabs, material-top-tabs, drawer, form-sheet, status-bar, safe-area, nested-navigators
+---
+
+# 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
+
+| File | Description |
+| ------------------------------------------- | ------------------------------ |
+| [stacks.md][stacks] | Stack based navigation |
+| [form-sheet.md][form-sheet] | Bottom sheet and form sheets |
+| [bottom-tabs.md][bottom-tabs] | Cross-platform bottom tabs |
+| [native-bottom-tabs.md][native-bottom-tabs] | Native bottom tabs |
+| [material-top-tabs.md][material-top-tabs] | Swipeable Top tabs |
+| [drawers.md][drawers] | Drawer navigation and sidebars |
+| [header.md][header] | Configuring headers |
+| [safe-areas.md][safe-areas] | Safe-area handling |
+
+## Problem -> Skill Mapping
+
+| Problem | Start With |
+| ------------------------------------------------------------------------- | ------------------------------------------- |
+| Showing screens and modals in a stack | [stacks.md][stacks] |
+| Showing bottom sheets or form sheets | [form-sheet.md][form-sheet] |
+| Showing screens in bottom tabs or responsive sidebars with web support | [bottom-tabs.md][bottom-tabs] |
+| Showing screens in native tabs on iOS & Android | [native-bottom-tabs.md][native-bottom-tabs] |
+| Showing content in swipeable top tabs | [material-top-tabs.md][material-top-tabs] |
+| Using a drawer or sidebar | [drawers.md][drawers] |
+| Configuring the header in bottom tab or drawer navigator | [header.md][header] |
+| Handling safe-area such as status bar, header insets, tab bar insets etc. | [safe-areas.md][safe-areas] |
+
+[stacks]: references/stacks.md
+[form-sheet]: references/form-sheet.md
+[safe-areas]: references/safe-areas.md
+[bottom-tabs]: references/bottom-tabs.md
+[native-bottom-tabs]: references/native-bottom-tabs.md
+[material-top-tabs]: references/material-top-tabs.md
+[drawers]: references/drawers.md
+[header]: references/header.md
diff --git a/skills/react-navigation/references/bottom-tabs.md b/skills/react-navigation/references/bottom-tabs.md
new file mode 100644
index 0000000..5a9449c
--- /dev/null
+++ b/skills/react-navigation/references/bottom-tabs.md
@@ -0,0 +1,496 @@
+---
+title: Bottom Tabs
+impact: HIGH
+tags: react-navigation, bottom-tabs, tab-bar, icons, blur, sidebar, header
+---
+
+# Skill: Bottom Tabs
+
+## Description
+
+Use `createBottomTabNavigator` for cross-platform tab navigation with a tab bar that can stay at the bottom on smaller screens and move to the side on larger layouts if the app needs web support.
+
+Conditionally use [native-bottom-tabs.md](./native-bottom-tabs.md) on Android and iOS for a native tab bar.
+
+## When to Use
+
+- Building primary app destinations behind a tab bar
+- The app needs to run on web and mobile
+
+## Basic Example
+
+**Static API**
+
+```tsx
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+
+const AppTabs = createBottomTabNavigator({
+ screens: {
+ Home: HomeScreen,
+ Profile: ProfileScreen,
+ },
+});
+```
+
+**Dynamic API**
+
+```tsx
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+
+const Tab = createBottomTabNavigator();
+
+function AppTabs() {
+ return (
+
+
+
+
+ );
+}
+```
+
+## Common Features
+
+### Displaying Icons
+
+Use `tabBarIcon` in `screenOptions` or per-screen `options`. Optionally use `tabBarActiveTintColor` and `tabBarInactiveTintColor` to change the color passed to the icon.
+
+**Static API**
+
+```tsx
+import Ionicons from '@expo/vector-icons/Ionicons';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+
+const AppTabs = createBottomTabNavigator({
+ screenOptions: ({ route }) => ({
+ tabBarIcon: ({ focused, color, size }) => {
+ let iconName;
+
+ switch (route.name) {
+ case 'Home':
+ iconName = focused ? 'home' : 'home-outline';
+ break;
+ default:
+ iconName = focused ? 'settings' : 'settings-outline';
+ break;
+ }
+
+ return ;
+ },
+ tabBarActiveTintColor: 'tomato',
+ tabBarInactiveTintColor: 'gray',
+ }),
+ screens: {
+ Home: HomeScreen,
+ Settings: SettingsScreen,
+ },
+});
+```
+
+**Dynamic API**
+
+```tsx
+import Ionicons from '@expo/vector-icons/Ionicons';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+
+const Tab = createBottomTabNavigator();
+
+function AppTabs() {
+ return (
+ ({
+ tabBarIcon: ({ focused, color, size }) => {
+ let iconName;
+
+ switch (route.name) {
+ case 'Home':
+ iconName = focused ? 'home' : 'home-outline';
+ break;
+ default:
+ iconName = focused ? 'settings' : 'settings-outline';
+ break;
+ }
+
+ return ;
+ },
+ tabBarActiveTintColor: 'tomato',
+ tabBarInactiveTintColor: 'gray',
+ })}
+ >
+
+
+
+ );
+}
+```
+
+The `tabBarIcon` option can render any React element. Choose between the icon libraries that best fit the app's design and environment:
+
+- `@expo/vector-icons` if Expo SDK is configured in the app
+- `react-native-vector-icons` for an app using React Native Community CLI
+- `` for local images
+
+### Scroll to Top on Tab Press
+
+Use `useScrollToTop` on a scrollable ref inside a screen in the tab navigator to automatically scroll to the top when the tab is pressed while already focused.
+
+```tsx
+import * as React from 'react';
+import { ScrollView } from 'react-native';
+import { useScrollToTop } from '@react-navigation/native';
+
+function FeedScreen() {
+ const ref = React.useRef(null);
+
+ useScrollToTop(ref);
+
+ return {/* content */};
+}
+```
+
+### Custom Background Such as Blur
+
+Use `tabBarBackground` for custom chrome such as blur effects, image, or gradient backgrounds. When the background should show through the tab bar, set `tabBarStyle: { position: 'absolute' }` and use `useBottomTabBarHeight` inside the screens to pad the content.
+
+**Static API**
+
+```tsx
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { BlurView } from 'expo-blur';
+import { StyleSheet } from 'react-native';
+
+const AppTabs = createBottomTabNavigator({
+ screenOptions: {
+ tabBarStyle: { position: 'absolute' },
+ tabBarBackground: () => (
+
+ ),
+ },
+ screens: {
+ Home: HomeScreen,
+ Profile: ProfileScreen,
+ },
+});
+```
+
+**Dynamic API**
+
+```tsx
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { BlurView } from 'expo-blur';
+import { StyleSheet } from 'react-native';
+
+const Tab = createBottomTabNavigator();
+
+function AppTabs() {
+ return (
+ (
+
+ ),
+ }}
+ >
+
+
+
+ );
+}
+```
+
+### Custom Tab Bar
+
+Use the `tabBar` option if a custom design is needed. Use the `state` prop to access the list of screens and `descriptors` to access the options for each screen. Use the `navigation` prop passed to the tab bar for navigation instead of `useNavigation`.
+
+```tsx
+import { Text, View } from 'react-native';
+import { useLinkBuilder } from '@react-navigation/native';
+import { PlatformPressable } from '@react-navigation/elements';
+
+function MyTabBar({ state, descriptors, navigation }) {
+ const { buildHref } = useLinkBuilder();
+
+ return (
+
+ {state.routes.map((route, index) => {
+ const { options } = descriptors[route.key];
+ const label =
+ options.tabBarLabel !== undefined
+ ? options.tabBarLabel
+ : options.title !== undefined
+ ? options.title
+ : route.name;
+
+ const isFocused = state.index === index;
+
+ return (
+ {
+ const event = navigation.emit({
+ type: 'tabPress',
+ target: route.key,
+ canPreventDefault: true,
+ });
+
+ if (!isFocused && !event.defaultPrevented) {
+ navigation.navigate(route.name, route.params);
+ }
+ }}
+ onLongPress={() =>
+ navigation.emit({
+ type: 'tabLongPress',
+ target: route.key,
+ })
+ }
+ style={{ flex: 1, alignItems: 'center', paddingVertical: 12 }}
+ >
+ {label}
+
+ );
+ })}
+
+ );
+}
+```
+
+**Static API**
+
+```tsx
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+
+const AppTabs = createBottomTabNavigator({
+ tabBar: (props) => ,
+ screens: {
+ Home: HomeScreen,
+ Profile: ProfileScreen,
+ },
+});
+```
+
+**Dynamic API**
+
+```tsx
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+
+const Tab = createBottomTabNavigator();
+
+function AppTabs() {
+ return (
+ }>
+
+
+
+ );
+}
+```
+
+### Sidebar
+
+Set `tabBarPosition` to `left` or `right` to render the tab bar as a sidebar. Choose the position based on the screen width for responsive layouts.
+
+**Static API**
+
+```tsx
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+
+const AppTabs = createBottomTabNavigator({
+ screenOptions: {
+ tabBarPosition: 'left',
+ },
+ screens: {
+ Home: HomeScreen,
+ Profile: ProfileScreen,
+ },
+}).with(({ Navigator }) => {
+ const dimensions = useWindowDimensions();
+
+ return (
+ = 768 ? 'left' : 'bottom',
+ }}
+ />
+ );
+});
+```
+
+**Dynamic API**
+
+```tsx
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { useWindowDimensions } from 'react-native';
+
+const Tab = createBottomTabNavigator();
+
+function AppTabs() {
+ const dimensions = useWindowDimensions();
+
+ return (
+ = 768 ? 'left' : 'bottom',
+ }}
+ >
+
+
+
+ );
+}
+```
+
+For a compact sidebar, use `tabBarVariant: 'material'` together with `tabBarLabelPosition: 'below-icon'`.
+
+### Customizing Header
+
+Bottom tabs show a header by default. Use [header.md](./header.md) for common customization patterns.
+
+A custom header can be shown with the `header` option if a custom design is needed.
+
+**Static API**
+
+```tsx
+import { getHeaderTitle } from '@react-navigation/elements';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+
+const AppTabs = createBottomTabNavigator({
+ screens: {
+ Home: {
+ screen: HomeScreen,
+ options: {
+ headerStyle: {
+ height: 80,
+ },
+ header: ({ route, options }) => {
+ const title = getHeaderTitle(options, route.name);
+
+ return ;
+ },
+ },
+ },
+ },
+});
+```
+
+**Dynamic API**
+
+```tsx
+import { getHeaderTitle } from '@react-navigation/elements';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+
+const Tab = createBottomTabNavigator();
+
+function AppTabs() {
+ return (
+
+ {
+ const title = getHeaderTitle(options, route.name);
+
+ return ;
+ },
+ }}
+ />
+
+ );
+}
+```
+
+- Set `headerShown: false` to hide the header.
+- If a custom header uses a non-default height, set `headerStyle: { height: ... }` explicitly to avoid measurement glitches.
+
+## Hiding Tab Bar on Certain Screens
+
+The tab bar is shown on all screens in the tab navigator. To hide the tab bar on certain screens, put those screens in a parent stack navigator instead.
+
+**Static API**
+
+```tsx
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+const HomeTabs = createBottomTabNavigator({
+ screens: {
+ Home: HomeScreen,
+ Feed: FeedScreen,
+ Notifications: NotificationsScreen,
+ },
+});
+
+const AppStack = createNativeStackNavigator({
+ screens: {
+ Main: {
+ screen: HomeTabs,
+ options: {
+ headerShown: false,
+ },
+ },
+ Profile: ProfileScreen,
+ Settings: SettingsScreen,
+ },
+});
+```
+
+**Dynamic API**
+
+```tsx
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+const Stack = createNativeStackNavigator();
+const Tab = createBottomTabNavigator();
+
+function HomeTabs() {
+ return (
+
+
+
+
+
+ );
+}
+
+function AppStack() {
+ return (
+
+
+
+
+
+ );
+}
+```
+
+- Prefer this structure over trying to hide the parent tab bar from screens inside the tab navigator as it can lead to layout glitches.
+- Use [stacks.md](./stacks.md) for stack-specific options on the full-screen routes.
+
+## Canonical Docs
+
+- [Bottom Tabs Navigator](https://reactnavigation.org/docs/bottom-tab-navigator)
+- [Customizing bottom tab bar](https://reactnavigation.org/docs/customizing-tabbar)
+- [Hiding tab bar in specific screens](https://reactnavigation.org/docs/hiding-tabbar-in-screens)
+
+## Related Skills
+
+- [header.md](./header.md)
+- [native-bottom-tabs.md](./native-bottom-tabs.md)
+- [material-top-tabs.md](./material-top-tabs.md)
+- [safe-areas.md](./safe-areas.md)
diff --git a/skills/react-navigation/references/drawers.md b/skills/react-navigation/references/drawers.md
new file mode 100644
index 0000000..c178f43
--- /dev/null
+++ b/skills/react-navigation/references/drawers.md
@@ -0,0 +1,474 @@
+---
+title: Drawer Navigator
+impact: HIGH
+tags: react-navigation, drawer, sidebar, master-detail, header, responsive-layout
+---
+
+# Skill: Drawer Navigator
+
+## Description
+
+Use `createDrawerNavigator` for a navigation drawer or sidebar that switches between app sections. If using a drawer for displaying content instead of navigation, use [`react-native-drawer-layout`](https://reactnavigation.org/docs/drawer-layout/) instead.
+
+## When to Use
+
+- Building app sections behind a drawer or sidebar
+- Showing a permanent sidebar on larger screens and a drawer on smaller screens
+- Using the drawer as the master pane in a master-detail layout
+
+## Prerequisites
+
+Install and configure `react-native-gesture-handler`, `react-native-reanimated`, and `react-native-worklets` for drawer navigator to work on native platforms.
+
+## Basic Example
+
+**Static API**
+
+```tsx
+import { createDrawerNavigator } from '@react-navigation/drawer';
+
+const AppDrawer = createDrawerNavigator({
+ screens: {
+ Home: HomeScreen,
+ Profile: ProfileScreen,
+ },
+});
+```
+
+**Dynamic API**
+
+```tsx
+import { createDrawerNavigator } from '@react-navigation/drawer';
+
+const Drawer = createDrawerNavigator();
+
+function AppDrawer() {
+ return (
+
+
+
+
+ );
+}
+```
+
+## Opening and Closing the Drawer
+
+Use `navigation.openDrawer()`, `navigation.closeDrawer()`, and `navigation.toggleDrawer()` inside drawer screens to open or close the drawer programmatically.
+
+```tsx
+import { Button, View } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+
+function HomeScreen() {
+ const navigation = useNavigation();
+
+ return (
+
+
+ );
+}
+```
+
+## Nesting Drawers
+
+When nesting a drawer inside another drawer, use [`react-native-drawer-layout`](https://reactnavigation.org/docs/drawer-layout/) for the outer drawer and keep Drawer navigator for the inner navigation drawer.
+
+```tsx
+import * as React from 'react';
+import { Text } from 'react-native';
+import { Drawer } from 'react-native-drawer-layout';
+
+function App() {
+ const [rightDrawerOpen, setRightDrawerOpen] = React.useState(false);
+
+ return (
+ setRightDrawerOpen(true)}
+ onClose={() => setRightDrawerOpen(false)}
+ drawerPosition="right"
+ renderDrawerContent={() => Right drawer content}
+ >
+
+
+ );
+}
+```
+
+Use React context to expose methods for opening or closing the outer drawer from nested screens.
+
+## Common Features
+
+### Displaying Icons
+
+Use `drawerIcon` in `screenOptions` or per-screen `options`. `drawerActiveTintColor` and `drawerInactiveTintColor` control the color passed to the icon and label.
+
+**Static API**
+
+```tsx
+import Ionicons from '@expo/vector-icons/Ionicons';
+import { createDrawerNavigator } from '@react-navigation/drawer';
+
+const AppDrawer = createDrawerNavigator({
+ screenOptions: ({ route }) => ({
+ drawerIcon: ({ color, size }) => {
+ let iconName;
+
+ switch (route.name) {
+ case 'Home':
+ iconName = 'home-outline';
+ break;
+ default:
+ iconName = 'person-outline';
+ break;
+ }
+
+ return ;
+ },
+ drawerActiveTintColor: 'tomato',
+ drawerInactiveTintColor: 'gray',
+ }),
+ screens: {
+ Home: HomeScreen,
+ Profile: ProfileScreen,
+ },
+});
+```
+
+**Dynamic API**
+
+```tsx
+import Ionicons from '@expo/vector-icons/Ionicons';
+import { createDrawerNavigator } from '@react-navigation/drawer';
+
+const Drawer = createDrawerNavigator();
+
+function AppDrawer() {
+ return (
+ ({
+ drawerIcon: ({ color, size }) => {
+ let iconName;
+
+ switch (route.name) {
+ case 'Home':
+ iconName = 'home-outline';
+ break;
+ default:
+ iconName = 'person-outline';
+ break;
+ }
+
+ return ;
+ },
+ drawerActiveTintColor: 'tomato',
+ drawerInactiveTintColor: 'gray',
+ })}
+ >
+
+
+
+ );
+}
+```
+
+The `drawerIcon` option can render any React element. Choose between the icon libraries that best fit the app's design and environment:
+
+- `@expo/vector-icons` if Expo SDK is configured in the app
+- `react-native-vector-icons` for an app using React Native Community CLI
+- `` for local images
+
+### Custom Drawer Content
+
+Use `drawerContent` to customize the content of drawer, such as adding a header, footer, or custom actions, or replacing with a custom design.
+
+Use `DrawerContentScrollView` to automatically adjust insets and `DrawerItemList` to keep default design. Use the `navigation` prop passed to the custom drawer content instead of `useNavigation`.
+
+```tsx
+import {
+ createDrawerNavigator,
+ DrawerContentScrollView,
+ DrawerItem,
+ DrawerItemList,
+} from '@react-navigation/drawer';
+
+function CustomDrawerContent(props) {
+ return (
+
+
+ props.navigation.navigate('Help')}
+ />
+
+ );
+}
+```
+
+Replace the content with own element if a different design is needed. Use the `state` prop to access the list of screens and `descriptors` to access the options for each screen.
+
+**Static API**
+
+```tsx
+import { createDrawerNavigator } from '@react-navigation/drawer';
+
+const AppDrawer = createDrawerNavigator({
+ drawerContent: (props) => ,
+ screens: {
+ Home: HomeScreen,
+ Profile: ProfileScreen,
+ Help: HelpScreen,
+ },
+});
+```
+
+**Dynamic API**
+
+```tsx
+import { createDrawerNavigator } from '@react-navigation/drawer';
+
+const Drawer = createDrawerNavigator();
+
+function AppDrawer() {
+ return (
+ }
+ >
+
+
+
+
+ );
+}
+```
+
+### Types of Drawer
+
+Use `drawerType` to choose how the drawer behaves.
+
+Choose between `front`, `back`, and `slide` on smaller screens. Use `permanent` for a sidebar on larger screens. Use `useWindowDimensions` to conditionally set the type based on screen width for responsive layouts.
+
+**Static API**
+
+```tsx
+import { useWindowDimensions } from 'react-native';
+import { createDrawerNavigator } from '@react-navigation/drawer';
+
+const AppDrawer = createDrawerNavigator({
+ screens: {
+ Home: HomeScreen,
+ Profile: ProfileScreen,
+ },
+}).with(({ Navigator }) => {
+ const { width } = useWindowDimensions();
+
+ return (
+ = 768 ? 'permanent' : 'front',
+ }}
+ />
+ );
+});
+```
+
+**Dynamic API**
+
+```tsx
+import { useWindowDimensions } from 'react-native';
+import { createDrawerNavigator } from '@react-navigation/drawer';
+
+const Drawer = createDrawerNavigator();
+
+function AppDrawer() {
+ const { width } = useWindowDimensions();
+
+ return (
+ = 768 ? 'permanent' : 'front',
+ }}
+ >
+
+
+
+ );
+}
+```
+
+### Drawer Position
+
+Use `drawerPosition` to place the drawer on the left or right side. The default is `left` in LTR languages and `right` in RTL languages.
+
+**Static API**
+
+```tsx
+import { createDrawerNavigator } from '@react-navigation/drawer';
+
+const AppDrawer = createDrawerNavigator({
+ screenOptions: {
+ drawerPosition: 'right',
+ },
+ screens: {
+ Home: HomeScreen,
+ Profile: ProfileScreen,
+ },
+});
+```
+
+**Dynamic API**
+
+```tsx
+import { createDrawerNavigator } from '@react-navigation/drawer';
+
+const Drawer = createDrawerNavigator();
+
+function AppDrawer() {
+ return (
+
+
+
+
+ );
+}
+```
+
+### Master Detail Layout
+
+Combine `defaultStatus: 'open'` with `drawerType: 'back'` when the drawer should start open and behave like the master pane behind the detail screen.
+
+**Static API**
+
+```tsx
+import { createDrawerNavigator } from '@react-navigation/drawer';
+
+const AppDrawer = createDrawerNavigator({
+ defaultStatus: 'open',
+ screenOptions: {
+ drawerType: 'back',
+ drawerStyle: { width: '100%' },
+ overlayColor: 'transparent',
+ },
+ screens: {
+ Inbox: InboxScreen,
+ Message: MessageScreen,
+ },
+});
+```
+
+**Dynamic API**
+
+```tsx
+import { createDrawerNavigator } from '@react-navigation/drawer';
+
+const Drawer = createDrawerNavigator();
+
+function AppDrawer() {
+ return (
+
+
+
+
+ );
+}
+```
+
+With `defaultStatus: 'open'`, the drawer's default state is open. So if drawer is closed, the back button will open it.
+
+### Customizing Header
+
+Drawer screens show a header by default. Use [header.md](./header.md) for common customization patterns.
+
+A custom header can be shown with the `header` option if a custom design is needed.
+
+**Static API**
+
+```tsx
+import { getHeaderTitle } from '@react-navigation/elements';
+import { createDrawerNavigator } from '@react-navigation/drawer';
+
+const AppDrawer = createDrawerNavigator({
+ screens: {
+ Home: {
+ screen: HomeScreen,
+ options: {
+ headerStyle: {
+ height: 80,
+ },
+ header: ({ route, options }) => {
+ const title = getHeaderTitle(options, route.name);
+
+ return ;
+ },
+ },
+ },
+ },
+});
+```
+
+**Dynamic API**
+
+```tsx
+import { getHeaderTitle } from '@react-navigation/elements';
+import { createDrawerNavigator } from '@react-navigation/drawer';
+
+const Drawer = createDrawerNavigator();
+
+function AppDrawer() {
+ return (
+
+ {
+ const title = getHeaderTitle(options, route.name);
+
+ return ;
+ },
+ }}
+ />
+
+ );
+}
+```
+
+- Set `headerShown: false` to hide the header.
+- If a custom header uses a non-default height, set `headerStyle: { height: ... }` explicitly to avoid measurement glitches.
+
+## Notes
+
+- Swipe gestures and gesture-handler customization are not supported on web.
+- If a drawer is nested under a stack or tab navigator, it renders below that parent navigator's header or tab bar.
+
+## Canonical Docs
+
+- [Drawer Navigator](https://reactnavigation.org/docs/drawer-navigator)
+- [Multiple drawers](https://reactnavigation.org/docs/multiple-drawers)
+- [Static configuration](https://reactnavigation.org/docs/static-configuration)
+- [Configuring the header bar](https://reactnavigation.org/docs/headers)
+
+## Related Skills
+
+- [header.md](./header.md)
+- [bottom-tabs.md](./bottom-tabs.md)
+- [stacks.md](./stacks.md)
+- [safe-areas.md](./safe-areas.md)
diff --git a/skills/react-navigation/references/form-sheet.md b/skills/react-navigation/references/form-sheet.md
new file mode 100644
index 0000000..005b200
--- /dev/null
+++ b/skills/react-navigation/references/form-sheet.md
@@ -0,0 +1,305 @@
+---
+title: Form Sheets with Native Stack
+impact: MEDIUM
+tags: react-navigation, native-stack, form-sheet, bottom-sheet, modal, detents
+---
+
+# Skill: Form Sheets with Native Stack
+
+## Description
+
+Use native-stack `presentation: 'formSheet'` when a screen should open as a sheet.
+
+## When to Use
+
+- Presenting secondary flows such as edit forms, filters, pickers, or lightweight detail screens
+- Keeping the current screen visible underneath a native sheet presentation
+
+## Basic Example
+
+**Static API**
+
+```tsx
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+const AppStack = createNativeStackNavigator({
+ screens: {
+ Home: HomeScreen,
+ EditProfile: {
+ screen: EditProfileScreen,
+ options: {
+ presentation: 'formSheet',
+ headerShown: false,
+ sheetAllowedDetents: 'fitToContents',
+ },
+ },
+ },
+});
+```
+
+**Dynamic API**
+
+```tsx
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+const Stack = createNativeStackNavigator();
+
+function AppStack() {
+ return (
+
+
+
+
+ );
+}
+```
+
+## Configuring Sheet Sizes
+
+By default, a form sheet takes the full screen height. Use `sheetAllowedDetents` to control the heights where the sheet can rest.
+
+- Use `'fitToContents'` to size the sheet from its content.
+- Use an ascending array of fractions such as `[0.25, 0.5, 1]` for fixed detents.
+- On Android, only the first 3 detents are used.
+- Use `sheetInitialDetentIndex` to choose the opening detent, or `'last'` for the largest one.
+
+### Fit to Contents
+
+`sheetResizeAnimationEnabled` is Android only and controls the default resize animation when using `'fitToContents'`.
+
+**Static API**
+
+```tsx
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+const AppStack = createNativeStackNavigator({
+ screens: {
+ Home: HomeScreen,
+ Filters: {
+ screen: FiltersScreen,
+ options: {
+ presentation: 'formSheet',
+ sheetAllowedDetents: 'fitToContents',
+ },
+ },
+ },
+});
+```
+
+**Dynamic API**
+
+```tsx
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+const Stack = createNativeStackNavigator();
+
+function AppStack() {
+ return (
+
+
+
+
+ );
+}
+```
+
+On iOS, a top-level `flex: 1` content container works with `'fitToContents'`.
+
+On Android, `'fitToContents'` does not work with a top-level `flex: 1` content container. The sheet can disappear and leave only the dimmed backdrop visible.
+
+### Fixed Detents and Initial Detent
+
+`sheetShouldOverflowTopInset` is Android only and changes whether detent fractions are measured against the full stack height or the inset-adjusted height.
+
+**Static API**
+
+```tsx
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+const AppStack = createNativeStackNavigator({
+ screens: {
+ Home: HomeScreen,
+ Details: {
+ screen: DetailsScreen,
+ options: {
+ presentation: 'formSheet',
+ sheetAllowedDetents: [0.25, 0.5, 1],
+ sheetInitialDetentIndex: 1,
+ },
+ },
+ },
+});
+```
+
+**Dynamic API**
+
+```tsx
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+const Stack = createNativeStackNavigator();
+
+function AppStack() {
+ return (
+
+
+
+
+ );
+}
+```
+
+On iOS, fixed detents do not automatically make content fill the sheet height. Use `contentStyle.backgroundColor` if the uncovered area would otherwise look translucent.
+
+## Customizing Appearance
+
+- `sheetGrabberVisible` is iOS only and shows the grabber.
+- `sheetCornerRadius` overrides the default corner radius.
+- `sheetElevation` is Android only, adjusts the top-edge shadow, and cannot be changed after mount.
+- `sheetLargestUndimmedDetentIndex` controls when the background stays undimmed: `'none'` always dims, `'last'` never dims, and a number keeps the background undimmed up to that detent index. On iOS, the system can still add dimming if the sheet grows beyond that height without a detent change, such as when the keyboard appears.
+- `contentStyle.backgroundColor` sets an explicit background color for the whole sheet. This is especially useful on iOS with fixed detents, where the content does not automatically fill the sheet height.
+
+**Static API**
+
+```tsx
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+const AppStack = createNativeStackNavigator({
+ screens: {
+ Home: HomeScreen,
+ Composer: {
+ screen: ComposerScreen,
+ options: {
+ presentation: 'formSheet',
+ sheetAllowedDetents: [0.5, 1],
+ sheetGrabberVisible: true,
+ sheetCornerRadius: 24,
+ sheetElevation: 12,
+ sheetLargestUndimmedDetentIndex: 0,
+ contentStyle: {
+ backgroundColor: '#fff',
+ },
+ },
+ },
+ },
+});
+```
+
+**Dynamic API**
+
+```tsx
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+const Stack = createNativeStackNavigator();
+
+function AppStack() {
+ return (
+
+
+
+
+ );
+}
+```
+
+## Scroll Behavior
+
+On iOS, scrolling can expand the sheet to a larger detent by default. `sheetExpandsWhenScrolledToEdge` is iOS only, and setting it to `false` prevents that behavior.
+
+For this to work, the `ScrollView` must be reachable by following the first child at each level from the screen component (aka first descendant chain).
+
+**Static API**
+
+```tsx
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+const AppStack = createNativeStackNavigator({
+ screens: {
+ Home: HomeScreen,
+ Comments: {
+ screen: CommentsScreen,
+ options: {
+ presentation: 'formSheet',
+ sheetAllowedDetents: [0.5, 1],
+ sheetExpandsWhenScrolledToEdge: false,
+ },
+ },
+ },
+});
+```
+
+**Dynamic API**
+
+```tsx
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+const Stack = createNativeStackNavigator();
+
+function AppStack() {
+ return (
+
+
+
+
+ );
+}
+```
+
+On Android, nested `ScrollView` usage may require `nestedScrollEnabled`, and still does not work when the content is shorter than the scroll view.
+
+## Notes
+
+- On Android, `presentation: 'formSheet'` screens do not currently support nested stack navigators or `headerShown`.
+
+## Canonical Docs
+
+- [Native Stack Navigator](https://reactnavigation.org/docs/native-stack-navigator)
+
+## Related Skills
+
+- [stacks.md](./stacks.md)
+- [safe-areas.md](./safe-areas.md)
diff --git a/skills/react-navigation/references/header.md b/skills/react-navigation/references/header.md
new file mode 100644
index 0000000..c721c34
--- /dev/null
+++ b/skills/react-navigation/references/header.md
@@ -0,0 +1,270 @@
+---
+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](./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**
+
+```tsx
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+
+const AppTabs = createBottomTabNavigator({
+ screens: {
+ Home: {
+ screen: HomeScreen,
+ options: {
+ title: 'Home',
+ headerStyle: {
+ backgroundColor: '#fff',
+ },
+ headerTintColor: '#111',
+ headerRight: () => ,
+ },
+ },
+ },
+});
+```
+
+**Dynamic API**
+
+```tsx
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+
+const Tab = createBottomTabNavigator();
+
+function AppTabs() {
+ return (
+
+ ,
+ }}
+ />
+
+ );
+}
+```
+
+- 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**
+
+```tsx
+import { Button, Text } from 'react-native';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+
+const AppTabs = createBottomTabNavigator({
+ screens: {
+ Inbox: {
+ screen: InboxScreen,
+ options: {
+ headerLeft: ({ tintColor }) => (
+