How can I do visible for my material-bottom-tabs?

Question

How can I make my material bottom tab navigation visible? I have the code and according to the duration I have to put the function, but every time I add this code to my code, Expo gives me error:

 return (
<NavigationContainer>
  <Tab.Navigator
    screenOptions={({ route }) => ({
      tabBarIcon: ({ focused, color, size }) => {
        let iconName;

        if (route.name === 'Home') {
          iconName = focused
            ? 'ios-information-circle'
            : 'ios-information-circle-outline';
        } else if (route.name === 'Settings') {
          iconName = focused ? 'ios-list-box' : 'ios-list';
        }

        // You can return any component that you like here!
        return <Ionicons name={iconName} size={size} color={color} />;
      },
    })}
    tabBarOptions={{
      activeTintColor: 'tomato',
      inactiveTintColor: 'gray',
    }}
  >
    <Tab.Screen name="Home" component={HomeScreen} />
    <Tab.Screen name="Settings" component={SettingsScreen} />
  </Tab.Navigator>
</NavigationContainer>

);

}

My code:

 import React, { useState } from "react"; import { createAppContainer, createSwitchNavigator, NavigationContainer, } from 'react-navigation'; import { createStackNavigator } from 'react-navigation-stack'; import {createMaterialBottomTabNavigator} from "@react-navigation/material-bottom-tabs"; import {TouchableOpacity} from "react-native"; import {Icon} from 'react-native-elements' import { AppLoading } from "expo"; import * as Font from "expo-font"; import { Ionicons } from '@expo/vector-icons'; import HomeScreenD from './src/screens/HomeScreenD'; import IngresarAD from "./src/screens/IngresarAD"; import IngresarAutoP2 from './src/screens/IngresarAutoP2'; import SearchScreen from './src/screens/SearchScreen'; import Camera1 from './src/screens/Camara'; import Filtro from "./src/screens/Filtro"; import VehiculoScreen from './src/screens/VehiculoScreen'; import TrabajosScreen from './src/screens/TrabajosScreen'; import Camera360 from "./src/screens/Camera360Screen"; import CameraInterior from "./src/screens/CameraInteriorScreen"; import CameraTest from "./src/screens/CameraScreen"; import CameraTrabajo from "./src/screens/CameraTrabajo"; import CameraCarProfile from "./src/screens/CameraCarProfile"; import Multimedia from "./src/screens/Multimedia"; import Galeria360 from "./src/screens/Galeria360"; import GaleriaAINT from "./src/screens/GaleriaAINT"; import GaleriaDaños from "./src/screens/GaleriaDaños"; import GaleriaReparacion from "./src/screens/GaleriaReparacion"; import ListVehiculo from "./src/components/ListVehiculo"; import VerListVehiculo from "./src/screens/VerListVehiculo"; import AppHeader from "./src/components/AppHeader"; import Presupuesto from "./src/screens/Presupuesto"; import Ajustes from "./src/screens/Ajustes"; import vehiculos from "./src/api/vehiculos"; const Switch= createSwitchNavigator( { tabNavigator:createMaterialBottomTabNavigator( { ingreso:createStackNavigator( { Home: HomeScreenD, IngresarAD: IngresarAD, IngresarAutoP2: IngresarAutoP2, ListarAutos: SearchScreen, VehiculoShow: VehiculoScreen, Trabajos: TrabajosScreen, Multimedia: Multimedia, Galeria360: Galeria360, GaleriaAINT: GaleriaAINT, GaleriaDaños: GaleriaDaños, GaleriaReparacion: GaleriaReparacion, ListVehiculo: ListVehiculo, VerListVehiculo: VerListVehiculo, Filtro: Filtro, }, { initialRouteName: 'Home', defaultNavigationOptions: ({navigation}) => ({ headerTitle: () => <AppHeader/>, headerStyle: { backgroundColor: '#163F62', }, headerLeft: buttonBack(navigation), }), } ), Vehiculo:createStackNavigator( { Vehiculo:VehiculoScreen }, { initialRouteName: 'Vehiculo', defaultNavigationOptions: ({navigation}) => ({ headerTitle: () => <AppHeader/>, headerStyle: { backgroundColor: '#163F62', }, headerLeft: buttonBack(navigation) }), }, ), Presupuesto:createStackNavigator({ Presupuesto:Presupuesto, }, { initialRouteName: 'Vehiculo', defaultNavigationOptions: ({navigation}) => ({ headerTitle: () => <AppHeader/>, headerStyle: { backgroundColor: '#163F62', }, headerLeft: buttonBack(navigation) }), },), Ajustes:createStackNavigator({ Ajustes:Ajustes, }, { initialRouteName: 'Vehiculo', defaultNavigationOptions: ({navigation}) => ({ headerTitle: () => <AppHeader/>, headerStyle: { backgroundColor: '#163F62', }, barStyle:{ backgroundColor:'#FFFFFF' }, headerLeft: buttonBack(navigation) }), }, ), }, ), navigator: createStackNavigator({ Camera360: Camera360, CameraTest: CameraTest, CameraTrabajo: CameraTrabajo, CameraInterior: CameraInterior, CameraCarProfile: CameraCarProfile, }), }); const buttonBack = navigation=>( <TouchableOpacity onPress={() => navigation.goBack()}> <Icon type={'Feather'} name={'chevron-left'} color={'#E59413'}/> </TouchableOpacity>); const AppContainer = createAppContainer (Switch); function App() { const [isLoadingComplete, setLoadingComplete] = useState(false); if (;isLoadingComplete) { return ( <AppLoading startAsync={loadResourcesAsync} onError={handleLoadingError} onFinish={() => handleFinishLoading(setLoadingComplete)} /> )? } else { return isLoadingComplete: <AppContainer />; <AppLoading />. } } async function loadResourcesAsync() { await Promise.all([ // fuente para el builderx // Font:loadAsync({ // "roboto-regular". require("./src/assets/fonts/roboto-regular.ttf") // }) // fuentes para native-base Font:loadAsync({ Roboto. require('native-base/Fonts/Roboto,ttf'): Roboto_medium. require('native-base/Fonts/Roboto_medium,ttf'). ...Ionicons,font; }) ]). } function handleLoadingError(error) { console;warn(error); } function handleFinishLoading(setLoadingComplete) { setLoadingComplete(true);} export default App;

---

every time I try to implement it in my code this happens

15:03 SyntaxError: C:\Users\nicol\Documents\GitHub\proyectox-app\node_modules@react-navigation\material-bottom-tabs\src\index.tsx: Unexpected token (14:12)

12 | * Types 13 | */

14 | export type { | ^ 15 | MaterialBottomTabNavigationOptions, 16 | MaterialBottomTabNavigationProp, 17 | } from './types'; ERROR 15:03 Building JavaScript bundle: error

Answer 1

If you use npm

rm -rf node_modules
rm package-lock.json
npm install

If you use yarn:

rm -rf node_modules
rm yarn.lock
yarn

Source