0
# React Navigation Integration
1

2
Components and utilities for integrating with React Navigation, including Material bottom tab navigation.
3

4
## Capabilities
5

6
### Material Bottom Tab Navigator
7

8
Creates a Material Design bottom tab navigator for React Navigation.
9

10
```typescript { .api }
11
function createMaterialBottomTabNavigator(): TypedNavigator<ParamListBase, NavigationState, MaterialBottomTabNavigationOptions, MaterialBottomTabNavigationEventMap, MaterialBottomTabNavigationProp<ParamListBase>>;
12

13
interface MaterialBottomTabNavigationOptions {
14
  title?: string;
15
  tabBarIcon?: (props: { focused: boolean; color: string }) => React.ReactNode;
16
  tabBarLabel?: string | ((props: { focused: boolean; color: string }) => React.ReactNode);
17
  tabBarBadge?: string | number | boolean;
18
  tabBarAccessibilityLabel?: string;
19
  tabBarTestID?: string;
20
  tabBarColor?: string;
21
  tabBarStyle?: StyleProp<ViewStyle>;
22
}
23

24
interface MaterialBottomTabNavigationProp<T extends ParamListBase> {
25
  navigate<RouteName extends keyof T>(name: RouteName, params?: T[RouteName]): void;
26
  goBack(): void;
27
  reset(state: PartialState<NavigationState> | NavigationState): void;
28
  setParams(params: Partial<T[keyof T]>): void;
29
  dispatch(action: NavigationAction): void;
30
  isFocused(): boolean;
31
  canGoBack(): boolean;
32
  getId(): string | undefined;
33
  getParent<T = NavigationProp<ParamListBase> | undefined>(id?: string): T;
34
  getState(): NavigationState;
35
}
36

37
interface MaterialBottomTabScreenProps<T extends ParamListBase, K extends keyof T = keyof T> {
38
  navigation: MaterialBottomTabNavigationProp<T>;
39
  route: RouteProp<T, K>;
40
}
41

42
interface MaterialBottomTabNavigationEventMap {
43
  tabPress: { data: undefined; canPreventDefault: true };
44
  tabLongPress: { data: undefined };
45
  focus: { data: undefined };
46
  blur: { data: undefined };
47
  state: { data: { state: NavigationState } };
48
  beforeRemove: { data: { action: NavigationAction }; canPreventDefault: true };
49
}
50
```
51

52
### Material Bottom Tab View
53

54
Direct bottom tab view component without React Navigation integration.
55

56
```typescript { .api }
57
function MaterialBottomTabView(props: MaterialBottomTabViewProps): JSX.Element;
58

59
interface MaterialBottomTabViewProps {
60
  navigationState: {
61
    index: number;
62
    routes: Array<{ key: string; title?: string; icon?: string; badge?: string | number | boolean; color?: string; accessibilityLabel?: string; testID?: string }>;
63
  };
64
  onIndexChange: (index: number) => void;
65
  renderScene: (props: { route: Route; jumpTo: (key: string) => void }) => React.ReactNode;
66
  renderIcon?: (props: { route: Route; focused: boolean; color: string }) => React.ReactNode;
67
  renderLabel?: (props: { route: Route; focused: boolean; color: string }) => React.ReactNode;
68
  renderTouchable?: (props: TouchableProps) => React.ReactNode;
69
  getLabelText?: (props: { route: Route }) => string | undefined;
70
  getAccessibilityLabel?: (props: { route: Route }) => string | undefined;
71
  getTestID?: (props: { route: Route }) => string | undefined;
72
  getBadge?: (props: { route: Route }) => boolean | number | string | undefined;
73
  getColor?: (props: { route: Route }) => string | undefined;
74
  activeColor?: string;
75
  inactiveColor?: string;
76
  keyboardHidesNavigationBar?: boolean;
77
  barStyle?: StyleProp<ViewStyle>;
78
  style?: StyleProp<ViewStyle>;
79
  theme?: ThemeProp;
80
}
81
```
82

83
**Usage Examples:**
84

85
```typescript
86
import React from 'react';
87
import { createMaterialBottomTabNavigator } from 'react-native-paper/react-navigation';
88
import { MaterialBottomTabView } from 'react-native-paper';
89

90
// With React Navigation
91
const Tab = createMaterialBottomTabNavigator();
92

93
function MyTabs() {
94
  return (
95
    <Tab.Navigator
96
      initialRouteName="Home"
97
      activeColor="#e91e63"
98
      barStyle={{ backgroundColor: '#694fad' }}
99
    >
100
      <Tab.Screen
101
        name="Home"
102
        component={HomeScreen}
103
        options={{
104
          tabBarLabel: 'Home',
105
          tabBarIcon: ({ color }) => (
106
            <Icon name="home" color={color} size={26} />
107
          ),
108
        }}
109
      />
110
      <Tab.Screen
111
        name="Notifications"
112
        component={NotificationsScreen}
113
        options={{
114
          tabBarLabel: 'Updates',
115
          tabBarIcon: ({ color }) => (
116
            <Icon name="bell" color={color} size={26} />
117
          ),
118
          tabBarBadge: 3,
119
        }}
120
      />
121
    </Tab.Navigator>
122
  );
123
}
124

125
// Direct Material Bottom Tab View
126
function DirectTabView() {
127
  const [index, setIndex] = React.useState(0);
128
  const [routes] = React.useState([
129
    { key: 'home', title: 'Home', icon: 'home' },
130
    { key: 'notifications', title: 'Notifications', icon: 'bell', badge: 3 },
131
  ]);
132

133
  const renderScene = ({ route, jumpTo }) => {
134
    switch (route.key) {
135
      case 'home':
136
        return <HomeTab jumpTo={jumpTo} />;
137
      case 'notifications':
138
        return <NotificationsTab jumpTo={jumpTo} />;
139
      default:
140
        return null;
141
    }
142
  };
143

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

154
## Types
155

156
```typescript { .api }
157
interface ParamListBase {
158
  [key: string]: object | undefined;
159
}
160

161
interface NavigationState {
162
  key: string;
163
  index: number;
164
  routeNames: string[];
165
  history?: unknown[];
166
  routes: NavigationRoute<string>[];
167
  type: string;
168
  stale: false;
169
}
170

171
interface NavigationRoute<RouteName extends string = string> {
172
  key: string;
173
  name: RouteName;
174
  params?: object;
175
  path?: string;
176
}
177

178
interface NavigationAction {
179
  type: string;
180
  payload?: object;
181
  source?: string;
182
  target?: string;
183
}
184

185
interface RouteProp<ParamList extends ParamListBase, RouteName extends keyof ParamList = keyof ParamList> {
186
  key: string;
187
  name: RouteName;
188
  params: ParamList[RouteName];
189
  path?: string;
190
}
191

192
type TypedNavigator<
193
  ParamList extends ParamListBase,
194
  State extends NavigationState,
195
  ScreenOptions extends {},
196
  EventMap extends EventMapBase,
197
  Navigation extends NavigationProp<ParamList>
198
> = {
199
  Screen: React.ComponentType<{
200
    name: keyof ParamList;
201
    component?: React.ComponentType<any>;
202
    children?: (props: { navigation: Navigation; route: RouteProp<ParamList> }) => React.ReactNode;
203
    options?: ScreenOptions | ((props: { navigation: Navigation; route: RouteProp<ParamList> }) => ScreenOptions);
204
    initialParams?: Partial<ParamList[keyof ParamList]>;
205
    getId?: ({ params }: { params: ParamList[keyof ParamList] }) => string | undefined;
206
  }>;
207
  Navigator: React.ComponentType<{
208
    id?: string;
209
    initialRouteName?: keyof ParamList;
210
    children: React.ReactNode;
211
    screenListeners?: ScreenListeners<ParamList, State>;
212
    screenOptions?: ScreenOptions | ((props: { navigation: Navigation; route: RouteProp<ParamList> }) => ScreenOptions);
213
  } & ExtraNavigatorProps>;
214
};
215
```