Skip to content

feat: update createNativeBottomTabsNavigator for React Navigation 7 #103

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.

Sign up for GitHub

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

Closed
shovel-kun wants to merge 2 commits into from
Closed

feat: update createNativeBottomTabsNavigator for React Navigation 7 #103

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ffb175f
refactor: update createNativeBottomTabsNavigator for React Navigation 7
shovel-kun Oct 31, 2024
c984473
chore: remove @react-navigation/elements
shovel-kun Oct 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@
"@expo/config-plugins": "^7.0.0 || ^8.0.0",
"@react-native/babel-preset": "0.75.3",
"@react-native/eslint-config": "^0.73.1",
"@react-navigation/native": "^6.1.18",
"@react-navigation/native": "next",
"@types/color": "^3.0.6",
"@types/jest": "^29.5.5",
"@types/react": "^18.2.44",
Expand Down
Binary file added package.tgz
View file
Open in desktop
Binary file not shown.
69 changes: 44 additions & 25 deletions src/react-navigation/navigators/createNativeBottomTabNavigator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
import type {
DefaultNavigatorOptions,
ParamListBase,
TabActionHelpers,
TabNavigationState,
TabRouterOptions,
} from '@react-navigation/native';
import {
TabRouter,
createNavigatorFactory,
type DefaultNavigatorOptions,
type NavigatorTypeBagBase,
type ParamListBase,
type StaticConfig,
type TabActionHelpers,
type TabNavigationState,
TabRouter,
type TabRouterOptions,
type TypedNavigator,
useNavigationBuilder,
useTheme,
} from '@react-navigation/native';
Expand All @@ -17,14 +18,17 @@ import type {
NativeBottomTabNavigationConfig,
NativeBottomTabNavigationEventMap,
NativeBottomTabNavigationOptions,
NativeBottomTabNavigationProp,
} from '../types';
import NativeBottomTabView from '../views/NativeBottomTabView';

export type NativeBottomTabNavigatorProps = DefaultNavigatorOptions<
type Props = DefaultNavigatorOptions<
ParamListBase,
string | undefined,
TabNavigationState<ParamListBase>,
NativeBottomTabNavigationOptions,
NativeBottomTabNavigationEventMap
NativeBottomTabNavigationEventMap,
NativeBottomTabNavigationProp<ParamListBase>
> &
TabRouterOptions &
NativeBottomTabNavigationConfig;
Expand All @@ -34,22 +38,19 @@ function NativeBottomTabNavigator({
initialRouteName,
backBehavior,
children,
layout,
screenListeners,
screenOptions,
tabBarActiveTintColor: customActiveTintColor,
tabBarInactiveTintColor: customInactiveTintColor,
UNSTABLE_getStateForRouteNamesChange,
...rest
}: NativeBottomTabNavigatorProps) {
}: Props) {
const { colors } = useTheme();
const activeTintColor =
customActiveTintColor === undefined
? colors.primary
: customActiveTintColor;

const activeTintColor = customActiveTintColor ?? colors.primary;
const inactiveTintColor =
customInactiveTintColor === undefined
? Color(colors.text).mix(Color(colors.card), 0.5).hex()
: customInactiveTintColor;
customInactiveTintColor ??
Color(colors.text).mix(Color(colors.card), 0.5).hex();

const { state, descriptors, navigation, NavigationContent } =
useNavigationBuilder<
Expand All @@ -63,8 +64,10 @@ function NativeBottomTabNavigator({
initialRouteName,
backBehavior,
children,
layout,
screenListeners,
screenOptions,
UNSTABLE_getStateForRouteNamesChange,
});

return (
Expand All @@ -81,9 +84,25 @@ function NativeBottomTabNavigator({
);
}

export default createNavigatorFactory<
TabNavigationState<ParamListBase>,
NativeBottomTabNavigationOptions,
NativeBottomTabNavigationEventMap,
typeof NativeBottomTabNavigator
>(NativeBottomTabNavigator);
export default function createNativeBottomTabNavigator<
const ParamList extends ParamListBase,
const NavigatorID extends string | undefined = undefined,
const TypeBag extends NavigatorTypeBagBase = {
ParamList: ParamList;
NavigatorID: NavigatorID;
State: TabNavigationState<ParamList>;
ScreenOptions: NativeBottomTabNavigationOptions;
EventMap: NativeBottomTabNavigationEventMap;
NavigationList: {
[RouteName in keyof ParamList]: NativeBottomTabNavigationProp<
ParamList,
RouteName,
NavigatorID
>;
};
Navigator: typeof NativeBottomTabNavigator;
},
const Config extends StaticConfig<TypeBag> = StaticConfig<TypeBag>,
>(config?: Config): TypedNavigator<TypeBag, Config> {
return createNavigatorFactory(NativeBottomTabNavigator)(config);
}
15 changes: 10 additions & 5 deletions src/react-navigation/views/NativeBottomTabView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import type {
ParamListBase,
TabNavigationState,
Route,
import {
type ParamListBase,
type TabNavigationState,
type Route,
CommonActions,
} from '@react-navigation/native';
import type {
NativeBottomTabDescriptorMap,
Expand Down Expand Up @@ -72,7 +73,11 @@ export default function NativeBottomTabView({
type: 'tabPress',
target: route.key,
});
navigation.navigate({ key: route.key, name: route.name, merge: true });

navigation.dispatch({
...CommonActions.navigate(route),
target: state.key,
});
}}
/>
);
Expand Down
57 changes: 54 additions & 3 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3657,6 +3657,23 @@ __metadata:
languageName: node
linkType: hard

"@react-navigation/core@npm:^7.0.0-rc.15":
version: 7.0.0-rc.15
resolution: "@react-navigation/core@npm:7.0.0-rc.15"
dependencies:
"@react-navigation/routers": ^7.0.0-rc.8
escape-string-regexp: ^4.0.0
nanoid: 3.3.7
query-string: ^7.1.3
react-is: ^18.2.0
use-latest-callback: ^0.2.1
use-sync-external-store: ^1.2.2
peerDependencies:
react: "*"
checksum: 611b7a3677ef42782027713d8b6327b9be5cd1554bcda7b6df5c402abebf2281704e59f25907723e578a8ddd5d1e8686d47a1b31a57f363e59ed3670efbd8054
languageName: node
linkType: hard

"@react-navigation/elements@npm:^1.3.31":
version: 1.3.31
resolution: "@react-navigation/elements@npm:1.3.31"
Expand Down Expand Up @@ -3700,6 +3717,22 @@ __metadata:
languageName: node
linkType: hard

"@react-navigation/native@npm:next":
version: 7.0.0-rc.21
resolution: "@react-navigation/native@npm:7.0.0-rc.21"
dependencies:
"@react-navigation/core": ^7.0.0-rc.15
escape-string-regexp: ^4.0.0
fast-deep-equal: ^3.1.3
nanoid: 3.3.7
use-latest-callback: ^0.2.1
peerDependencies:
react: ">= 18.2.0"
react-native: "*"
checksum: 82967af07faaf7e8f3290b13cacec1bcabdcf89c84ae5de83d8770692ccdcc10d8f2efda78bd2508fdb2d7a689a2aec6a1578c653e8c28fef256cbc7d862fdf6
languageName: node
linkType: hard

"@react-navigation/routers@npm:^6.1.9":
version: 6.1.9
resolution: "@react-navigation/routers@npm:6.1.9"
Expand All @@ -3709,6 +3742,15 @@ __metadata:
languageName: node
linkType: hard

"@react-navigation/routers@npm:^7.0.0-rc.8":
version: 7.0.0-rc.8
resolution: "@react-navigation/routers@npm:7.0.0-rc.8"
dependencies:
nanoid: 3.3.7
checksum: cb5e7c0b367b38018588cf8c297271691b6a73e7b8e0f7866b9ec322a52db37b09eb971bd6dfe4069b7eebbfe1ff43a4798dbfc2168deaeef8ac5894828b7d2b
languageName: node
linkType: hard

"@react-navigation/stack@npm:^6.4.1":
version: 6.4.1
resolution: "@react-navigation/stack@npm:6.4.1"
Expand Down Expand Up @@ -12466,7 +12508,7 @@ __metadata:
languageName: node
linkType: hard

"nanoid@npm:^3.1.23, nanoid@npm:^3.3.7":
"nanoid@npm:3.3.7, nanoid@npm:^3.1.23, nanoid@npm:^3.3.7":
version: 3.3.7
resolution: "nanoid@npm:3.3.7"
bin:
Expand Down Expand Up @@ -13708,7 +13750,7 @@ __metadata:
languageName: node
linkType: hard

"react-is@npm:^18.0.0":
"react-is@npm:^18.0.0, react-is@npm:^18.2.0":
version: 18.3.1
resolution: "react-is@npm:18.3.1"
checksum: e20fe84c86ff172fc8d898251b7cc2c43645d108bf96d0b8edf39b98f9a2cae97b40520ee7ed8ee0085ccc94736c4886294456033304151c3f94978cec03df21
Expand Down Expand Up @@ -13771,7 +13813,7 @@ __metadata:
"@expo/config-plugins": ^7.0.0 || ^8.0.0
"@react-native/babel-preset": 0.75.3
"@react-native/eslint-config": ^0.73.1
"@react-navigation/native": ^6.1.18
"@react-navigation/native": next
"@types/color": ^3.0.6
"@types/jest": ^29.5.5
"@types/react": ^18.2.44
Expand Down Expand Up @@ -16666,6 +16708,15 @@ __metadata:
languageName: node
linkType: hard

"use-sync-external-store@npm:^1.2.2":
version: 1.2.2
resolution: "use-sync-external-store@npm:1.2.2"
peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0
checksum: fe07c071c4da3645f112c38c0e57beb479a8838616ff4e92598256ecce527f2888c08febc7f9b2f0ce2f0e18540ba3cde41eb2035e4fafcb4f52955037098a81
languageName: node
linkType: hard

"util-deprecate@npm:^1.0.1, util-deprecate@npm:~1.0.1":
version: 1.0.2
resolution: "util-deprecate@npm:1.0.2"
Expand Down