Skip to content

fix: fixing MaterialBottomTabNavigator issues #4615

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@
"@callstack/eslint-config": "^13.0.2",
"@commitlint/config-conventional": "^8.3.4",
"@expo/vector-icons": "^14.0.2",
"@react-navigation/native": "^6.1.2",
"@react-navigation/native": "^7.0.14",
"@release-it/conventional-changelog": "^1.1.0",
"@testing-library/jest-native": "^5.4.1",
"@testing-library/react-native": "11.5.0",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,14 @@ import * as React from 'react';
import {
createNavigatorFactory,
DefaultNavigatorOptions,
NavigatorTypeBagBase,
ParamListBase,
StaticConfig,
TabActionHelpers,
TabNavigationState,
TabRouter,
TabRouterOptions,
TypedNavigator,
useNavigationBuilder,
} from '@react-navigation/native';

Expand All @@ -20,9 +23,11 @@ import MaterialBottomTabView from '../views/MaterialBottomTabView';

export type MaterialBottomTabNavigatorProps = DefaultNavigatorOptions<
ParamListBase,
undefined,
TabNavigationState<ParamListBase>,
MaterialBottomTabNavigationOptions,
MaterialBottomTabNavigationEventMap
MaterialBottomTabNavigationEventMap,
typeof MaterialBottomTabView
> &
TabRouterOptions &
MaterialBottomTabNavigationConfig;
Expand Down Expand Up @@ -64,9 +69,21 @@ function MaterialBottomTabNavigator({
);
}

export default createNavigatorFactory<
TabNavigationState<ParamListBase>,
MaterialBottomTabNavigationOptions,
MaterialBottomTabNavigationEventMap,
typeof MaterialBottomTabNavigator
>(MaterialBottomTabNavigator);
export default function <
const ParamList extends ParamListBase,
const NavigatorID extends string | undefined,
const TypeBag extends NavigatorTypeBagBase = {
ParamList: ParamList;
NavigatorID: NavigatorID;
State: TabNavigationState<ParamList>;
ScreenOptions: MaterialBottomTabNavigationOptions;
EventMap: MaterialBottomTabNavigationEventMap;
NavigationList: {
[RouteName in keyof ParamList]: MaterialBottomTabNavigatorProps;
};
Navigator: typeof MaterialBottomTabNavigator;
},
const Config extends StaticConfig<TypeBag> = StaticConfig<TypeBag>
>(config?: Config): TypedNavigator<TypeBag, Config> {
return createNavigatorFactory(MaterialBottomTabNavigator)(config);
}
11 changes: 11 additions & 0 deletions src/react-navigation/utils.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { useLinkBuilder } from '@react-navigation/native';

export const useCompatibleLinkBuilder = () => {
const builder = useLinkBuilder();

if (typeof builder === 'function') {
return builder;
} else {
return builder.buildHref;
}
};
3 changes: 2 additions & 1 deletion src/react-navigation/views/MaterialBottomTabView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import type {
MaterialBottomTabNavigationConfig,
MaterialBottomTabNavigationHelpers,
} from '../types';
import { useCompatibleLinkBuilder } from '../utils';

type Props = MaterialBottomTabNavigationConfig & {
state: TabNavigationState<ParamListBase>;
Expand All @@ -29,7 +30,7 @@ export default function MaterialBottomTabView({
descriptors,
...rest
}: Props) {
const buildLink = useLinkBuilder();
const buildLink = useCompatibleLinkBuilder();

return (
<BottomNavigation
Expand Down
58 changes: 30 additions & 28 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -3863,43 +3863,45 @@ __metadata:
languageName: node
linkType: hard

"@react-navigation/core@npm:^6.4.9":
version: 6.4.9
resolution: "@react-navigation/core@npm:6.4.9"
"@react-navigation/core@npm:^7.3.1":
version: 7.3.1
resolution: "@react-navigation/core@npm:7.3.1"
dependencies:
"@react-navigation/routers": "npm:^6.1.9"
"@react-navigation/routers": "npm:^7.1.2"
escape-string-regexp: "npm:^4.0.0"
nanoid: "npm:^3.1.23"
nanoid: "npm:3.3.8"
query-string: "npm:^7.1.3"
react-is: "npm:^16.13.0"
use-latest-callback: "npm:^0.1.5"
react-is: "npm:^18.2.0"
use-latest-callback: "npm:^0.2.1"
use-sync-external-store: "npm:^1.2.2"
peerDependencies:
react: "*"
checksum: 10c0/31b77d026a6064712ef275e66c891c6eaf82c6494b96391ba839dad99c40dd2635921ebab8af0a4df71042f889d7165695124f751804ce16012182573139c255
react: ">= 18.2.0"
checksum: 10c0/92a3b60a2a63366639f68a59c1c3dae0c00998bd0eef82d26acc2304a42a18e6ab7589ae43ce9362c723c78336f99f88845cd7ce1b1ec8dd3e5c9eb4d793d393
languageName: node
linkType: hard

"@react-navigation/native@npm:^6.1.2":
version: 6.1.7
resolution: "@react-navigation/native@npm:6.1.7"
"@react-navigation/native@npm:^7.0.14":
version: 7.0.14
resolution: "@react-navigation/native@npm:7.0.14"
dependencies:
"@react-navigation/core": "npm:^6.4.9"
"@react-navigation/core": "npm:^7.3.1"
escape-string-regexp: "npm:^4.0.0"
fast-deep-equal: "npm:^3.1.3"
nanoid: "npm:^3.1.23"
nanoid: "npm:3.3.8"
use-latest-callback: "npm:^0.2.1"
peerDependencies:
react: "*"
react: ">= 18.2.0"
react-native: "*"
checksum: 10c0/d1f6bc00782c8c40bc8a471fde7240cab41e627f7e4bba060aff118abc0496df006f2354a6d3a896cfc8048bbacb71eb682677ff9a3b5649e22efbe4b04e6bfe
checksum: 10c0/cba91f3d6f75620e5952b53fa6acb4ba9406c54536416e85802b25c99c008ffdf292b0a2f5212d128a5abfaca578df354d6f2e095df80d7881ac194cacd29cb4
languageName: node
linkType: hard

"@react-navigation/routers@npm:^6.1.9":
version: 6.1.9
resolution: "@react-navigation/routers@npm:6.1.9"
"@react-navigation/routers@npm:^7.1.2":
version: 7.1.2
resolution: "@react-navigation/routers@npm:7.1.2"
dependencies:
nanoid: "npm:^3.1.23"
checksum: 10c0/5b58014cf29bb71c7dc01201e271d55f0ecfe6d38d064179eeff0fc0b5cb739d4d9906eb133f100d25fc674c72c24aa65d5f6bfc3d036d79f7c5d1936391c605
nanoid: "npm:3.3.8"
checksum: 10c0/0d47a021cbad2cf8a0fbcb813ec957063720a4e0a83faaee5bfc1d61047d29f56893d4080450a307b12d5e40b7662963bad8fa455791ec98e71523301decb1ae
languageName: node
linkType: hard

Expand Down Expand Up @@ -11903,12 +11905,12 @@ __metadata:
languageName: node
linkType: hard

"nanoid@npm:^3.1.23":
version: 3.3.6
resolution: "nanoid@npm:3.3.6"
"nanoid@npm:3.3.8":
version: 3.3.8
resolution: "nanoid@npm:3.3.8"
bin:
nanoid: bin/nanoid.cjs
checksum: 10c0/606b355960d0fcbe3d27924c4c52ef7d47d3b57208808ece73279420d91469b01ec1dce10fae512b6d4a8c5a5432b352b228336a8b2202a6ea68e67fa348e2ee
checksum: 10c0/4b1bb29f6cfebf3be3bc4ad1f1296fb0a10a3043a79f34fbffe75d1621b4318319211cd420549459018ea3592f0d2f159247a6f874911d6d26eaaadda2478120
languageName: node
linkType: hard

Expand Down Expand Up @@ -13109,14 +13111,14 @@ __metadata:
languageName: node
linkType: hard

"react-is@npm:^16.13.0, react-is@npm:^16.13.1, react-is@npm:^16.7.0, react-is@npm:^16.8.4":
"react-is@npm:^16.13.1, react-is@npm:^16.7.0, react-is@npm:^16.8.4":
version: 16.13.1
resolution: "react-is@npm:16.13.1"
checksum: 10c0/33977da7a5f1a287936a0c85639fec6ca74f4f15ef1e59a6bc20338fc73dc69555381e211f7a3529b8150a1f71e4225525b41b60b52965bda53ce7d47377ada1
languageName: node
linkType: hard

"react-is@npm:^18.3.1":
"react-is@npm:^18.2.0, react-is@npm:^18.3.1":
version: 18.3.1
resolution: "react-is@npm:18.3.1"
checksum: 10c0/f2f1e60010c683479e74c63f96b09fb41603527cd131a9959e2aee1e5a8b0caf270b365e5ca77d4a6b18aae659b60a86150bb3979073528877029b35aecd2072
Expand Down Expand Up @@ -13167,7 +13169,7 @@ __metadata:
"@callstack/react-theme-provider": "npm:^3.0.9"
"@commitlint/config-conventional": "npm:^8.3.4"
"@expo/vector-icons": "npm:^14.0.2"
"@react-navigation/native": "npm:^6.1.2"
"@react-navigation/native": "npm:^7.0.14"
"@release-it/conventional-changelog": "npm:^1.1.0"
"@testing-library/jest-native": "npm:^5.4.1"
"@testing-library/react-native": "npm:11.5.0"
Expand Down