How to setup Top tabs with expo-router?

[bhatvikrant]

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.

[Hudson-AmalembaL]

@bhatvikrant Did you get a solution for this.

[bhatvikrant]

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

[Hudson-AmalembaL]

Thanks. Let me try that out.

[ziongh]

Did you manage to use the directory structure to define your routes? Or did you use the library (react-native-tab-view) defining manually each page?

Maybe it is possible to use the import { Navigator } from 'expo-router'; together with @react-navigation/material-top-tabs or react-native-tab-view to create a custom Tab.

Or maybe I've missed something on the documentation about the import { Tabs } from 'expo-router';, and there is some option to make it top instead of bottom.

[chriszs]

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.

[XavierVilaRubio]

Hi Chris, I've used it and works flawless, the only thing is if I want to hide a route, do you know how can I do it? With expo-router Tabs is very easy setting the href to null, but I haven't been able to figure out how to do it with the TobTabs...

[chriszs]

No idea! If someone figures it out, let us know.

[Aftab3gamersden]

How can I make the Top Tab Scroll upwards whenever I scroll up on the screen.

For example: The YouTube Channel Screen has a header, then below it a similar Top Tab Navigation Bar and then below the bar the content according to the tab of Top Tab Nav. When u scroll on that screen the content and the top tab and the header all move up

[GoldAndLink]

Take a look to this project, it's from @EvanBacon himself https://github.com/EvanBacon/expo-router-top-tabs

[iam-rohid]

Hi everyone. I've created a blog on how you can use Material Top Tabs in expo-router
https://reactnativepro.dev/posts/expo-router-top-tabs

[Matheus8174]

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

[RainPlays09]

Hi Everyone👋👋, If anyone want to use material top tabs in javascript, here's the code, I don't if this will work. btw, I converted it from typescript to jsdoc using ts-to-jsdoc in npm.

/** @typedef {import('@react-navigation/native').ParamListBase} ParamListBase */
/** @typedef {import('@react-navigation/native').TabNavigationState} TabNavigationState */
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { withLayoutContext } from 'expo-router';
const { Navigator } = createMaterialTopTabNavigator();
export const MaterialTopTabs = withLayoutContext(Navigator);