Accordion with ExpandMultiple can only open one section at a time.

[azkahi]

Just as the title says. I have set expandMultiple={true} with the following:

            <Accordion
              sections={dataArray}
              activeSections={this.state.activeSections}
              renderHeader={this.renderHeader}
              renderContent={this.renderSections}
              onChange={this.updateSections}
              expandMultiple={true}
              touchableComponent={TouchableOpacity}
            />

Constructor;

  constructor(props) {
    super(props);
    this.state = {
      activeSections: [],
    };
  }

updateSections function:

  updateSections = (idxSection) => {
    console.log(idxSection);

    const currActiveSections = this.state.activeSections;
    const idxCurrSection = currActiveSections.indexOf(idxSection);

    // Will change the state without needing .setState
    if (idxCurrSection > -1) {
      currActiveSections.splice(idxCurrSection, 1);
    } else {
      currActiveSections.push(idxSection);
    }

    // Just to be safe.
    // I know it's redundant, but it produce no different result when using another approach
    this.setState({ activeSections: currActiveSections});
  }

The idea on updateSections is to add the corresponding section index when it's not in the activeSections array and delete the element if the section index is in the activeSections array. When I try logging the idxSection, it'll return false when a section is closing. Is it supposed to be that way? Or am I misunderstanding something?

Anyway, the main goal that I want to achieve is to open several sections at once and not one section at a time. Setting the expandMultiple to true on Accordion doesn't achieve that. And my updateSections function doesn't produce that, even though the array activeSections in the state has correctly represented opened sections (with the exclusion of the case when a section is closing as mentioned before).

Any help would be appreaciated. Thanks in advance!

[iRoachie]

I think your updateSections code is bit too complex. The onChange callback already passed the updated activeSections array and you only have to set it in your state.

See https://snack.expo.io/@roach_iam/upbeat-chocolates

[azkahi]

Thanks for your reply.

I also initially think that the onChange callback already passed the updated activeSections array. But when I tested it on my application, the passed parameter are:

• the index of the section when the accordion is opened (e.g. 0, 1, etc.) . Or,
• false when the accordion is closed. Thus the implementation of my updateSections. I'm confused as to why the passed parameter is not consistent.

Is this a problem with my version of modules? I'm using "react-native-collapsible": "^0.12.0", "react-native": "0.55.3", "react": "16.3.1",.

[danielsukmana]

Is this a problem with my version of modules? I'm using "react-native-collapsible": "^0.12.0", "react-native": "0.55.3", "react": "16.3.1",.

This seems to be the cause. From what I found, the expandMultiple prop is only supported since version 1.0.0 of react-native-collapsible. Try installing a newer version and see if that solves it.

[azkahi]

Thank you for your reply! 👍 I've changed the version to 1.0.0 and it now works; multiple sections can be opened.