React-native-collapsible: Nested Accordion isActive Solution

[Korysam15]

All,

I currently have a partially working solution to having nested Accordions (i.e. an accordion of accordions). The issue I'm currently encountering that is causing the solution to not work is the 'isActive' variable. The PARENT accordion is passing its 'isActive' variable to the CHILD accordion which will not suffice as the CHILD accordions 'isActive' variable can be FALSE while the PARENT accordions 'isActive' variable can be TRUE.

I tried creating a workaround using a state variable that would be updated and got it to work, kind of (notice the chevron icon next to POOL 1 flips from up to down). The issue I am now encountering can be seen below in the following gif:

Notice that when the CHILD accordion is not active and then the PARENT accordion is closed (i.e. not active) and then we re-open the PARENT accordion and try to close the CHILD accordion again, the CHILD accordion disappears. I'm assuming this is a bug in the source code?

Anyways let me know if you need anything from me. I can post my source code if need be.

[ramisalem]

I have the same issue

[httpamit]

const _renderHeader = (section, isActive) => { return ( <View style={styles.header}> <Text style={styles.headerText}>{section.title}</Text> <Icon style={styles.headerIcon} name={isActive ? "md-chevron-up" : "md-chevron-down"} size={25} color="#000" /> </View> ); };

You can update your renderHeader

[Korysam15]

@httpamit thanks for the help. Problem is I am already doing that for both of my accordions. See below:

  _renderHeader(sections, _, isActive) {
    return (
      <View
        style={{flex: 1, flexDirection: 'row', justifyContent: 'space-between', marginTop: 10}}
        transition="backgroundColor">
        <Text style={{fontFamily: 'Avenir Next', fontWeight: 'bold', marginLeft: 10, color: '#000000', fontSize: 24}}>{sections.division}</Text>
        <Icon style={{color: '#ACBDBA', marginTop: 10, marginRight: 10}} size={25} name={isActive ? "chevron-up": "chevron-down"}></Icon>
      </View>
    );
    };

    renderHeaderPool(_this, isActive, sections) {
        return(
            <View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-between', marginTop: 5, marginLeft: 10}} transition="backgroundColor">
                <Text style={{fontFamily: 'Avenir Next', fontWeight: 'bold', marginLeft: 10, color: '#000000', fontSize: 18 }}>{sections.poolTitle}</Text>
                <Icon style={{color: '#ACBDBA', marginTop: 10, marginRight: 10}} size={25} name={isActive ? "chevron-up": "chevron-down"}></Icon>
            </View>
        )
    }

_renderHeader is the parent accordion and _renderHeaderPool is the child

[rajmaxi]

Hi,
I am new to react native and whenever i click on the parent or header of the accorditon, i have received child data properly.
Here my question is i am going to click on more parent receiving same as but again i was revisit the parent means the child opened previously event. How can i rectify this and please give me suggestion on this. thanks for the response in advance.