skip to Main Content

I would like to remove the icons from the Bottom Tab Navigator, I’ve tried using the tabBarShowIcon flag with both true and false but it doesn’t seem to work.

Editor tells me that this property doesn’t exist.

Can you tell me where I’m wrong?

  "dependencies": {
    "@react-navigation/bottom-tabs": "^6.5.7",
    "@react-navigation/native": "^6.1.6",
    "cheerio": "^1.0.0-rc.12",
    "react": "18.2.0",
    "react-native": "0.71.6",
    "react-native-paper": "^5.7.0",
    "react-native-safe-area-context": "^4.5.1",
    "react-native-screens": "^3.20.0",
    "react-native-super-grid": "^5.0.0",
    "react-native-webview": "^12.0.2"
  }
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        initialRouteName="Home"
        screenOptions={{
          tabBarShowIcon: false,// true
        }}>
        <Tab.Screen
          name="Home"
          children={(navigation) => <HomeScreen navigation={navigation} type={0} />}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

2

Answers


  1. screenOptions={{ tabBarLabelPosition: "beside-icon",tabBarIconStyle: { display: "none" }}}
    
    Login or Signup to reply.
  2. You can use the tabBarIcon option inside the screenOptions prop of Tab.Navigator

    <Tab.Navigator
          screenOptions={{
            tabBarIcon: (props)=>null,
    }}>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search