Search code examples
javascriptandroidreact-nativereact-navigationreact-navigation-v6

React native react-navigation createBottomTabNavigator do not show icons


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>
  );
}

Solution

  • screenOptions={{ tabBarLabelPosition: "beside-icon",tabBarIconStyle: { display: "none" }}}