react navigation drawer sidebar section - react-native

Question

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>
);
};

Answer 1

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>
);
}