React-native navigation // move specific Drawer menu to title bar right button and hide the bottom menu which is linked with moved button

I'm using React-Navigation in React-native, and I'm a newbie to this, so I'm facing a number of difficult issues.

I am designing navigations with a mixture of Stack, Bottom and Drawer navigation.

My app has Intro Screen, Dashboard Screen, Profile Screen, Contact Screen.

Example Image

I thought almost successful, but I can't solve the problems below.

1. I want to move the "dashboard" menu(1) in Drawer to drawer title bar right button(2).

2. And I want to get rid of the duplicate "Dashoboard" menu(3) at the bottom.

my code..

// App.js
import React from 'react';
import Main from './components/Main';


class App extends React.Component {

  render() {
    return (
        <Main />
    );
  }

}


// components/Main.js
import Intro from './__intro';
import DrawerNavigator from '../navigation/DrawerNavi';

const Stack = createStackNavigator();

class Main extends Component {
  render() {
    return (
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen
            name='Intro'
            component={Intro}
            options={
              {headerShown: false}
            }
          />
          <Stack.Screen
            name='Index'
            component={DrawerNavigator}
            options={
              {headerShown: false}
            }
          />
        </Stack.Navigator>
      </NavigationContainer>
    )
  }
}

export default Main;


// components/__intro.js
class Intro extends Component {

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.container_child_1}>
          
          <TouchableOpacity
            activeOpacity={0.8}
            style={styles.button}
            onPress={
              () => {
                this.props.navigation.navigate('Index')
              }
            }
          >
            <Text style={styles.text}>Go to Dashboard</Text>
          </TouchableOpacity>
        
        </View>
      </View>
    )
  }
}


// navigation/DrawerNavi.js
import TabNavigator from "./TabNavigator";
import IndexTap from "../components/Index";
import DashBord from "../components/DashBoard";

const Drawer = createDrawerNavigator();

const DrawerNavigator = () => {
  return (
    <Drawer.Navigator>
      <Drawer.Screen
        name="dashboard from drawerNavi"
        component={IndexTap}
      />
      <Drawer.Screen name="Contact" component={Contact} />
    </Drawer.Navigator>
  );
}

export default DrawerNavigator;



// components/Index.js
import DashBoard from './DashBoard';
import Profile from './Profile';

const Tap = createBottomTabNavigator();

class IndexTap extends Component {

  render() {
    return (

      <Tap.Navigator>
        <Tap.Screen
          name="DashBoard"
          component={DashBoard}
          options={{
            headerShown: false,
          ),
          }}
          // initialParams={{ title: 'DashBoard' }}

        />
        <Tap.Screen
          name="Profile"
          component={Profile}
          options={{
            headerShown: false
            // headerTitleAlign: 'center'
          }}
          // initialParams={{ title: 'Profile' }}
        />
      </Tap.Navigator>
    )
  }
}

// components/Contact.js

const Contact = () => {
  return (
    <View style={styles.center}>
      <Text>This is the contact screen</Text>
    </View>
  );
};


// components/Dashboard.js

class DashBoard extends Component {

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.container_child_1}>
          <Text>DashBoard Page</Text>
          
          <TouchableOpacity
            activeOpacity={0.8}
            style={styles.button}
            onPress={
              () => {
                this.props.navigation.navigate('Intro')
              }
            }
          >
            <Text style={styles.text}>Go to the Intro</Text>
          </TouchableOpacity>
        
        </View>
        </View>
    )
  }
}


// components/Profile.js
class Profile extends Component {

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.container_child_1}>
          
          <TouchableOpacity
            activeOpacity={0.8}
            style={styles.button}
            onPress={
              () => {
                this.props.navigation.navigate('DashBoard')
              }
            }
          >
            <Text style={styles.text}>DashBoard</Text>
          </TouchableOpacity>
        
        </View>
        </View>
    )
  }
}

how can I do? Do I need to redesign?