CODEWITHSUNDEEP
reactjsreact-nativemobile
André Santos
André Santos

Reputation: 5

How to hide specific tab with conditional statement React Native

I have a problem, I'm trying to hide my admin screen when the user is not part of the admin team. I made a conditional statement to render the tab only if the teaID is the correct one, and it "kinda" works, as if the id is correct it display as it should, but if the id is different id doesn't display the tab section I coded but still displays a default one. (If i change the style options to none if the id is diferent is does not display but still occupies space and is clickable)

Code:

import { Tabs } from "expo-router";
import { useContext, useEffect, useState } from "react";
import { AuthContext } from "../context/AuthProvider";
import { Redirect } from "expo-router";
import { View, Image } from "react-native";
import icons from "../../constants/icons";
import { getUserData } from "../context/getUserData"; // Import the function

const TabLayout = () => {
const { user, loading } = useContext(AuthContext);
const [userData, setUserData] = useState(null);

useEffect(() => {
  const fetchUserData = async () => {
    if (user?.uid) {
      const data = await getUserData(user.uid);
      setUserData(data);
    }
  };

  fetchUserData();
}, [user]); // Runs when `user` changes
console.log(userData)
if (loading) return <Redirect href="../" />;
if (!user) return <Redirect href="../(auth)/LoginPage" />;

return (
  <Tabs
    screenOptions={{
      tabBarActiveTintColor: "#ffb30f",
      tabBarInactiveTintColor: "#edeff1",
      tabBarStyle: {
        backgroundColor: "#161622",
        borderTopWidth: 1,
        borderTopColor: "#232533",
        height: 60,
        paddingVertical: 5,
      },
    }}
  >
    <Tabs.Screen
      name="HomeScreen"
      options={{
        title: "",
        headerShown: false,
        tabBarIcon: ({ color, focused }) => (
          <View className="mt-[25%] flex items-center justify-center">
            <Image
              source={icons.home}
              resizeMode="contain"
              tintColor={color}
              style={{
                height: focused ? 28 : 24,
                width: focused ? 28 : 24,
              }}
            />
          </View>
        ),
      }}
    />
    <Tabs.Screen
      name="Messages"
      options={{
        title: "",
        headerShown: false,
        tabBarIcon: ({ color, focused }) => (
          <View className="mt-[25%] flex items-center justify-center">
            <Image
              source={icons.message}
              resizeMode="contain"
              tintColor={color}
              style={{
                height: focused ? 28 : 24,
                width: focused ? 28 : 24,
              }}
            />
          </View>
        ),
      }}
    />
    <Tabs.Screen
      name="SocialPage"
      options={{
        title: "",
        headerShown: false,
        tabBarIcon: ({ color, focused }) => (
          <View className="mt-[25%] flex items-center justify-center">
            <Image
              source={icons.camera}
              resizeMode="contain"
              tintColor={color}
              style={{
                height: focused ? 28 : 24,
                width: focused ? 28 : 24,
              }}
            />
          </View>
        ),
      }}
    />
    {/*HEREE------------------------------------------------------------------------------------*/}
    {/* Show AdminPage only if the user is part of the IT team */}
    {userData?.teamID === "pvEK8ULltvSyjP3YonJN" && (
      <Tabs.Screen
        name="AdminPage"
        options={{
          title: "",
          headerShown: false,
          tabBarIcon: ({ color, focused }) => (
            <View className="mt-[25%] flex items-center justify-center">
              <Image
                source={icons.reset}
                resizeMode="contain"
                tintColor={color}
                style={{
                  height: focused ? 28 : 24,  
                  width: focused ? 28 : 24,
                }}
              />
            </View>
          ),
        }}
      />
    )}
  </Tabs>
  
);
};

export default TabLayout;

Tab with default display (when it shouldn't display AdminTab)

I apologize if something is not clear, I'm still new to this development world

Upvotes: 0

Views: 19

Answers (1)

Owen
Owen

Reputation: 28

To hide the Tab, you can set the href property in the options of the Tabs.Screen component to null.

The button will be hidden, but keep in mind the route will still be accessible (from other links in your app, directly typing the link if using web, etc.).

<Tabs.Screen
  options={{
    href: null,
  }}
/>

In your specific example, you can set the href to null if the teamID matches; otherwise, leave it undefined (effectively setting href to its default):

{userData?.teamID === "pvEK8ULltvSyjP3YonJN" && (
      <Tabs.Screen
        name="AdminPage"
        options={{
          href: userData?.teamID === "pvEK8ULltvSyjP3YonJN" ? null : undefined,
          title: "",
          headerShown: false,
          tabBarIcon: ({ color, focused }) => (
            <View className="mt-[25%] flex items-center justify-center">
              <Image
                source={icons.reset}
                resizeMode="contain"
                tintColor={color}
                style={{
                  height: focused ? 28 : 24,  
                  width: focused ? 28 : 24,
                }}
              />
            </View>
          ),
        }}
      />
    )}

Source: https://docs.expo.dev/router/advanced/tabs/#advanced

Upvotes: 0

Related Questions