bottom tab navigation gives a different result than in the doc

Question

According to this doc with the example

that gives this result :

why do I have always this result, with exactly the same code:

And the highlight on the tap doesn't work as well. I checked all the dependencies and everything, it doesn't change.

Tips: I have the same result as this doc shows, why is that different ?

Here are my dependencies:

"dependencies": {
    "@react-native-async-storage/async-storage": "^1.17.11",
    "@react-navigation/material-bottom-tabs": "^6.2.10",
    "@react-navigation/native": "^6.1.1",
    "@react-navigation/native-stack": "^6.9.7",
    "@react-navigation/stack": "^6.3.10",
    "react": "18.1.0",
    "react-native": "0.70.6",
    "react-native-gesture-handler": "^2.8.0",
    "react-native-paper": "^5.1.0",
    "react-native-safe-area-context": "^4.4.1",
    "react-native-screens": "^3.18.2",
    "react-native-vector-icons": "^9.2.0"
  },

Code in doc and code in example is not same – DinhNguyen Dec 29 '22 at 08:03 — DinhNguyen, Dec 29 '22 at 08:03

score 0 · Answer 1 · answered Dec 29 '22 at 09:40

You have to do some changes for same design. Enable shifting and labeled. Add tabBarColor in each Tab.screen.

function MyTabs() {
  return (
    <Tab.Navigator
      initialRouteName="Feed"
      activeColor="white"
      labelStyle={{ fontSize: 12 }}
      shifting={true}
      labeled={true}
    >
      <Tab.Screen
        name="Feed"
        component={Feed}
        options={{
          tabBarLabel: 'Home',
          tabBarColor: 'red',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="home" color={color} size={26} />
          ),
        }}
      />
      <Tab.Screen
        name="Notifications"
        component={Notifications}
        options={{
          tabBarLabel: 'Updates',
           tabBarColor: 'blue',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="bell" color={color} size={26} />
          ),
        }}
      />
      <Tab.Screen
        name="Profile"
        component={Profile}
        options={{
          tabBarLabel: 'Profile',
          tabBarColor: 'green',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="account" color={color} size={26} />
          ),
        }}
        
      />
    </Tab.Navigator>
  );
}

score 0 · Answer 2 · answered Dec 29 '22 at 10:24

I just changed all version, to previous and its working fine now:

react-native init datingapp --version 0.68.1

npm install @react-navigation/native@6.0.10
npm install react-native-screens@3.13.1
npm install react-native-safe-area-context@4.3.1
npm install react-native-paper@4.12.1
npm install react-native-vector-icons@9.1.0
npm install @react-navigation/material-bottom-tabs@6.2.1
npm install @react-native-async-storage/async-storage
npm install jotai
npm install @react-navigation/native-stack@6.6.2
npm install react-native-gesture-handler@2.6.1
npm install react-native-safe-area-context@4.3.1
npm install react-native-screens

score -1 · Answer 3 · answered Dec 29 '22 at 07:44

-1

Just set the background color that you want :

<Tab.Navigator
initialRouteName="Home"
activeColor="#f0edf6"
inactiveColor="#3e2465"
barStyle={{ backgroundColor: '#694fad' }}
>
 {/* ... */}
</Tab.Navigator>

answered Dec 29 '22 at 07:44

Alija Fajic

556
6
17

bottom tab navigation gives a different result than in the doc

3 Answers3