docs: provide proper typings for withLayoutContext (#270)

callstackincubator · Jan 30, 2025 · 7a79a7f · 7a79a7f
1 parent 4fa80c2
commit 7a79a7f
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 9 deletions.
diff --git a/.changeset/fresh-pugs-suffer.md b/.changeset/fresh-pugs-suffer.md
@@ -0,0 +1,5 @@
+---
+'@bottom-tabs/expo-template': patch
+---
+
+fix: provide proper typings for withLayoutContext
diff --git a/docs/docs/docs/guides/usage-with-expo-router.mdx b/docs/docs/docs/guides/usage-with-expo-router.mdx
@@ -6,17 +6,29 @@ First install `@bottom-tabs/react-navigation` which provides a native bottom tab
 
 <PackageManagerTabs command="install @bottom-tabs/react-navigation" />
 
-First, create a custom layout adapter for the native bottom tabs:
+Next, create a custom layout adapter for the native bottom tabs using `withLayoutContext` from Expo Router:
 
 ```tsx
-import { withLayoutContext } from "expo-router";
-import { createNativeBottomTabNavigator } from '@bottom-tabs/react-navigation';
-
-export const Tabs = withLayoutContext(
-  createNativeBottomTabNavigator().Navigator
-);
+import { withLayoutContext } from 'expo-router';
+import {
+  createNativeBottomTabNavigator,
+  NativeBottomTabNavigationOptions,
+  NativeBottomTabNavigationEventMap,
+} from '@bottom-tabs/react-navigation';
+import { ParamListBase, TabNavigationState } from '@react-navigation/native';
+
+const BottomTabNavigator = createNativeBottomTabNavigator().Navigator;
+
+const Tabs = withLayoutContext<
+  NativeBottomTabNavigationOptions,
+  typeof BottomTabNavigator,
+  TabNavigationState<ParamListBase>,
+  NativeBottomTabNavigationEventMap
+>(BottomTabNavigator);
 ```
 
+> [!NOTE] Make sure to provide the correct types for the `withLayoutContext` function. Without it screen options won't have proper types.
+
 Then, use the `Tabs` navigator in your app:
 
 ```tsx

diff --git a/packages/expo-template/app/(tabs)/_layout.tsx b/packages/expo-template/app/(tabs)/_layout.tsx
@@ -1,8 +1,20 @@
 import React from 'react';
 import { withLayoutContext } from 'expo-router';
-import { createNativeBottomTabNavigator } from '@bottom-tabs/react-navigation';
+import {
+  createNativeBottomTabNavigator,
+  NativeBottomTabNavigationOptions,
+  NativeBottomTabNavigationEventMap,
+} from '@bottom-tabs/react-navigation';
+import { ParamListBase, TabNavigationState } from '@react-navigation/native';
 
-const Tabs = withLayoutContext(createNativeBottomTabNavigator().Navigator);
+const BottomTabNavigator = createNativeBottomTabNavigator().Navigator;
+
+const Tabs = withLayoutContext<
+  NativeBottomTabNavigationOptions,
+  typeof BottomTabNavigator,
+  TabNavigationState<ParamListBase>,
+  NativeBottomTabNavigationEventMap
+>(BottomTabNavigator);
 
 export default function TabLayout() {
   return (