Accordion animation slow - possible re render problem

[oviedo97fer]

Problem bug:

Everything looks good, but when you click on the header it takes a few seconds to expand the content. I think the problem is because there is a bug re-render

Principal screen:

class ProfessionalSummaryScreen extends PureComponent {
  render() {
      return(
        <AccordionComp sections={this.props.sections} />)
}

Accordion component:

class AccordionComp extends PureComponent {
    state = {
        activeSections: [],
    };
    _renderHeader = (section, index, isActive) => {
        //header comp  
     }
    _renderContent = (section, index) => {
        switch (index) {
            case 0:
                return <ReceivedConsultation metric={section.metric} metricExtended={section.metricExtended} evolution={section.evolution} />
            case 1:
                return <DedicatedTime metric={section.metric} metricExtended={section.metricExtended} evolution={section.evolution} />

            case 2:
                return <AverageTime metricExtended={section.metricExtended} />
            case 3:
                return <PatientAttended metric={section.metric} metricExtended={section.metricExtended} evolution={section.evolution} />

            case 4:
                return <Billed sign={section.sign} metricExtended={section.metricExtended} />

            default:
                <View>
                    <Text>Loading...</Text>
                </View>;
        }
    };
_updateSections = activeSections => {
        this.setState({
            activeSections,
        });
    };
render() {
        const { sections } = this.props;
        return (
            <Accordion
                sections={sections}
                activeSections={this.state.activeSections}
                renderHeader={this._renderHeader}
                renderContent={this._renderContent}
                onChange={this._updateSections}
                sectionContainerStyle={{
                    borderBottomWidth: 1,
                    borderBottomColor: '#bbb',
                }}
                underlayColor={'#ddd'}
            />
        );
    }
}

[DuranMoodley]

Hi,

Getting the same issue. Is there a solution to this ?

[amaraa019]

this accordion is too slow. so i switched to https://github.com/hamidhadi/react-native-collapsible-list

[aithashi]

+1 Have anyone found solution/workaround?