Tabs + Modals/Bottom Sheet Modal

[akinwol]

Hi,

I am completely new to react native, just started learning a few days ago. I have a question regarding Tabs and modals.

On my bottom Tabs I have some tabs that navigate to home, profile. I want to have a third tab that is like an action button. Think of it like a button on twitter on instagram that creates a new post. On press of this button I want to trigger a modal/bottom sheet modal. Right now with the file structure, to display an item on a tab, it has to be within the file structure. And when I press the tab it navigates me to the Screen for that tab.

How can I disable this default behaviour and render a separate component ? Ideally on press a bottom sheet modal is displayed on top of whatever existing screen the user is on.

[wcastand]

you can look at the example for expo-router but i think what you would need is to add a root layout as a Stack that let you add Portal for modals.

your app folder would be something like:

app/
  _layout -> Stack
  modal1 -> Stack.Screen {presentationStyle: 'modal'}
  modal2 -> Stack.Screen {presentationStyle: 'modal'}
  (tabs)
    _layout -> Tabs
    tab1 -> Tabs.Screen
    tab2 -> Tabs.Screen
...

and then in your tab layout (if you want the button to be everywhere) can look into adding the Button with the onPress to navigate to the modal screen router.push('/modal1')

they aren't up to date to expo-router v2 but that will give you a good idea on how to organise your app for the different use cases. https://github.com/EvanBacon/expo-router-layouts-example/

but if you started a few days ago, it's going to take a little while to figure it all out :P

[jwparsons]

Hey, did you ever figure out how to do this?

Edit: There's a listener prop that we can use to override the tab bar on press behavior: https://stackoverflow.com/a/76659136.

[sgriff96]

Anyone able to figure this out?

[clustersnake]

I did it by using expo router, just importing it and applying the push method:
``
<Tabs.Screen
name="menu"
options={{
title: "Menu",
tabBarIcon: ({ focused }) => (
<FontAwesome
name="bars"
size={24}
color={
focused
? config.colors.PrimaryColor
: config.colors.SecondaryTextColor
}
/>
),
// href: "/modals/menu",

      }}
      listeners={() => ({
        tabPress: (e) => {
          e.preventDefault()
          router.push("modals/menu") // <-- Here you put the name where the chat component is declared 
        },
      })}
    />

``

[limrik]

Thanks @clustersnake! this solution really helped me

Just wanted to add on that we would have to create an empty function in app/(tabs)/menu.tsx so that expo tabs is able to detect and display your menu tab

export default function MenuScreen() {}

[mfaizanhassan]

Adding a modal to a Stack screen and an open modal button to a Tab screen. Here’s the solution:

1. Add the Modal to the Stack Screen:

   In your Stack screen setup, add the modal like this:

   <Stack.Screen
     options={{ presentation: "transparentModal" }}
     name={Screens.CREATE}
     component={Create}
   />

2. Add the Open Modal Button to Your Tab Screen:

   In your Tab screen setup, include the following code:

   <Tab.Screen
     component={Create}
     listeners={({ navigation }) => ({
       tabPress: (e) => {
         e.preventDefault();
         navigation.navigate(Screens.CREATE);
       },
     })}
     options={{
       tabBarIcon({ focused }) {
         return <SquarePlusFilledSvg height={24} />;
       },
     }}
     name={"TempCreate"}
   />

3. Note:

   Ensure that you name both screens differently to avoid conflicts.

[gusthavosouza]

This does not work, has anyone been able to find a solution?

[limrik]

Hi @gusthavosouza, you can try this solution.

in app/(tabs)/_layout.tsx, define the tab with the listener to redirect to the modal you want to open

      <Tabs.Screen
        name='modal'
        options={{
          tabBarIcon: () => (
            <AntDesign
              size={24}
              name='pluscircle'
              color='#ffffff'
            />
          ),
        }}
        listeners={() => ({
          tabPress: (e) => {
            e.preventDefault();
            router.push('/modal');
          },
        })}
      />

In app/modal.tsx, define the modal you want to open when the tab is selected.

To avoid errors from expo-router, define this in app/(tabs)/modal.tsx

export default function ModalScreen() {}

[gusthavosouza]

@limrik Thanks for the update, I was able to make it work, very similar to your aproach, however, instead of having the modal.tsx under (tabs) I just moved it to an external folder, and had the Stack configuration unrder _layout.tsx. It worked like a charm, thanks for your suggestions that gave me the idea of how to implement it! Thanks!

[mirhadiseyidli]

Hey @gusthavosouza, mind telling us how you accomplished it? I am able to render the stack screen as a tab with the above example but router.push just opens the page without making it modal slide from bottom.

[saike]

<Tabs.Screen
        name="create"
        options={{
          title: 'Create Post',
          tabBarButton: () => <Link href="/(modals)/create-post" asChild>
            <Pressable className='flex items-center justify-center h-full w-full'>
              <Ionicons size={28} name="add" color={Colors[colorScheme ?? 'light'].tint} />
            </Pressable>
          </Link>,
        }}

      />