React native bottom navigation works on web, not on phone

Im creating a react native expo app. I installed library react native paper

https://callstack.github.io/react-native-paper/getting-started.html

Im trying to use a bottom navigation tab. It shows ok on web, but It doesnt work on mobile (when I try it scanning expo qr).

It just doesnt show, but It runs ok on web.

any idea what could be?

app.js

export default function App() {
  return (
    
    <View style={styles.container}>
      <Context>
    <StatusBar style="light"  />
      <NativeRouter>
      <Navbar/>
    
        
        <Routes>
          
               <Route path="/" element={<Home/>}/>
              
               <Route path="/contact" element={<Contact/>}/>
               <Route path="/about" element={<About/>}/>
               <Route path="/category/:category" element={<Category/>}/>
               <Route path="/detail/:id" element={<Detail/>}/>
               <Route path="/cart" element={<Cart/>}/>
               <Route path="/buy" element={<Buy/>}/>
               <Route path="/products" element={<Buy/>}/>
          </Routes>
          
          
        <MyComponent/>
        </NativeRouter>
        
        
        </Context>
       
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
   
    
    alignItems: 'center',
    justifyContent: 'center',//se ve en medio y porque esta esto

  },
  status:{
    marginBottom:50
  }
});

bottom tab component

import * as React from 'react';
import { BottomNavigation, Text } from 'react-native-paper';

const MusicRoute = () => <Text>Music</Text>;

const AlbumsRoute = () => <Text>Albums</Text>;

const RecentsRoute = () => <Text>Recents</Text>;

const NotificationsRoute = () => <Text>Notifications</Text>;

const MyComponent = () => {
  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    { key: 'music', title: 'Favorites', focusedIcon: 'heart', unfocusedIcon: 'heart-outline'},
    { key: 'albums', title: 'Albums', focusedIcon: 'album' },
    { key: 'recents', title: 'Recents', focusedIcon: 'history' },
    { key: 'notifications', title: 'Notifications', focusedIcon: 'bell', unfocusedIcon: 'bell-outline' },
  ]);

  const renderScene = BottomNavigation.SceneMap({
    music: MusicRoute,
    albums: AlbumsRoute,
    recents: RecentsRoute,
    notifications: NotificationsRoute,
  });

  return (
    <BottomNavigation
      navigationState={{ index, routes }}
      onIndexChange={setIndex}
      renderScene={renderScene}
      style={{width:"100%"}}
    />
  );
};

export default MyComponent;