Skip to content

Commit b606414

Browse files
committed
chore: drop support for createMaterialBottomTabNavigator
1 parent 9cfd1f6 commit b606414

File tree

10 files changed

+76
-235
lines changed

10 files changed

+76
-235
lines changed

docs/docs/guides/09-bottom-navigation.md

+36-3
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,39 @@
22
title: Using BottomNavigation with React Navigation
33
---
44

5+
:::caution
6+
`createMaterialBottomTabNavigator` has been deprecated since `[email protected]`. Please use `@react-navigation/bottom-tabs` version `7.x` or higher and combine it with `BottomNavigation.Bar` for a Material Design look.
7+
8+
```js
9+
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
10+
import { BottomNavigation } from 'react-native-paper';
11+
12+
const Tab = createBottomTabNavigator();
13+
14+
function MyTabs() {
15+
return (
16+
<Tab.Navigator
17+
tabBar={({ navigation, state, descriptors, insets }) => (
18+
<BottomNavigation.Bar
19+
...
20+
/>
21+
)}
22+
>
23+
<Tab.Screen name="Home" component={HomeScreen} />
24+
<Tab.Screen name="Profile" component={ProfileScreen} />
25+
</Tab.Navigator>
26+
);
27+
}
28+
```
29+
30+
:::
31+
32+
> 👉 For a complete example please visit `createBottomTabNavigator` [snack](https://snack.expo.dev/@react-native-paper/createbottomtabnavigator-with-bottomnavigationbar).
33+
34+
---
35+
36+
_For projects using `react-native-paper` < `5.14.0` and `react-navigation` < `7.x`, proceed as follows:_
37+
538
A material-design themed tab bar on the bottom of the screen that lets you switch between different routes with animation. Routes are lazily initialized - their screen components are not mounted until they are first focused.
639

740
This wraps the [`BottomNavigation`](https://callstack.github.io/react-native-paper/docs/components/BottomNavigation/) component from `react-native-paper`, however if you [configure the Babel plugin](https://callstack.github.io/react-native-paper/docs/guides/getting-started/), it won't include the whole library in your bundle.
@@ -12,7 +45,7 @@ This wraps the [`BottomNavigation`](https://callstack.github.io/react-native-pap
1245
To use this navigator, ensure that you have [`@react-navigation/native` and its dependencies (follow this guide)](https://reactnavigation.org/docs/getting-started):
1346
:::
1447

15-
> For a complete example please visit `createMaterialBottomTabNavigator` [snack](https://snack.expo.dev/@react-native-paper/creatematerialbottomtabnavigator)
48+
> 👉 For a complete example please visit `createMaterialBottomTabNavigator` [snack](https://snack.expo.dev/@react-native-paper/creatematerialbottomtabnavigator)
1649
1750
## API Definition
1851

@@ -33,7 +66,7 @@ function MyTabs() {
3366
}
3467
```
3568

36-
> For a complete usage guide please visit [Tab Navigation](https://reactnavigation.org/docs/tab-based-navigation/)
69+
> 👉 For a complete usage guide please visit [Tab Navigation](https://reactnavigation.org/docs/tab-based-navigation/)
3770
3871
### Props
3972

@@ -239,4 +272,4 @@ function MyTabs() {
239272
</Tab.Navigator>
240273
);
241274
}
242-
```
275+
```

example/src/ExampleList.tsx

-2
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@ import ListAccordionExample from './Examples/ListAccordionExample';
2828
import ListAccordionExampleGroup from './Examples/ListAccordionGroupExample';
2929
import ListItemExample from './Examples/ListItemExample';
3030
import ListSectionExample from './Examples/ListSectionExample';
31-
import MaterialBottomTabNavigatorExample from './Examples/MaterialBottomTabNavigatorExample';
3231
import MenuExample from './Examples/MenuExample';
3332
import ProgressBarExample from './Examples/ProgressBarExample';
3433
import RadioButtonExample from './Examples/RadioButtonExample';
@@ -80,7 +79,6 @@ export const mainExamples: Record<
8079
listAccordionGroup: ListAccordionExampleGroup,
8180
listSection: ListSectionExample,
8281
listItem: ListItemExample,
83-
materialBottomTabNavigator: MaterialBottomTabNavigatorExample,
8482
menu: MenuExample,
8583
progressbar: ProgressBarExample,
8684
radio: RadioButtonExample,

example/src/Examples/MaterialBottomTabNavigatorExample.tsx

-87
This file was deleted.

package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@
5959
"@callstack/eslint-config": "^13.0.2",
6060
"@commitlint/config-conventional": "^8.3.4",
6161
"@expo/vector-icons": "^14.0.2",
62-
"@react-navigation/native": "^7.1.6",
62+
"@react-navigation/native": "^6.1.2",
6363
"@release-it/conventional-changelog": "^1.1.0",
6464
"@testing-library/jest-native": "^5.4.1",
6565
"@testing-library/react-native": "11.5.0",

src/react-navigation/__tests__/adapter.v6.test.ts

-26
This file was deleted.

src/react-navigation/__tests__/adapter.v7.test.ts

-26
This file was deleted.

src/react-navigation/adapter.ts

-24
This file was deleted.

src/react-navigation/navigators/createMaterialBottomTabNavigator.tsx

+10-26
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,11 @@ import * as React from 'react';
33
import {
44
createNavigatorFactory,
55
DefaultNavigatorOptions,
6-
NavigatorTypeBagBase,
76
ParamListBase,
8-
StaticConfig,
97
TabActionHelpers,
108
TabNavigationState,
119
TabRouter,
1210
TabRouterOptions,
13-
TypedNavigator,
1411
useNavigationBuilder,
1512
} from '@react-navigation/native';
1613

@@ -21,14 +18,11 @@ import type {
2118
} from '../types';
2219
import MaterialBottomTabView from '../views/MaterialBottomTabView';
2320

24-
// Based on: https://github.com/react-navigation/react-navigation/blob/main/packages/bottom-tabs/src/types.tsx#L445-L454
2521
export type MaterialBottomTabNavigatorProps = DefaultNavigatorOptions<
2622
ParamListBase,
27-
undefined,
2823
TabNavigationState<ParamListBase>,
2924
MaterialBottomTabNavigationOptions,
30-
MaterialBottomTabNavigationEventMap,
31-
typeof MaterialBottomTabView
25+
MaterialBottomTabNavigationEventMap
3226
> &
3327
TabRouterOptions &
3428
MaterialBottomTabNavigationConfig;
@@ -70,22 +64,12 @@ function MaterialBottomTabNavigator({
7064
);
7165
}
7266

73-
// Based on: https://github.com/react-navigation/react-navigation/blob/main/packages/material-top-tabs/src/navigators/createMaterialTopTabNavigator.tsx#L65-L86
74-
export default function <
75-
const ParamList extends ParamListBase,
76-
const NavigatorID extends string | undefined,
77-
const TypeBag extends NavigatorTypeBagBase = {
78-
ParamList: ParamList;
79-
NavigatorID: NavigatorID;
80-
State: TabNavigationState<ParamList>;
81-
ScreenOptions: MaterialBottomTabNavigationOptions;
82-
EventMap: MaterialBottomTabNavigationEventMap;
83-
NavigationList: {
84-
[RouteName in keyof ParamList]: MaterialBottomTabNavigatorProps;
85-
};
86-
Navigator: typeof MaterialBottomTabNavigator;
87-
},
88-
const Config extends StaticConfig<TypeBag> = StaticConfig<TypeBag>
89-
>(config?: Config): TypedNavigator<TypeBag, Config> {
90-
return createNavigatorFactory(MaterialBottomTabNavigator)(config);
91-
}
67+
/**
68+
* @deprecated `createMaterialBottomTabNavigator` has been deprecated since `5.14.0`. Please use `@react-navigation/bottom-tabs` version `7.x` or higher instead.
69+
*/
70+
export default createNavigatorFactory<
71+
TabNavigationState<ParamListBase>,
72+
MaterialBottomTabNavigationOptions,
73+
MaterialBottomTabNavigationEventMap,
74+
typeof MaterialBottomTabNavigator
75+
>(MaterialBottomTabNavigator);

src/react-navigation/views/MaterialBottomTabView.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@ import {
77
ParamListBase,
88
Route,
99
TabNavigationState,
10+
useLinkBuilder,
1011
} from '@react-navigation/native';
1112

1213
import BottomNavigation from '../../components/BottomNavigation/BottomNavigation';
1314
import MaterialCommunityIcon from '../../components/MaterialCommunityIcon';
14-
import { useNavigationLink } from '../adapter';
1515
import type {
1616
MaterialBottomTabDescriptorMap,
1717
MaterialBottomTabNavigationConfig,
@@ -29,7 +29,7 @@ export default function MaterialBottomTabView({
2929
descriptors,
3030
...rest
3131
}: Props) {
32-
const buildLink = useNavigationLink();
32+
const buildLink = useLinkBuilder();
3333

3434
return (
3535
<BottomNavigation

0 commit comments

Comments
 (0)