react navigation drawer sidebar section

in this im trying to make a sidebar for the tablet UI and i wan to try so that if the

Drawer.Screen name = 'A'

the sidebar going to show but if change screen the sidebar did not show on their screen

here is the code of the Routes

const RoutesTablet = () => {


return (
    <Div row flex={1}>
      <StatusBar backgroundColor={COLOR_PRIMARY} />
      <Drawer.Navigator
        initialRouteName="A"
        screenOptions={{
          headerStyle: {
            backgroundColor: COLOR_PRIMARY,
            // height: heightPercentageToDP(8),
          },
        }}
      >
        <Drawer.Screen
          name="A"
          component={Dashboard}
          options={{
            headerTitle: "Bob",
            headerRight: () => (
              <Image
                source={require("..........")}
                w={widthPercentageToDP(25)}
                h={heightPercentageToDP(4)}
                resizeMode="contain"
              />
            ),
          }}
        />
        <Drawer.Screen name="B" component={Sales} />
      </Drawer.Navigator>
      <SideBar />
    </Div>
  );
};

A possible solution is to keep track of the state of NavigationContainer (link to doc) and update the current screen name. We only render SideBar if the current screen name is 'A'.

Demo

Source code

import * as React from 'react';
import {Text, View} from 'react-native';
import {createDrawerNavigator} from '@react-navigation/drawer';
import {NavigationContainer} from '@react-navigation/native';

const A = () => <View />;
const B = () => <View />;

const SideBar = () => (
  <View
    style={{
      position: 'absolute',
      justifyContent: 'space-around',
      right: 0,
      top: '25%',
      width: '10%',
      height: '50%',
      backgroundColor: 'lightblue',
    }}>
    {'sidebar'.split('').map(text => (
      <View key={text} style={{alignItems: 'center'}}>
        <Text>{text}</Text>
      </View>
    ))}
  </View>
);

const Drawer = createDrawerNavigator();

export default function App() {
  const ref = React.useRef(null);
  const [curScreen, setCurScreen] = React.useState('A');

  React.useEffect(() => {
    // Use this to constantly listen to the current state of
    // NavigationContainer and update curScreen
    const unsubscribe = ref.current.addListener('state', e => {
      const lastHist = e.data.state.history.slice(-1)[0];
      if (lastHist.type === 'drawer') {
        setCurScreen('drawer');
      } else {
        setCurScreen(ref.current.getCurrentRoute().name);
      }
    });
    return unsubscribe;
  });

  return (
    <NavigationContainer ref={ref}>
      <Drawer.Navigator initialRouteName="A">
        <Drawer.Screen name="A" component={A} />
        <Drawer.Screen name="B" component={B} />
      </Drawer.Navigator>
      {curScreen === 'A' && <SideBar />}
    </NavigationContainer>
  );
}