0
# Navigation
1

2
Navigation and app structure components including app bars, bottom navigation, and drawer components.
3

4
## Capabilities
5

6
### Appbar
7

8
Application bar component with navigation and action elements.
9

10
```typescript { .api }
11
namespace Appbar {
12
  function Header(props: AppbarHeaderProps): JSX.Element;
13
  function Content(props: AppbarContentProps): JSX.Element;
14
  function Action(props: AppbarActionProps): JSX.Element;
15
  function BackAction(props: AppbarBackActionProps): JSX.Element;
16
}
17

18
interface AppbarHeaderProps {
19
  children: React.ReactNode;
20
  dark?: boolean;
21
  statusBarHeight?: number;
22
  mode?: 'small' | 'medium' | 'large' | 'center-aligned';
23
  elevated?: boolean;
24
  style?: StyleProp<ViewStyle>;
25
  theme?: ThemeProp;
26
}
27

28
interface AppbarContentProps {
29
  title: React.ReactNode;
30
  subtitle?: React.ReactNode;
31
  onPress?: () => void;
32
  disabled?: boolean;
33
  color?: string;
34
  titleStyle?: StyleProp<TextStyle>;
35
  subtitleStyle?: StyleProp<TextStyle>;
36
  style?: StyleProp<ViewStyle>;
37
  theme?: ThemeProp;
38
}
39

40
interface AppbarActionProps {
41
  icon: IconSource;
42
  size?: number;
43
  disabled?: boolean;
44
  onPress?: () => void;
45
  iconColor?: string;
46
  rippleColor?: ColorValue;
47
  accessibilityLabel?: string;
48
  style?: StyleProp<ViewStyle>;
49
  theme?: ThemeProp;
50
}
51

52
interface AppbarBackActionProps {
53
  disabled?: boolean;
54
  onPress?: () => void;
55
  color?: string;
56
  size?: number;
57
  accessibilityLabel?: string;
58
  style?: StyleProp<ViewStyle>;
59
  theme?: ThemeProp;
60
}
61
```
62

63
**Usage Example:**
64

65
```typescript
66
import React from 'react';
67
import { Appbar } from 'react-native-paper';
68

69
function MyAppbar() {
70
  return (
71
    <Appbar.Header>
72
      <Appbar.BackAction onPress={() => {}} />
73
      <Appbar.Content title="Title" subtitle="Subtitle" />
74
      <Appbar.Action icon="calendar" onPress={() => {}} />
75
      <Appbar.Action icon="magnify" onPress={() => {}} />
76
    </Appbar.Header>
77
  );
78
}
79
```
80

81
### BottomNavigation
82

83
Bottom navigation component for primary navigation between top-level views.
84

85
```typescript { .api }
86
function BottomNavigation(props: BottomNavigationProps): JSX.Element;
87

88
interface BottomNavigationProps {
89
  navigationState: {
90
    index: number;
91
    routes: Array<BottomNavigationRoute>;
92
  };
93
  onIndexChange: (index: number) => void;
94
  renderScene: (props: { route: BottomNavigationRoute; jumpTo: (key: string) => void }) => React.ReactNode;
95
  renderIcon?: (props: { route: BottomNavigationRoute; focused: boolean; color: string }) => React.ReactNode;
96
  renderLabel?: (props: { route: BottomNavigationRoute; focused: boolean; color: string }) => React.ReactNode;
97
  renderTouchable?: (props: TouchableProps) => React.ReactNode;
98
  getLabelText?: (props: { route: BottomNavigationRoute }) => string | undefined;
99
  getAccessibilityLabel?: (props: { route: BottomNavigationRoute }) => string | undefined;
100
  getTestID?: (props: { route: BottomNavigationRoute }) => string | undefined;
101
  activeColor?: string;
102
  inactiveColor?: string;
103
  keyboardHidesNavigationBar?: boolean;
104
  barStyle?: StyleProp<ViewStyle>;
105
  labelMaxFontSizeMultiplier?: number;
106
  style?: StyleProp<ViewStyle>;
107
  theme?: ThemeProp;
108
}
109

110
interface BottomNavigationRoute {
111
  key: string;
112
  title?: string;
113
  focusedIcon?: IconSource;
114
  unfocusedIcon?: IconSource;
115
  badge?: string | number | boolean;
116
  accessibilityLabel?: string;
117
  testID?: string;
118
}
119
```
120

121
**Usage Example:**
122

123
```typescript
124
import React, { useState } from 'react';
125
import { BottomNavigation, Text } from 'react-native-paper';
126

127
const MusicRoute = () => <Text>Music</Text>;
128
const AlbumsRoute = () => <Text>Albums</Text>;
129
const RecentsRoute = () => <Text>Recents</Text>;
130

131
function MyBottomNavigation() {
132
  const [index, setIndex] = useState(0);
133
  const [routes] = useState([
134
    { key: 'music', title: 'Music', focusedIcon: 'music' },
135
    { key: 'albums', title: 'Albums', focusedIcon: 'album' },
136
    { key: 'recents', title: 'Recents', focusedIcon: 'history' },
137
  ]);
138

139
  const renderScene = BottomNavigation.SceneMap({
140
    music: MusicRoute,
141
    albums: AlbumsRoute,
142
    recents: RecentsRoute,
143
  });
144

145
  return (
146
    <BottomNavigation
147
      navigationState={{ index, routes }}
148
      onIndexChange={setIndex}
149
      renderScene={renderScene}
150
    />
151
  );
152
}
153
```
154

155
### Drawer
156

157
Drawer navigation components for side navigation.
158

159
```typescript { .api }
160
namespace Drawer {
161
  function Item(props: DrawerItemProps): JSX.Element;
162
  function Section(props: DrawerSectionProps): JSX.Element;
163
  function CollapsedItem(props: DrawerCollapsedItemProps): JSX.Element;
164
}
165

166
interface DrawerItemProps {
167
  label: string;
168
  icon?: IconSource;
169
  active?: boolean;
170
  onPress?: () => void;
171
  accessibilityLabel?: string;
172
  style?: StyleProp<ViewStyle>;
173
  labelStyle?: StyleProp<TextStyle>;
174
  theme?: ThemeProp;
175
}
176

177
interface DrawerSectionProps {
178
  title?: string;
179
  children: React.ReactNode;
180
  showDivider?: boolean;
181
  titleStyle?: StyleProp<TextStyle>;
182
  style?: StyleProp<ViewStyle>;
183
  theme?: ThemeProp;
184
}
185

186
interface DrawerCollapsedItemProps {
187
  focusedIcon?: IconSource;
188
  unfocusedIcon?: IconSource;
189
  label: string;
190
  active?: boolean;
191
  onPress?: () => void;
192
  accessibilityLabel?: string;
193
  style?: StyleProp<ViewStyle>;
194
  theme?: ThemeProp;
195
}
196
```
197

198
**Usage Example:**
199

200
```typescript
201
import React, { useState } from 'react';
202
import { Drawer } from 'react-native-paper';
203

204
function MyDrawer() {
205
  const [active, setActive] = useState('');
206

207
  return (
208
    <Drawer.Section title="Some title">
209
      <Drawer.Item
210
        label="First Item"
211
        active={active === 'first'}
212
        onPress={() => setActive('first')}
213
      />
214
      <Drawer.Item
215
        label="Second Item"
216
        active={active === 'second'}
217
        onPress={() => setActive('second')}
218
      />
219
    </Drawer.Section>
220
  );
221
}
222
```