How to redirect to screen without bottom navigation tab in expo using expo-router?

1.2k views Asked by At

Basically I have 4 bottom tabs in my app, and the 3rd button is create feed button where on Press of it I dont want to show the bottom tab on that create feed screen and also in header of that screen I want back button so that I can redirect it back to the screen where the user came from.

So for now I have created 2 folders in my app folder (tabs) and (root) so I have kept my create-feed tab folder inside the tab folder and have created an another create feed screen in root folder. So when the user press on the center create feed button I am redirecting user to the create feed screen so that the screen gets pushed on the route and I also get the back button on the create feed header, but on the press of that back button I am getting back to the empty create feed screen of the tab Instead I want user back on the screen where user came from.

My code looks like below

Create feed (tabs folder)

import { Stack } from "expo-router";
const Layout = () => {return <Stack screenOptions={{ headerBackVisible: false }} />; };
export default Layout;
export default function Page() {     return null; }

create-feed root folder here I have my screen where I post feeds from

my tab

<Tabs.Screen     
    name="create-feed"
     options={{
         href: "/(root)/create-feed" + "/1",
         tabBarIcon: ({ focused }) =>
             focused ? <CreateFeedActive /> : <CreateFeedInactive />     }} />
1

There are 1 answers

2
Hamid Asiabari On BEST ANSWER

The approach you're using may not achieve the desired result. To ensure that when you press the back button, you return to the last tab you came from, you should consider adding a listener within your Tab.Screen. This listener will prevent the tab change and you just navigate to your "New feed" screen.

Here's an example based on your use case:

<Tabs.Screen
    name="three"
    options={{
      title: 'Tab Three',
      tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
    }}
    listeners={() => ({
      tabPress: (e) => {
        e.preventDefault()
        router.push("/newfeed") /// your screen without Tab bar
      },
    })}
  />