'How to keep the the accordion Menu expanded when the 'Sub-menu' screen is active in 'react native navigation' drawer?
I have a navigation drawer with contents developed as accordion with menus and submenus. Requirement: To keep the Menu opened if it's submenu is the current screen selected from the navigation drawer and also to give current submenu title color.
I'm using react-native version 0.64.0 and I am new to react-native. So any help is appreciated. Thank you!
This is the code of the NavigationContent.js
function onChangeAccordion(indexesSctiveSections) {
setarrayActiveSectionsAccordion(indexesSctiveSections.includes(undefined) ? [] : indexesSctiveSections)
function renderHeaderAccordion(contentSection, index, isActive, sections) {
return{
...}
function renderContentAccordion(contentSection, index, isActive, sections) {
var arrayContentAccordion = [];
for (var i = 0; i < contentSection.subMenu.length; i++) {
arrayContentAccordion.push(
<TouchableOpacity
style={{ height: 50, paddingHorizontal: 50, flexDirection: 'row', alignItems: 'center' }}
nativeID={contentSection.subMenu[i]}
key={contentSection.subMenu[i]}
onPress={(thisTouchableOpacity) => {
setarrayActiveSectionsAccordion([])
if (thisTouchableOpacity._targetInst.memoizedProps.nativeID == 'CheckIn_CheckOut') {
navigationRef.current.navigate('CheckInOutTabScreen', {
})
navigationRef.current.dispatch(DrawerActions.closeDrawer())
return
}
else if (thisTouchableOpacity._targetInst.memoizedProps.nativeID == 'Penalties') {
navigationRef.current.navigate('drawerNavigator1', {
screen: 'Penalties',
params: {
// someParam: '',
}
})
}
return (arrayContentAccordion)
...
}
return(
<View> ...
..
<Accordion
activeSections={arrayActiveSectionsAccordion}
sections={arrayAccordion}
touchableComponent={TouchableOpacity}
expandMultiple={false}
renderHeader={renderHeaderAccordion}
renderContent={renderContentAccordion}
duration={400}
onChange={onChangeAccordion}
renderAsFlatList={false}
/>
</View>
);
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
