How to Open left side drawer and right side drawer in react native project

I wrote the below code to make multiple side drawer but unluckily I am not able.

Here open the left side drawer easily but the right-side drawer is not open. for Analyze purpose header.js file when I used here onPress={() => navigation.openDrawer()} then open left side drawer and I also used in second drawer element onPress={() => navigation.openDrawer()} also open left ride drawer but I want to open right side drawer.

What should I do?

app.js file:

import * as React from 'react';
import {View, Button,StyleSheet, Alert, Text, ActivityIndicator, Image} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {createDrawerNavigator} from '@react-navigation/drawer';
import DrawerContent from './screens/common/DrawerContent';
import SearchDrawer from './screens/common/SearchDrawer';

import Registration from './screens/authentication/Registration';
import Login from './screens/authentication/Login';
import ForgotPassword from './screens/authentication/ForgotPassword';
import ChangePassword from './screens/authentication/ChangePassword';
import Dashboard from './screens/user/Dashboard';
import Notifications from './screens/user/Notifications';
import ProfileStep from './screens/user';
import Shipment from './screens/user/shipment';
// import SplashScreen from 'react-native-splash-screen';

// import {LogBox} from 'react-native';
import {Provider} from 'react-redux';
import AsyncStorage from '@react-native-community/async-storage';
import {store, getAsyncStorage} from './redux/store';
import messaging from '@react-native-firebase/messaging';

const Stack = createStackNavigator();
const DrawerR = createDrawerNavigator();
const DrawerL = createDrawerNavigator();


function User(props) {
  const [userInfo, setUserInfo] = React.useState('');
  React.useEffect(() => {
    getUserInfo();
  }, []);

  const getUserInfo = async () => {
    let userInfo = await AsyncStorage.getItem('userInfo');
    if (userInfo) {
      store.dispatch(getAsyncStorage());
      userInfo = JSON.parse(userInfo);
      setUserInfo(userInfo);
    }
  };

  return (
    <DrawerL.Navigator 
      drawerContent={(props) => (
        <DrawerContent {...props} size="22" data={userInfo} />
      )}
      // drawerPosition="right"
      // drawerContent={(props) => (
      //   <SearchDrawer {...props} size="22" />
      //  )}
      >
      {props.route.params !== undefined && props.route.params.completed ? (
        <>
          <DrawerL.Screen name="Dashboard" component={Dashboard} />
          <DrawerL.Screen name="ProfileStep" component={ProfileStep} />
        </>
      ) : (
        <>
          <DrawerL.Screen name="ProfileStep" component={ProfileStep} />
          <DrawerL.Screen name="Dashboard" component={Dashboard} />
        </>
      )}
      <DrawerL.Screen name="Shipment" component={Shipment} />
    </DrawerL.Navigator>
  );
}

function User1(props){
  const [userInfo1, setUserInfo1] = React.useState('')
  React.useEffect(() => {
    getUserInfo1();
  }, []);

  const getUserInfo1 = async () => {
    let userInfo1 = await AsyncStorage.getItem('userInfo');
    if (userInfo1) {
      store.dispatch(getAsyncStorage());

      userInfo1 = JSON.parse(userInfo1);
      setUserInfo1(userInfo1);
    }
  };
  return (
    <DrawerR.Navigator  
    drawerPosition="right"
      drawerContent={(props) => (
        <SearchDrawer {...props} size="22" data={userInfo1}/>
       )} 
      >
    </DrawerR.Navigator>
  );
}
function App() {
  React.useEffect(() => {
    const unsubscribe = messaging().onMessage(async (remoteMessage) => {
      Alert.alert('A new FCM message arrived!', JSON.stringify(remoteMessage));
    });

    return unsubscribe;
  }, []);
  return (
    <Provider store={store}>
      <NavigationContainer>
        <Stack.Navigator
          screenOptions={{
            headerShown: false,
          }}>
          <Stack.Screen name="Login" component={Login} />
          <Stack.Screen name="Registration" component={Registration} />
          <Stack.Screen name="ForgotPassword" component={ForgotPassword} />
          <Stack.Screen name="ChangePassword" component={ChangePassword} />
          <Stack.Screen name="User" component={User} />
          <Stack.Screen name="User1" component={User1} />
          <Stack.Screen name="Notifications" component={Notifications} />
        </Stack.Navigator>
      </NavigationContainer>
    </Provider>
  );
}

export default App;

DrawerContent.js

import React,{useEffect} from 'react';
import {View, StyleSheet, Alert, Text, ActivityIndicator, Image} from 'react-native';
import {
  Avatar,
  Title,
  Caption,
  Drawer,
  TouchableRipple,
  Divider, 
  Switch,
} from 'react-native-paper';
import {DrawerContentScrollView, DrawerItem} from '@react-navigation/drawer';
import AsyncStorage from '@react-native-community/async-storage';
import {connect} from 'react-redux';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {setTheme} from './../../redux/actions/config';
import {getThemeColors} from '../../global/themes';
import {API_URL} from './../../global/config';
import { Linking } from 'react-native';
// import {bindActionCreators} from 'redux';

var pkg = require('./../../package.json');

function DrawerContent(props) {
  const [loading, setLoading] = React.useState(false);
  const [profileStatus, setProfileStatus] = React.useState({});
  const [whitelabel, setIfWhiteLabel] = React.useState('')
  // const [isDarkMode, setIsDarkMode] = React.useState(false);

  let userInfo = props.data;

  const logout = () => {
    Alert.alert(
      'Are you sure?',
      'You want to Logout',
      [
        {
          text: 'Cancel',
          style: 'cancel',
        },
        {
          text: 'Yes',
          onPress: () => {
            setLoading(true);
            console.log(`${API_URL}disableDevice`);
            fetch(`${API_URL}disableDevice`, {
              method: 'post',
              body: JSON.stringify({user_id: userInfo.id}),
            })
              .then((res) => res.json())
              .then(async (res) => {
                if (!res.status) {
                  setLoading(false);
                  alert('something went wrong!!');
                } else {
                  try {
                    await AsyncStorage.removeItem('userInfo');
                    await AsyncStorage.removeItem('profileStatus');

                    props.navigation.reset({
                      index: 0,
                      routes: [{name: 'Login'}],
                    });
                  } catch (exception) {
                    setLoading(false);
                    return false;
                  }
                }
              })
              .catch((e) => {
                setLoading(false);
                console.log(e);
              });
          },
        },
      ],
      {cancelable: false},
    );
  };

  const onThemeChange = async () => {
    AsyncStorage.setItem(
      'themeMode',
      props.theme === 'default' ? 'dark' : 'default',
    );
    props.onSelectTheme(props.theme === 'default' ? 'dark' : 'default');

    fetch(`${API_URL}toggleDarkMode`, {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        user_id: userInfo.id,
        dark_mode: props.theme === 'default' ? 1 : 0,
      }),
    })
      .then((res) => res.json())
      .then((res) => {
        console.log(res);
      })
      .catch((err) => {
        console.log(err);
      });
  };

  const {colors} = props;

  React.useEffect(() => {
    var profileStatus = props.profileStatus;

    if (profileStatus) {
      profileStatus = JSON.parse(profileStatus);

      setProfileStatus(profileStatus);
    }
    checkIfWhiteLabel()
  }, [props.profileStatus]);
  useEffect(() => {
    checkIfWhiteLabel()
  }, [])
  const checkIfWhiteLabel = async () =>{
    let iftru = await AsyncStorage.getItem('whiteLabel');
  
    if(iftru == null){
      setIfWhiteLabel('false')
    }else{
      setIfWhiteLabel(iftru)
    }
    
  }
  return (
    <>
      <View style={{flex: 1, backgroundColor: colors.drawerBackground}}>
        <DrawerContentScrollView {...props}>
          <View style={styles.drawerContent}>
          <View style={styles.tinyLogoDiv}>
         <Image
            style={styles.tinyLogo}
            source={require('../../assets/logo.png')}
          />
         </View>
            <TouchableRipple
              style={styles.userInfoSection}
              onPress={() =>
                props.navigation.navigate('ProfileStep', {status: 'TRUE'})
              }
              rippleColor="rgba(0, 0, 0, .32)">
              <View style={{flexDirection: 'row'}}>
                <Avatar.Image
                  source={require('../../assets/avater.png')}
                  size={50} 
                />
                <View style={{marginLeft: 15, flexDirection: 'column'}}>
                  <Title style={styles.title(colors.textColor)}>
                    {profileStatus.username ?? userInfo.name}
                  </Title>
                  <Caption style={styles.caption(colors.textColor)}>
                    {profileStatus.email ?? userInfo.email}
                  </Caption>
                </View>
                <View
                  style={{
                    justifyContent: 'center',
                    marginLeft: 'auto',
                    paddingRight: 7,
                  }}>
                  <Icon
                    name="account-edit"
                    size={25}
                    color={colors.textColor}
                  />
                </View>
              </View>
            </TouchableRipple>
            <Divider />

            <Drawer.Section style={styles.drawerSection}>
              <DrawerItem
                icon={() => (
                  <Icon name="home" size={30} color={colors.textColor} />
                )}
                labelStyle={{color: colors.textColor}}
                label="Home"
                onPress={() => {
                  if (profileStatus.type || profileStatus.type === undefined) {
                    alert('Complete Your profile first');
                  } else {
                    props.navigation.navigate('Dashboard');
                  }
                }}
              />
              <DrawerItem
                icon={() => (
                  <Icon
                    name="text-box-plus"
                    size={30}
                    color={colors.textColor}
                  />
                )}
                label="Parcel"
                labelStyle={{color: colors.textColor}}
                onPress={() => {
                  if (profileStatus.type || profileStatus.type === undefined) {
                    alert('Complete Your profile first');
                  } else {
                    props.navigation.navigate('Shipment');
                  }
                }}
              />
            </Drawer.Section>
          </View>
        </DrawerContentScrollView>
       
        
        <Drawer.Section style={styles.bottomDrawerSection}>
          <DrawerItem
            style={{paddingBottom: 0}}
            icon={() =>
              loading ? (
                <ActivityIndicator size={30} color={colors.primaryColor} />
              ) : (
                <Icon name="exit-to-app" size={30} color={colors.textColor} />
              )
            }
            label={'Logout'}
            labelStyle={{color: colors.textColor}}
            onPress={() => logout()}
          />
        </Drawer.Section>
        <View
          style={{
            marginBottom: 5,
            alignItems: 'center',
          }}>
          <Text style={{opacity: 0.8, color: colors.textColor}}>
            V - {pkg.version}
          </Text>
        </View>
      </View>
    </>
  );
}



const mapStateToProps = (state) => {


  let imagePlaceholder = JSON.parse(state.brand);

  if (imagePlaceholder) {
    imagePlaceholder = imagePlaceholder.default.avatar;
  } else {
    imagePlaceholder = '';
  }

  var theme = getThemeColors(state.theme);
  return {
    theme: state.theme,
    colors: theme,
    profileStatus: state.profileStatus,
    imagePlaceholder: imagePlaceholder,
  };

  // count: state.count,
};

export default connect(mapStateToProps, {
  onSelectTheme: setTheme,
})(DrawerContent);
//

const styles = StyleSheet.create({
  drawerContent: {
    flex: 1,
  },
  userInfoSection: {
    paddingLeft: 20,
    paddingVertical: 10,
  },
  title: (color) => ({
    fontSize: 16,
    marginTop: 3,
    fontWeight: 'bold',
    color: color,
  }),
  caption: (color) => ({
    fontSize: 12,
    lineHeight: 14,
    opacity: 0.8,
    color: color,
    marginLeft:-15,
  }),
  row: {
    marginTop: 20,
    flexDirection: 'row',
    alignItems: 'center',
  },
  section: {
    flexDirection: 'row',
    alignItems: 'center',
    marginRight: 15,
  },
  paragraph: {
    fontWeight: 'bold',
    marginRight: 3,
  },
  drawerSection: {
    marginTop: 15,
  },
  bottomDrawerSection: {
    // marginBottom: 15,
    borderTopColor: '#ccc',
    borderTopWidth: 0.2,
    borderBottomColor: '#ccc',
    borderBottomWidth: 0.2,
  },
  preference: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingVertical: 12,
    paddingHorizontal: 16,
  },
  loading: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    opacity: 0.6,
    justifyContent: 'center',
    alignItems: 'center',
  },
  loadingText: {
    fontSize: 20,
    paddingTop: 20,
    fontWeight: 'bold',
  },
  tinyLogoDiv:{
    // width:100,
  },
    tinyLogo: {
      width: 150,
      height: 50,
      // alignItems:'center',
      marginLeft:70
    },
   
});

SearchDrawer.js

import React from 'react';
import { View, StyleSheet, Text, Button,TextInput } from 'react-native';
import { DrawerContentScrollView} from '@react-navigation/drawer';
import { setTheme } from './../../redux/actions/config';
import { getThemeColors } from '../../global/themes';
import { connect } from 'react-redux';
function SearchDrawer(props) {
 return (
        <>
            <View style={{ flex: 1, backgroundColor: '#ffffff' }}>
                <DrawerContentScrollView {...props}>
                    <View>
                        <Text>This is input Field</Text>
                        <TextInput
                            label='Search here'
                            style={styles.input}
                            placeholder="Search By Order Id" 
                            />
                        <Button
                            onPress={() => alert('This is a button!')}
                            title="Info"
                            color="#fff"
                        />
                    </View>
                </DrawerContentScrollView>
            </View>
        </>
    );
}
const mapStateToProps = (state) => {
     let imagePlaceholder = JSON.parse(state.brand);

    if (imagePlaceholder) {
        imagePlaceholder = imagePlaceholder.default.avatar;
    } else {
        imagePlaceholder = '';
    }

    var theme = getThemeColors(state.theme);
    return {
        theme: state.theme,
        colors: theme,
        profileStatus: state.profileStatus,
        imagePlaceholder: imagePlaceholder,
    };
};

const styles = StyleSheet.create({
    drawerSection: {
        marginTop: 15,
    },
})
export default connect(mapStateToProps, {
    onSelectTheme: setTheme,
})(SearchDrawer);

Header.js

import React from 'react';
import {
  // StyleSheet,
  // TouchableOpacity,
  // TouchableWithoutFeedback,
  Text,
  View, TouchableOpacity,
  AppState, TextInput, StyleSheet
} from 'react-native';
import { DrawerItem } from '@react-navigation/drawer';
import { DrawerActions } from '@react-navigation/native';
import { useNavigation } from '@react-navigation/native';
import { Appbar, Badge } from 'react-native-paper';
// import {colors} from '../../global/themes';
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
import Icon from 'react-native-vector-icons/FontAwesome';
import { connect } from 'react-redux';
import { setTheme } from './../../redux/actions/config';
// import {bindActionCreators} from 'redux';
import { getThemeColors } from '../../global/themes';
// import {useState} from 'react';
import { API_URL } from '../../global/config';
import AsyncStorage from '@react-native-community/async-storage';
import Menu, { MenuItem } from 'react-native-material-menu';
import messaging from '@react-native-firebase/messaging';
import notifee, { EventType } from '@notifee/react-native';

const ContentTitle = ({ title, color }) => (
  <Appbar.Content
    title={
      // <View style={{zIndex: 99999999}}>
      <Text style={{ fontSize: 20, color: color, zIndex: 99999999 }}>
        {' '}
        {title}{' '}
      </Text>
      // </View>
    }
    style={{ marginLeft: -10 }}
  />
);

function Header(props) {
  const navigation = useNavigation();

  console.log('Pera Navigation', navigation)
  
  const { colors } = props;

  const [notificationCount, setNotificationCount] = React.useState(0);
  const [showMenu, setShowMenu] = React.useState(false);
  const [appState, setAppState] = React.useState(AppState.currentState);
  const [actions, setActions] = React.useState([]);
  const menu = React.useRef();


  const getUserId = async () => {
    let userInfo = await AsyncStorage.getItem('userInfo');
    if (userInfo) {
      userInfo = JSON.parse(userInfo);
      return userInfo.id;
    }
  };

  function getNotificationCount() {
    getUserId().then((id) => {
      console.log(`${API_URL}newNotification`);
      fetch(`${API_URL}newNotification`, {
        method: 'post',
        body: JSON.stringify({ user_id: id }),
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
        },
      })
        .then((res) => res.json())
        .then((res) => {
          if (res.status) {
            setNotificationCount(res.notification_count);
          }
        })
        .catch((e) => {
          console.log(e);
        });
    });
  }
  const _handleAppStateChange = (nextAppState) => {
    getNotificationCount();
    setAppState(nextAppState);
  };

  React.useEffect(() => {
    AppState.addEventListener('change', (e) => _handleAppStateChange(e));
    getNotificationCount();
    notifee.createChannel({
      id: 'custom-sound',
      name: 'System Sound',
      sound: 'notification__.mp3',
    });

    notifee.onForegroundEvent(({ type, detail }) => {
      switch (type) {
        case EventType.DISMISSED:
          console.log('User dismissed notification', detail.notification);
          break;
        case EventType.PRESS:
          let count = notificationCount;
          setNotificationCount(0);
          // alert('0 done');
          navigation.navigate('Notifications', {
            count: count,
            screen: ' ',
          });
          break;
      }
    });

    messaging().onMessage(async (remoteMessage) => {
      // console.log('ok oko k');
      await notifee.displayNotification({
        title: remoteMessage.notification.title,
        body: remoteMessage.notification.body,
        android: {
          channelId: 'custom-sound',
        },
      });
      getNotificationCount();
    });

    messaging().onNotificationOpenedApp((remoteMessage) => {
      let count = notificationCount;
      setNotificationCount(0);
      navigation.navigate('Notifications', {
        count: count,
        screen: 'header',
      });
    });
  }, []);

  React.useEffect(() => {
    if (showMenu) {
      menu.current.show();
    }
  }, [showMenu]);

  return (
    <Appbar.Header style={{ backgroundColor: colors.headerColor }}>
      {props.back ? (
        <Appbar.BackAction
          onPress={() => (props.goBack ? props.goBack() : navigation.goBack())}
        />
      ) : (
        <Appbar.Action
          icon="menu"
          onPress={() => navigation.openDrawer()}
          size={28}
          color={colors.textColor}
          style={{ paddingLeft: 3 }}
        />
      )}
      <TouchableOpacity style={styles.searchSection}>
        <TextInput
          style={styles.input}
          placeholder="Search By Order Id"
          onPress={() =>navigation.openDrawer()}
        />
        <Icon style={styles.searchIcon} name="search" size={20} color="#000" />
      </TouchableOpacity>

      {/* <TouchableOpacity onPress={() => navigation.openDrawer()}>
          <Icon style={{marginLeft: 10}} name='menu'/>
        </TouchableOpacity> */}

      {/* <Button title='open the drawer' onPress={this.props.navigation.dispatch(DrawerActions.openDrawer('drawerOpenLeft'))}></Button>
      <Button title='open the drawer right' onPress={this.props.navigation.dispatch(DrawerActions.openDrawer('drawerOpenRight'))}></Button> */}

      <ContentTitle title={props.title} color={colors.textColor} />
      {!props.hideNotification && (
        <View>
          {notificationCount > 0 && (
            <Badge
              visible={true}
              size={16}
              style={{ position: 'absolute', top: 10, right: 7, zIndex: 9999 }}>
              <Text style={{ fontSize: 12 }}>{notificationCount}</Text>
            </Badge>
          )}

          <Appbar.Action
            icon="bell"
            onPress={() => {
              let count = notificationCount;
              setNotificationCount(0);
              navigation.navigate('Notifications', {
                count: count,
                screen: 'header',
              });
            }}
            size={28}
            color={colors.textColor}
            style={{ paddingLeft: 3 }}
          />

        </View>
      )}

      {props.selected && (
        <>
          <Appbar.Action
            icon="delete"
            onPress={() => props.onDeletePress()}
            size={28}
            color={colors.textColor}
            style={{ left: 10 }}
          />
          <Menu
            ref={menu}
            style={{ backgroundColor: colors.secondaryColor }}
            onHidden={() => {
              setShowMenu(false);
            }}
            button={
              <Appbar.Action
                icon="dots-vertical"
                onPress={() => {
                  props.onActionPress().then((res) => {
                    console.log(res);
                    // if (res.status === 'TRUE') {
                    setShowMenu(res.status);
                    setActions(res.actions);
                    // } else {
                    //   setShowMenu(false);
                    // }
                  });
                }}
                size={28}
                color={colors.textColor}
              />
            }>
            {actions.length > 0 &&
              actions.map((item, i) => {
                return (
                  <>
                    {item.statusList !== undefined && (
                      <>
                        <MenuItem style={{ height: 40 }} disabled>
                          <Text style={{ color: colors.textLight }}>
                            {item.text}
                          </Text>
                        </MenuItem>
                        {item.statusList.map((list) => {
                          return (
                            <MenuItem
                              onPress={() => {
                                props.onMenuPress(item.type, list.VALUE);
                                menu.current.hide();
                              }}
                              key={i}>
                              <Text style={{ color: colors.textColor }}>
                                {' '}
                                {list.LABEL}
                              </Text>
                            </MenuItem>
                          );
                        })}
                      </>
                    )}
                  </>
                );
              })}
          </Menu>
        </>
      )}
    </Appbar.Header>
  );
}


const mapStateToProps = (state) => {
  var theme = getThemeColors(state.theme);
  return { colors: theme };
};

export default connect(mapStateToProps, {
  onSelectTheme: setTheme,
})(Header);


const styles = StyleSheet.create({
  searchSection: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  searchIcon: {
    padding: 10,
  },
  input: {
    flex: 1,
    height: 40,
    padding: 10,
    paddingLeft: 0,
    backgroundColor: '#fff',
    color: '#424242',
  },
})

I don't know if I understood well but I need a little help.