diff --git a/.changeset/fresh-pugs-suffer.md b/.changeset/fresh-pugs-suffer.md
new file mode 100644
index 00000000..a49fa68f
--- /dev/null
+++ 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
index 86f2b752..865c8e42 100644
--- 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
-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,
+ 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
index d1d39bd4..e92284f5 100644
--- 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,
+ NativeBottomTabNavigationEventMap
+>(BottomTabNavigator);
export default function TabLayout() {
return (