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 (