react-native-collapsible
react-native-collapsible copied to clipboard
Accordion animation slow - possible re render problem
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'}
/>
);
}
}
Hi,
Getting the same issue. Is there a solution to this ?
this accordion is too slow. so i switched to https://github.com/hamidhadi/react-native-collapsible-list
+1 Have anyone found solution/workaround?