I want to navigate to another page using TouchableOpacity but failed

I want to navigate to another page using TouchableOpacity but failed Navigating to other pages with Tab.Navigator works correctly. I created after that TouchableOpacity. Which is located in the middle of the other buttons and it should navigate to the scanner page Here is my code:

import React from "react";
import { StyleSheet, TouchableOpacity } from "react-native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { NavigationContainer } from "@react-navigation/native";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import MainScreen from "./view/MainPage";
import ProfileScreen from "./view/ProfilePage";
import ScanScreen from "./view/ScanPage";

const Tab = createBottomTabNavigator();

const App = ({ navigation }) => {
  return (
    <>
      <NavigationContainer>
        <Tab.Navigator
          style={styles.tabBar}
          screenOptions={({ route }) => ({
            tabBarIcon: ({ focused, color, size }) => {
              let iconName;

              if (route.name === "main") {
                iconName = focused ? "home" : "home";
              } else if (route.name === "scan") {
                iconName = focused ? "qrcode-scan" : "qrcode-scan";
              } else if (route.name === "profile") {
                iconName = focused ? "account" : "account";
              }

              return (
                <MaterialCommunityIcons
                  name={iconName}
                  size={size}
                  color={color}
                />
              );
            },
            tabBarLabel: "",
            tabBarActiveTintColor: "#1573FE",
            tabBarInactiveTintColor: "gray",
          })}
        >
          <Tab.Screen
            name="main"
            component={MainScreen}
            options={{ headerShown: false }}
          />
         
          <Tab.Screen
            name="profile"
            component={ProfileScreen}
            options={{ headerShown: false }}
          />
        </Tab.Navigator>

        <TouchableOpacity
          style={styles.scanButton}
          onPress={() => navigation.navigate("ScanScreen")}
        >
          <MaterialCommunityIcons name="qrcode-scan" color="white" size={30} />
        </TouchableOpacity>
      </NavigationContainer>
    </>
  );
};

This is what the page where the TouchableOpacity navigate:

const ScanScreen = ({ navigation }) => {
  return (
    <View style={styles.screen}>
      <Text>This is the Scan screen</Text>
    </View>
  );
};

i just wanted to create a button

do you know another way to create a round button?

You need to pass a custom Button/Icon component to tabBarButton prop in options. That's how I handle it.

export const CustomTabBarButton = ({
  children,
  onPress,
}: {
  children: React.ReactNode;
  onPress: (e) => void;
}) => (
  <TouchableOpacity
    style={{
      top: -1,
      right: 9,
    }}
    onPress={onPress}
  >
    <View
      style={{
        width: 80,
        height: 80,
        borderRadius: 35,
        justifyContent: "center",
      }}
    >
      {children}
    </View>
  </TouchableOpacity>
);




  <Tab.Screen
    name={SCREEN_CONFIG.SEARCH}
    component={Search}
    options={{
      headerShown: false,
      title: SCREEN_CONFIG.SEARCH,
      tabBarLabelPosition: "below-icon",
      tabBarButton: props => (
        <CustomTabBarButton
          onPress={e => {
            props.onPress?.(e);
          }}
        >
          <View
            style={{
              backgroundColor: COLORS[theme].TAB_BAR_BG,
              borderRadius: 50,
              width: 100,
              height: 100,
              justifyContent: "center",
              alignItems: "center"
            }}
          >
            <PlusIcon />
          </View>
        </CustomTabBarButton>
      )
    }}
  />