Initial state of Accordion with first section expanded does not show second section header

[flolege]

I want to reach the following: When I first navigate to the screen containing my Accordion, I want to have the first section already opened and the second section collapsed.

I could make it work that the first section is open initially as expected, but I have the problem that the header of the second section is not shown. Only if I click on the first section header to collapse the first section, the second section header is shown.

Here is the code of the component:

`import React, { Component } from 'react'; import {Switch,ScrollView,StyleSheet,Text,View,TouchableOpacity,} from 'react-native'; import * as Animatable from 'react-native-animatable'; import Collapsible from 'react-native-collapsible'; import Accordion from 'react-native-collapsible/Accordion'; import EventList from './EventList';

export default class EventAccordionView extends Component { constructor(props) { super(props); this.state = { activeSections: [0], collapsed: false, token:props.token };
}

toggleExpanded = () => { console.log("toggleExpanded: " , sections); this.setState({ collapsed: !this.state.collapsed }); };

setSections = sections => {
console.log("setSections: " , sections); this.setState({ activeSections: sections.includes(undefined) ? [] : sections, }); };

renderHeader = (section, _, isActive) => { console.log("renderHeader1: " , section); console.log("renderHeader2: " , _); console.log("renderHeader3: " , isActive); return ( <View
style={[styles.header, isActive ? styles.active : styles.inactive]}
> <Text style={styles.headerText}>{section.title}</Text> </View>
); };

renderContent = (section, _, isActive) => { return (
<ScrollView style={{height:"100%"}}> <EventList getCurrent={section.content == 0 }
token={this.props.token} navigation={this.props.navigation} /> </ScrollView>
); }

render() { const { activeSections } = this.state; console.log("render: activeSections: " , activeSections); return ( <View style={styles.container}> <ScrollView contentContainerStyle={{ paddingTop: 0}}>
<Accordion
activeSections={activeSections} sections={[{title: 'Active Events',content: 0,},{title: 'Historic Events',content: 1,}]} touchableComponent={TouchableOpacity} expandMultiple={false} renderHeader={this.renderHeader} renderContent={this.renderContent} duration={100}

        onChange={this.setSections}
      />
    </ScrollView>
  </View>
);

} }

const styles = StyleSheet.create({ container: { flex: 1, height: 40, backgroundColor: '#F5FCFF', paddingTop: 30, }, title: { textAlign: 'center', fontSize: 22, fontWeight: '300', marginBottom: 20, }, header: { backgroundColor: '#F5FCFF', padding: 10, }, headerText: { textAlign: 'center', fontSize: 16, fontWeight: '500', }, content: { padding: 20, backgroundColor: '#fff', height: 40, }, active: { backgroundColor: 'rgba(255,255,255,1)', }, inactive: { backgroundColor: 'rgba(245,252,255,1)', }, selectors: { marginBottom: 10, flexDirection: 'row', justifyContent: 'center', }, selector: { backgroundColor: '#F5FCFF', padding: 10, }, activeSelector: { fontWeight: 'bold', }, selectTitle: { fontSize: 14, fontWeight: '500', padding: 10, }, multipleToggle: { flexDirection: 'row', justifyContent: 'center', marginVertical: 30, alignItems: 'center', }, multipleToggle__title: { fontSize: 16, marginRight: 8, }, });`

I want to achieve that the second section header is initially shown under the expanded first section.

[flolege]

It seems it has to do with ScrollView style={{height:"100%"} in the renderContent function. This setting pushes the second section header down, out of the screen.

But if I change the height in any way, then the content of the first section is not shown correctly anymore - especially after pull to refresh (see my other opened issue #274