import { StatusBar } from 'expo-status-bar';
import React from 'react';
/*import { StyleSheet, Text, View } from 'react-native';*/
import { NavigationContainer } from '@react-navigation/native';
//import { createStackNavigator } from '@react-navigation/stack';
import TabNavigator from './app/navigation/TabNavigator';

//import About from './app/screen/About';


const Stack = createStackNavigator();

export default function App() {
      return <NavigationContainer>
          <TabNavigator />
          {/*
          <Stack.Navigator>
          <Stack.Screen name="About" component={About} />
          </Stack.Navigator>
          */}
      </NavigationContainer>
}

import { StatusBar } from 'expo-status-bar';
import React, { Component } from 'react';
import { 
  StyleSheet, 
  Text, 
  View,  
  ScrollView, 
  TextInput, 
  Dimensions,
  Image, 
  TouchableOpacity} from 'react-native';

import { Ionicons } from '@expo/vector-icons';
import { Entypo } from '@expo/vector-icons'; 

import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

import Slider from '../components/Slider';
/*import { TouchableOpacity } from 'react-native-gesture-handler';*/

var { height, width } = Dimensions.get("window");

const Home = ({navigation}) => {

     return (
        <ScrollView style={{backgroundColor: '#fff'}}>
         <View style={styles.container}>

           <View style={{width: width, alignItems: "center"}}>
             <Image resizeMode="contain" style={{height : 70, width: width, marginTop: 45}} source={require('../../assets/logo.png')} />
             <Slider />
           </View> 
           
           <View style={styles.categoryContainer}>
             <TouchableOpacity 
                  style={styles.categoryBtn} 
                  onPress={ () => { 
                    console.log('about');
                    navigation.navigate('About'); //ошибка вот здесь выходит
                  }}>
                <View style={styles.categoryIcon}>               
                  <MaterialCommunityIcons name="information-variant" size={35} color="#FF6347" />
                </View>
                <Text style={styles.categoryBtnTxt}>О нас</Text>
             </TouchableOpacity>
             ........

import React from 'react';
import { View, StyleSheet} from 'react-native';
/*import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';*/
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

import Home from '../components/Home';
import Catalog from '../components/Catalog';
import Cart from '../components/Cart';
import Search from '../components/Search';
import Profile from '../components/Profile';

const Tab = createMaterialBottomTabNavigator()

const TabNavigator = () => {
  return <Tab.Navigator 
            initialRouteName="Home"
            activeColor="#e91e63"
            barStyle={{ 
              backgroundColor: '#f0f0f0',
              borderColor: 'red'
            }}
           /*tabBar={(props) => <TabBar {...props}}*/ >
   <Tab.Screen
        name="Home"
        component={Home}
        options={{
          tabBarLabel: 'Главная',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="home" color={color} size={26} />
          ),
        }}
      />
      <Tab.Screen
        name="Catalog"
        component={Catalog}
        options={{
          tabBarLabel: 'Каталог',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="store" color={color} size={26} />
          ),
        }}
      />
      <Tab.Screen
        name="Cart"
        component={Cart}
        options={{
          tabBarLabel: '',        
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="cart" color={color} size={26} />
          ),
        }}
      />
      <Tab.Screen
        name="Search"
        component={Search}
        options={{
          tabBarLabel: 'Поиск',      
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="magnify" color={color} size={26} />
          ),
        }}
      />           
      <Tab.Screen
        name="Profile"
        component={Profile}
        options={{
          tabBarLabel: 'Профиль',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="account" color={color} size={26} />
          ),
        }}
      />
  </Tab.Navigator>
}

const styles = StyleSheet.create({
    container: {}
})

export default TabNavigator;