Question 33429 in React native Question posted in
The official React Native documentation can be found here.

bottom tab navigation gives a different result than in the doc – React native

According to this doc
with the example

that gives this result :

bottom nav

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

enter image description here

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"
  },
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

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

    react-native init datingapp --version 0.68.1

npm install @react-navigation/[email protected]
npm install [email protected]
npm install [email protected]
npm install [email protected]
npm install [email protected]
npm install @react-navigation/[email protected]
npm install @react-native-async-storage/async-storage
npm install jotai
npm install @react-navigation/[email protected]
npm install [email protected]
npm install [email protected]
npm install react-native-screens

    enter image description here


  2. 0

    Just set the background color that you want :

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

    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>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search