How can I hide Accordion Content in react-native-collapsible

Question

I am using react-native-collapsible in my application to achieve accordion view.

https://github.com/oblador/react-native-collapsible

It works fine but we got a change in requirement where we do not want the Accordion click functionality i.e the Accordion should not expand on click. I can do it by creating a separate div but I am thinking of a work around of reusing the same react-native-collapsible and achieve the same.

Code for Accordion-

    const SECTIONS = [
      {
        title: 'First',
        content: 'Lorem ipsum...',
      },
      {
        title: 'Second',
        content: 'Lorem ipsum...',
      },
    ];

class AccordionView extends Component {
  state = {
    activeSections: [],
  };


     _renderContent = section => {
        return (
          <View style={styles.content}>
            <Text>{section.content}</Text>
          </View>
        );
      };
}

  render() {
    return (
      <Accordion
        sections={SECTIONS}
        activeSections={this.state.activeSections}
        renderSectionTitle={this._renderSectionTitle}
        renderHeader={this._renderHeader}
        renderContent={this._renderContent}
        onChange={this._updateSections}
      />
    );
  }
}

So, to achieve that, I am trying to remove renderContent function completely from my Accordion but this gives me error -

TypeError: renderContent is not a function

Can someone let me know if there is a way I can hide the the Accordion content while reusing the same codebase. Any help is much appreciated.

Answer 1

So... do you want to hide the accordion, and disable the expand on touch feature, then you don't want an accordion , just use the animate api of react native. However, that module has the disabled property to disable user interaction, and activeSections property to open a section from code like you are doing

<Accordion
        sections={SECTIONS}
        activeSections={this.state.activeSections}
        renderSectionTitle={this._renderSectionTitle}
        renderHeader={this._renderHeader}
        renderContent={this._renderContent}
        onChange={this._updateSections}
        disabled={true} //add this 
        touchableComponent={TouchableWithoutFeedback} //here to disable animation
      />

Is that what you want? it would help if you posted an image or gif example.

EDIT

Yeah, to disable the touch feedback you can use touchablewithoutfeedback in the touchableComponent property (see code avobe). As an alternative you can use this module fork or react-native-collapse-view , wich also offers open and close programatically for individual elements (maybe use a flatlist for multiple). You can use the animate api / layoutanimation api , since you can create your own component and fit it to your needs , you can find more about them here and here, but the module has everything you need for now so i wouldn´t suggest it anymore.