App3.js

import { View, Text, Button } from "react-native";
import React from "react";
import { Ionicons } from "@expo/vector-icons";

import { NavigationContainer, DefaultTheme } from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { createDrawerNavigator } from "@react-navigation/drawer";

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to setting"
        onPress={() => navigation.navigate("Setting")}
      />
    </View>
  );
}

const Drawer = createDrawerNavigator();

const myTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    primary: "rgb(255,45,85)",
  },
};

function SettingScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>Setting Screen</Text>
      <Button title="Go to home" onPress={() => navigation.navigate("Home")} />
    </View>
  );
}

const Tab = createBottomTabNavigator();
function MyTab() {
  return (
    <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 === 'Setting'){
              iconName = focused ?'ios-list-box':'ios-list'
            }
            //you can return any component that you like here
            return <Ionicons name = {iconName} size = {size} color = {color}/>;
          },
          tabBarActiveTintColor:'tomato',
          tabBarActiveTintColor:'gray',
      })}
    >
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Setting" component={SettingScreen} />
    </Tab.Navigator>
  );
}

function MyDrawer() {
  return (
    <Drawer.Navigator useLegacyImplementation>
      <Drawer.Screen name="Home" component={MyTab} />
      <Drawer.Screen name="Setting" component={SettingScreen} />
    </Drawer.Navigator>
  );
}

const App = () => {
  return (
      <NavigationContainer theme={myTheme}>
    <MyDrawer />
  </NavigationContainer>
);
};

export default App;