'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