bottom tab navigation gives a different result than in the doc - react-native

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

Answer 1

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

Answer 2

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

Answer 3

Just set the background color that you want :
<Tab.Navigator
initialRouteName="Home"
activeColor="#f0edf6"
inactiveColor="#3e2465"
barStyle={{ backgroundColor: '#694fad' }}
>
{/* ... */}
</Tab.Navigator>