How to setup Top tabs with expo-router? #294
Replies: 8 comments 7 replies
-
@bhatvikrant Did you get a solution for this. |
Beta Was this translation helpful? Give feedback.
-
Yes, I made use of react-native-tab-view package.
On Tue, 28 Feb 2023 at 2:54 PM, Hudson Luseno ***@***.***> wrote:
@bhatvikrant <https://github.com/bhatvikrant> Did you get a solution for
this.
—
Reply to this email directly, view it on GitHub
<#294 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AMDCPMN5ULT6DKXZGP5WQYDWZW73NANCNFSM6AAAAAAVANQYYM>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
--
Regards,
Vikrant Bhat
Software Engineer, Razorpay
|
Beta Was this translation helpful? Give feedback.
-
Did you manage to use the directory structure to define your routes? Or did you use the library ( Maybe it is possible to use the Or maybe I've missed something on the documentation about the |
Beta Was this translation helpful? Give feedback.
-
Here's what I'm doing, based on this example, but updated a little: import type {ParamListBase, TabNavigationState} from '@react-navigation/native';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
import type {
MaterialTopTabNavigationOptions,
MaterialTopTabNavigationEventMap,
} from '@react-navigation/material-top-tabs';
import {withLayoutContext} from 'expo-router';
const {Navigator} = createMaterialTopTabNavigator();
export const MaterialTopTabs = withLayoutContext<
MaterialTopTabNavigationOptions,
typeof Navigator,
TabNavigationState<ParamListBase>,
MaterialTopTabNavigationEventMap
>(Navigator); Have not tested yet, but I think that's approximately right. |
Beta Was this translation helpful? Give feedback.
-
Take a look to this project, it's from @EvanBacon himself https://github.com/EvanBacon/expo-router-top-tabs |
Beta Was this translation helpful? Give feedback.
-
Hi everyone. I've created a blog on how you can use Material Top Tabs in expo-router |
Beta Was this translation helpful? Give feedback.
-
I've been looking up a way to place the tabs in the main layout file and i found it, if anybody knows a better way, let me know. import { Stack } from "expo-router"
function RootLayout() {
return (
<Stack>
<Stack.Screen redirect name="index"/>
<Stack.Screen name="(tabs)"/>
</Stack>
)
}
export default RootLayout |
Beta Was this translation helpful? Give feedback.
-
Got an implementation that allows us to exclude a tab: import {
createMaterialTopTabNavigator,
MaterialTopTabBar,
MaterialTopTabNavigationEventMap,
MaterialTopTabNavigationOptions,
} from '@react-navigation/material-top-tabs'
import { ParamListBase, TabNavigationState } from '@react-navigation/routers'
import { withLayoutContext } from 'expo-router'
const { Navigator } = createMaterialTopTabNavigator()
export const MaterialTopTabs = withLayoutContext<
MaterialTopTabNavigationOptions & { excludeScreens?: string[] },
typeof Navigator,
TabNavigationState<ParamListBase>,
MaterialTopTabNavigationEventMap
>(Navigator, (options) => {
return options.filter((o) => !o.name || !o.options?.excludeScreens?.includes(o.name))
})
export type TopTabsProps = Omit<Parameters<typeof MaterialTopTabs>[0], 'screenOptions'> & {
screenOptions?: MaterialTopTabNavigationOptions & { excludeScreens?: string[] }
}
export function TopTabs({ ...props }: TopTabsProps) {
const excludeScreens = typeof props.screenOptions === 'object' ? props.screenOptions.excludeScreens : undefined
return (
<MaterialTopTabs
tabBar={({ state, descriptors, ...tabBarProps }) => {
if (!excludeScreens || excludeScreens.length === 0) {
return <MaterialTopTabBar state={state} descriptors={descriptors} {...tabBarProps} />
}
const routeNames = state.routeNames.filter((n) => !excludeScreens.includes(n))
const routes = state.routes.filter((r) => !excludeScreens.includes(r.name))
const stateWithoutExcludedScreens = {
...state,
index: Math.min(routeNames.length - 1, state.index),
routeNames,
routes,
}
return <MaterialTopTabBar state={stateWithoutExcludedScreens} descriptors={descriptors} {...tabBarProps} />
}}
{...props}
/>
)
} usage: export default function MyLayout() {
return (<TopTabs screenOptions={{ excludeScreens: ['screen-I-want-to-exclude'] }} />)
} That's with expo-router 3.4 Edited: update state index. Though it's only a partial solution. Ideally the index would be recalculated based on the original index value of the tab minus each tab removed that was there prior (so something like previousIndex - tabsRemoved) |
Beta Was this translation helpful? Give feedback.
-
How to set up Top tabs with expo-router? A code snippet or docs will be helpful.
A way without using react-navigation directly would be great.
Beta Was this translation helpful? Give feedback.
All reactions