AppNavigator.js

import React from "react";
import { View, TouchableOpacity, Text, Dimensions } from "react-native";

import {
  Ionicons,
  AntDesign,
  MaterialCommunityIcons,
} from "@expo/vector-icons";

import MoviesScreen from "../screens/MoviesScreen";

import SearchScreen from "../screens/SearchScreen";

import ProfileScreen from "../screens/ProfileScreen";

import {
  createStackNavigator,
} from "@react-navigation/stack";

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

import Colors from "../constants/Colors";

const MyTabBar = ({ state, descriptors, navigation }) => {
  return (
    <View
      style={{
        position: "absolute",
        bottom: Dimensions.get("window").width / 20,
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
        height: 65,
        backgroundColor: "#262626",
        borderRadius: 30,
        width: "80%",
        marginLeft: 40,
        marginRight: 40,
        shadowColor: "#000",
        shadowOffset: {
          width: 1,
          height: 1,
        },
        shadowOpacity: 0.25,
        shadowRadius: 10,
      }}
    >
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key];

        const IconNames = ["medium-monogram", "search1", "man"];

        const isFocused = state.index === index;
        const onPress = () => {
          const event = navigation.emit({
            type: "tabPress",
            target: route.key,
            canPreventDefault: true,
          });

          if (!isFocused && !event.defaultPrevented) {
            navigation.navigate(route.name);
          }
        };

        const onLongPress = () => {
          navigation.emit({
            type: "tabLongPress",
            target: route.key,
          });
        };

        return (
          <TouchableOpacity
            key={index}
            activeOpacity={1}
            accessibilityRole="button"
            accessibilityStates={isFocused ? ["selected"] : []}
            accessibilityLabel={options.tabBarAccessibilityLabel}
            testID={options.tabBarTestID}
            onPress={onPress}
            onLongPress={onLongPress}
            style={{
              width: (Dimensions.get("window").width * 13) / 25 / 2,
              height: 40,
              alignItems: "center",
              justifyContent: "center",
              flex: 1,
              flexDirection: "row",
              fontSize: 15,
            }}
          >
            <AntDesign
              name={IconNames[index]}
              size={25}
              color={isFocused ? Colors.lightblue : Colors.grey}
            />
          </TouchableOpacity>
        );
      })}
    </View>
  );
};

const defaultStackNavigationOptions = {
  headerStyle: {
    backgroundColor: Colors.secondaryColor,
    shadowOpacity: 0,
    shadowOffset: {
      height: 0,
      width: 0,
    },
  },
  headerTitleStyle: {
    fontFamily: "apple-bold",
    fontSize: 20,
  },
  headerTintColor: Colors.lightblue,
  headerBackTitle: "Back",
};

const MoviesScreenStackNavigator = createStackNavigator();

const moviesScreenNavigator = () => {
  return (
    <MoviesScreenStackNavigator.Navigator
      screenOptions={defaultStackNavigationOptions}
    >
      <MoviesScreenStackNavigator.Screen
        name="MovieScreen"
        component={MoviesScreen}
      />
    </MoviesScreenStackNavigator.Navigator>
  );
};

const SearchScreenStackNavigator = createStackNavigator();

const searchScreenNavigator = () => {
  return (
    <SearchScreenStackNavigator.Navigator
      screenOptions={defaultStackNavigationOptions}
    >
      <SearchScreenStackNavigator.Screen
        name="SearchScreen"
        component={SearchScreen}
      />
    </SearchScreenStackNavigator.Navigator>
  );
};

const ProfileScreenStackNavigator = createStackNavigator();

const ProfileScreenNavigator = () => {
  return (
    <ProfileScreenStackNavigator.Navigator
      screenOptions={defaultStackNavigationOptions}
    >
      <ProfileScreenStackNavigator.Screen
        name="ProfileScreen"
        component={ProfileScreen}
      />
    </ProfileScreenStackNavigator.Navigator>
  );
};

const BottomNavigationBar = createBottomTabNavigator();

export const AppNavigator = () => {
  return (
    <BottomNavigationBar.Navigator tabBar={(props) => <MyTabBar {...props} />}>
      <BottomNavigationBar.Screen
        name="MoviesScreenNavigator"
        component={moviesScreenNavigator}
        tabBarOptions={{ showLabel: false }}
        options={{
          tabBarLabel: "movies",
          tabBarIcon: ({ focused }) => (
            <Text
              style={{
                fontFamily: "apple-bold",
                fontSize: focused ? 20 : 15,
                color: focused ? Colors.white : Colors.white,
              }}
            >
              M
            </Text>
          ),
          showLabel: false,
        }}
      />
      <BottomNavigationBar.Screen
        name="SearchScreenNavigator"
        component={searchScreenNavigator}
        options={{
          tabBarLabel: "search",
          tabBarLabel: ({ focused, tintColor: color }) => (
            <MaterialCommunityIcons
              name="human-greeting"
              size={focused ? size + 5 : size}
              color={focused ? Colors.lightblue : Colors.grey}
            />
          ),
        }}
      />

      <BottomNavigationBar.Screen
        name="profileScreenNavigator"
        component={ProfileScreenNavigator}
        options={{
          tabBarLabel: "Profile",
          tabBarIcon: ({ focused, size }) => (
            <MaterialCommunityIcons
              name="human-greeting"
              size={focused ? size + 5 : size}
              color={focused ? Colors.lightblue : Colors.grey}
            />
          ),
        }}
      />
    </BottomNavigationBar.Navigator>
  );
};