Adding padding triggers whole Accordion to collapse?

[mdere-unbound]

 render() {
        return (
            <View style={styles.container}>
                <Accordion
                    sections={this.state.sections}
                    activeSections={this.state.activeSections}
                    renderHeader={this._renderHeader}
                    renderContent={this._renderSectionContent}
                    onChange={this._updateSections.bind(this)}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: 'transparent',
      paddingLeft: 15,
      paddingRight: 15,
      paddingTop: 30
    },

So I have the above code embedded into another accordion - but it seems like when I click on the embedded accordion's header it collapses everything incuding the parent accordion....

[mdere-unbound]

I confirmed that if I remove the container styling on the View - it fixes the issue.....why.....?

[mdere-unbound]

I also added it containerStyle Prop of the Accordion and does the same thing?

[iRoachie]

Can you create an example on https://snack.expo.io that reproduces this?

[barclayd]

I can also confirm this issue - adding padding results in a maximum of 1 or 2 headers to be responsive (depending on what is being rendered) compared to if padding is removed - when all headers are responsive