0
# Navigator Creation
1

2
Core navigation functionality for creating bottom tab navigators with full TypeScript support and extensive configuration options.
3

4
## Capabilities
5

6
### createBottomTabNavigator
7

8
Creates a bottom tab navigator factory function that returns a typed navigator with Screen and Navigator components.
9

10
```typescript { .api }
11
/**
12
 * Creates a bottom tab navigator with full TypeScript support.
13
 * @param config Optional static configuration for the navigator
14
 * @returns TypedNavigator with Screen and Navigator components
15
 */
16
function createBottomTabNavigator<
17
  const ParamList extends ParamListBase,
18
  const NavigatorID extends string | undefined = undefined,
19
  const TypeBag extends NavigatorTypeBagBase = {
20
    ParamList: ParamList;
21
    NavigatorID: NavigatorID;
22
    State: TabNavigationState<ParamList>;
23
    ScreenOptions: BottomTabNavigationOptions;
24
    EventMap: BottomTabNavigationEventMap;
25
    NavigationList: {
26
      [RouteName in keyof ParamList]: BottomTabNavigationProp<
27
        ParamList,
28
        RouteName,
29
        NavigatorID
30
      >;
31
    };
32
    Navigator: typeof BottomTabNavigator;
33
  },
34
  const Config extends StaticConfig<TypeBag> = StaticConfig<TypeBag>
35
>(config?: Config): TypedNavigator<TypeBag, Config>;
36
```
37

38
**Usage Examples:**
39

40
```typescript
41
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
42

43
// Basic navigator
44
const Tab = createBottomTabNavigator();
45

46
// Typed navigator with param list
47
type TabParamList = {
48
  Home: undefined;
49
  Profile: { userId: string };
50
  Settings: undefined;
51
};
52

53
const TypedTab = createBottomTabNavigator<TabParamList>();
54

55
// Navigator with ID for multiple navigators
56
const MainTab = createBottomTabNavigator<TabParamList, "MainTabs">();
57
```
58

59
### TypedNavigator Components
60

61
The navigator factory returns components for building the navigation structure.
62

63
```typescript { .api }
64
interface TypedNavigator<TypeBag, Config> {
65
  Screen: React.ComponentType<BottomTabScreenConfig<TypeBag>>;
66
  Navigator: React.ComponentType<BottomTabNavigatorProps>;
67
  Group: React.ComponentType<GroupConfig>;
68
}
69

70
interface BottomTabScreenConfig<TypeBag> {
71
  name: keyof TypeBag['ParamList'];
72
  component?: React.ComponentType<any>;
73
  getComponent?: () => React.ComponentType<any>;
74
  options?: BottomTabNavigationOptions | ((props: BottomTabOptionsArgs) => BottomTabNavigationOptions);
75
  initialParams?: TypeBag['ParamList'][keyof TypeBag['ParamList']];
76
  getId?: ({ params }: { params: any }) => string;
77
  listeners?: BottomTabNavigationListeners;
78
}
79
```
80

81
**Usage Examples:**
82

83
```typescript
84
function App() {
85
  return (
86
    <NavigationContainer>
87
      <Tab.Navigator 
88
        screenOptions={{
89
          tabBarActiveTintColor: '#e91e63',
90
          tabBarInactiveTintColor: 'gray',
91
        }}
92
      >
93
        <Tab.Screen 
94
          name="Home" 
95
          component={HomeScreen}
96
          options={{
97
            tabBarIcon: ({ color, size }) => (
98
              <HomeIcon color={color} size={size} />
99
            ),
100
          }}
101
        />
102
        <Tab.Screen 
103
          name="Profile" 
104
          component={ProfileScreen}
105
          options={({ route }) => ({
106
            tabBarBadge: route.params?.unreadCount,
107
          })}
108
        />
109
      </Tab.Navigator>
110
    </NavigationContainer>
111
  );
112
}
113
```
114

115
### Navigator Configuration
116

117
Configure the overall behavior and appearance of the tab navigator.
118

119
```typescript { .api }
120
interface BottomTabNavigationConfig {
121
  /**
122
   * Function that returns a React element to display as the tab bar.
123
   */
124
  tabBar?: (props: BottomTabBarProps) => React.ReactNode;
125
  /**
126
   * Safe area insets for the tab bar. By default, the device's safe area insets are automatically detected.
127
   */
128
  safeAreaInsets?: {
129
    top?: number;
130
    right?: number;
131
    bottom?: number;
132
    left?: number;
133
  };
134
  /**
135
   * Whether inactive screens should be detached from the view hierarchy to save memory.
136
   * Defaults to `true` on Android.
137
   */
138
  detachInactiveScreens?: boolean;
139
}
140
```
141

142
**Usage Examples:**
143

144
```typescript
145
import { BottomTabBar } from "@react-navigation/bottom-tabs";
146

147
function CustomTabBar(props) {
148
  return <BottomTabBar {...props} style={{ backgroundColor: 'blue' }} />;
149
}
150

151
<Tab.Navigator
152
  tabBar={(props) => <CustomTabBar {...props} />}
153
  safeAreaInsets={{ bottom: 20 }}
154
  detachInactiveScreens={false}
155
>
156
  {/* screens */}
157
</Tab.Navigator>
158
```
159

160
### Screen Options Function
161

162
Dynamic screen options based on navigation state and props.
163

164
```typescript { .api }
165
interface BottomTabOptionsArgs<
166
  ParamList extends ParamListBase,
167
  RouteName extends keyof ParamList = keyof ParamList,
168
  NavigatorID extends string | undefined = undefined
169
> extends BottomTabScreenProps<ParamList, RouteName, NavigatorID> {
170
  theme: Theme;
171
}
172

173
type ScreenOptionsFunction<T> = (props: BottomTabOptionsArgs<T>) => BottomTabNavigationOptions;
174
```
175

176
**Usage Examples:**
177

178
```typescript
179
<Tab.Navigator
180
  screenOptions={({ route, theme }) => ({
181
    tabBarIcon: ({ focused, color, size }) => {
182
      let iconName = route.name === 'Home' ? 'home' : 'settings';
183
      return <Icon name={iconName} size={size} color={color} />;
184
    },
185
    tabBarActiveTintColor: theme.colors.primary,
186
    tabBarInactiveTintColor: theme.colors.text,
187
  })}
188
>
189
  {/* screens */}
190
</Tab.Navigator>
191
```
192

193
## Types
194

195
### Navigator Type Bag
196

197
```typescript { .api }
198
interface NavigatorTypeBagBase {
199
  ParamList: {};
200
  NavigatorID: string | undefined;
201
  State: NavigationState;
202
  ScreenOptions: {};
203
  EventMap: {};
204
  NavigationList: NavigationListBase<ParamListBase>;
205
  Navigator: React.ComponentType<any>;
206
}
207

208
interface NavigationListBase<ParamList extends ParamListBase> {
209
  [RouteName in keyof ParamList]: NavigationProp<
210
    ParamList,
211
    RouteName,
212
    string | undefined,
213
    NavigationState,
214
    {},
215
    {}
216
  >;
217
}
218

219
interface EventMapBase {
220
  [name: string]: {
221
    data?: any;
222
    canPreventDefault?: boolean;
223
  };
224
}
225
```
226

227
### Static Configuration
228

229
```typescript { .api }
230
interface StaticConfig<Bag extends NavigatorTypeBagBase> {
231
  screens?: StaticConfigScreens<
232
    Bag['ParamList'],
233
    Bag['State'],
234
    Bag['ScreenOptions'],
235
    Bag['EventMap'],
236
    Bag['NavigationList']
237
  >;
238
  groups?: Record<string, StaticConfigGroup<
239
    Bag['ParamList'],
240
    Bag['State'],
241
    Bag['ScreenOptions'],
242
    Bag['EventMap'],
243
    Bag['NavigationList']
244
  >>;
245
  config?: Config;
246
}
247

248
interface StaticConfigScreens<
249
  ParamList extends ParamListBase,
250
  State extends NavigationState,
251
  ScreenOptions extends {},
252
  EventMap extends EventMapBase,
253
  NavigationList extends NavigationListBase<ParamList>
254
> {
255
  [RouteName in keyof ParamList]:
256
    | React.ComponentType<any>
257
    | StaticNavigation<any, any, any>
258
    | StaticRouteConfig<ParamList, RouteName, State, ScreenOptions, EventMap, NavigationList[RouteName]>;
259
}
260

261
type ParamListBase = Record<string, object | undefined>;
262

263
interface NavigationState<ParamList extends ParamListBase = ParamListBase> {
264
  key: string;
265
  index: number;
266
  routeNames: Extract<keyof ParamList, string>[];
267
  history?: unknown[];
268
  routes: NavigationRoute<ParamList, keyof ParamList>[];
269
  type: string;
270
  stale: false;
271
}
272
```