Valtio and new tab menu

App.js

@@ -3,6 +3,7 @@ import React, { useState, useRef, useEffect } from 'react';
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { Provider as PaperProvider, DefaultTheme, } from 'react-native-paper';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import Login from "./Views/Login.js"
@@ -18,7 +19,7 @@ import * as Notifications from 'expo-notifications';
 import API from './API.js';
 
 
-const Tab = createMaterialBottomTabNavigator();
+const Tab = createBottomTabNavigator();
 const Stack = createNativeStackNavigator();
 const theme = {
     ...DefaultTheme,
@@ -106,7 +107,8 @@ const MainNavigation = () => {
         <Tab.Navigator initialRouteName="Home"
             activeColor="#0d6efd"
             inactiveColor="#FFFFFF"
-            barStyle={{ backgroundColor: '#000000' }}>
+            barStyle={{ backgroundColor: '#000000' }}
+        >
             <Tab.Screen
                 name="Feed"
                 component={Feed}
@@ -115,13 +117,14 @@ const MainNavigation = () => {
                     tabBarIcon: ({ color }) => (
                         <MaterialIcons name="home" color={color} size={26} />
                     ),
-                    tabBarBadge: false
+                    header: ()=>{<></>},
                 }}
                 listeners={({ navigation, route }) => ({
                     tabPress: e => {
                         navigation.navigate('Feed')
                     },
                 })}
+                
             />
             <Tab.Screen
                 name="Notifications"
@@ -131,7 +134,7 @@ const MainNavigation = () => {
                     tabBarIcon: ({ color }) => (
                         <MaterialIcons name="notifications" color={color} size={26} />
                     ),
-                    tabBarBadge: false
+                    header: ()=>{<></>},
                 }}
             />
             <Tab.Screen
@@ -142,7 +145,7 @@ const MainNavigation = () => {
                     tabBarIcon: ({ color }) => (
                         <MaterialIcons name="search" color={color} size={26} />
                     ),
-                    tabBarBadge: false
+                    header: ()=>{<></>},
                 }}
             />
             <Tab.Screen
@@ -153,7 +156,7 @@ const MainNavigation = () => {
                     tabBarIcon: ({ color }) => (
                         <MaterialIcons name="groups" color={color} size={26} />
                     ),
-                    tabBarBadge: false
+                    header: ()=>{<></>},
                 }}
             />
             <Tab.Screen
@@ -164,7 +167,7 @@ const MainNavigation = () => {
                     tabBarIcon: ({ color }) => (
                         <MaterialIcons name="subscriptions" color={color} size={26} />
                     ),
-                    tabBarBadge: false
+                    header: ()=>{<></>},
                 }}
             />
 
@@ -176,7 +179,7 @@ const MainNavigation = () => {
                     tabBarIcon: ({ color }) => (
                         <MaterialIcons name="logout" color={color} size={26} />
                     ),
-                    tabBarBadge: false
+                    header: ()=>{<></>},
                 }}
             />
         </Tab.Navigator>