Skip to content

Commit 7cd95ab

Browse files
committed
docs: provide proper typings for withLayoutContext
1 parent 4593ac5 commit 7cd95ab

File tree

2 files changed

+33
-9
lines changed

2 files changed

+33
-9
lines changed

docs/docs/docs/guides/usage-with-expo-router.mdx

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,29 @@ First install `@bottom-tabs/react-navigation` which provides a native bottom tab
66

77
<PackageManagerTabs command="install @bottom-tabs/react-navigation" />
88

9-
First, create a custom layout adapter for the native bottom tabs:
9+
Next, create a custom layout adapter for the native bottom tabs using `withLayoutContext` from Expo Router:
1010

1111
```tsx
12-
import { withLayoutContext } from "expo-router";
13-
import { createNativeBottomTabNavigator } from '@bottom-tabs/react-navigation';
14-
15-
export const Tabs = withLayoutContext(
16-
createNativeBottomTabNavigator().Navigator
17-
);
12+
import { withLayoutContext } from 'expo-router';
13+
import {
14+
createNativeBottomTabNavigator,
15+
NativeBottomTabNavigationOptions,
16+
NativeBottomTabNavigationEventMap,
17+
} from '@bottom-tabs/react-navigation';
18+
import { ParamListBase, TabNavigationState } from '@react-navigation/native';
19+
20+
const BottomTabNavigator = createNativeBottomTabNavigator().Navigator;
21+
22+
const Tabs = withLayoutContext<
23+
NativeBottomTabNavigationOptions,
24+
typeof BottomTabNavigator,
25+
TabNavigationState<ParamListBase>,
26+
NativeBottomTabNavigationEventMap
27+
>(BottomTabNavigator);
1828
```
1929

30+
> [!NOTE] Make sure to provide the correct types for the `withLayoutContext` function. Without it screen options won't have proper types.
31+
2032
Then, use the `Tabs` navigator in your app:
2133

2234
```tsx

packages/expo-template/app/(tabs)/_layout.tsx

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,20 @@
11
import React from 'react';
22
import { withLayoutContext } from 'expo-router';
3-
import { createNativeBottomTabNavigator } from '@bottom-tabs/react-navigation';
3+
import {
4+
createNativeBottomTabNavigator,
5+
NativeBottomTabNavigationOptions,
6+
NativeBottomTabNavigationEventMap,
7+
} from '@bottom-tabs/react-navigation';
8+
import { ParamListBase, TabNavigationState } from '@react-navigation/native';
49

5-
const Tabs = withLayoutContext(createNativeBottomTabNavigator().Navigator);
10+
const BottomTabNavigator = createNativeBottomTabNavigator().Navigator;
11+
12+
const Tabs = withLayoutContext<
13+
NativeBottomTabNavigationOptions,
14+
typeof BottomTabNavigator,
15+
TabNavigationState<ParamListBase>,
16+
NativeBottomTabNavigationEventMap
17+
>(BottomTabNavigator);
618

719
export default function TabLayout() {
820
return (

0 commit comments

Comments
 (0)