1

I am trying to create an Accordian using the component : from library:'react-native-simple-accordian'. But when the number of accordian headers are more I can't see the ScrollView working correctly.

My code:

<View style={{flex:1}}>
        <ScrollView style={{flex:1}}>
            <View style={styles.container}>
                
                        <SimpleAccordion
                            style= {{
                              borderWidth:1,
                              borderRadius:15,
                              margin:3,
                              padding:5,
                              backgroundColor:'#ffffff'
                            }}
                            sections={sectionData}
                            renderHeader= {this.renderHeader}
                            renderContent={this.renderContent}
                            duration={1000}
                            touchableComponent={TouchableOpacity}
                            onChange={this.onChangeAccordian.bind(this)}
                            activeSection={this.state.open}
                        />
            </View>
        </ScrollView>
        </View>

The styles object is like this:

container: {
      flex: 1,
      justifyContent: 'center',
    },

What styling or positioning am I doing wrong here for ScrollView? react-native

mshikher
  • 174
  • 3
  • 20

1 Answers1

1

You probably need to give style in "contentContainerStyle" prop in case of react-native ScrollView & you may also need to give style property of flexGrow to 1

contentContainerStyle = {{
      flexGrow:1
}}
Pavan Tank
  • 278
  • 1
  • 11
  • I tried using this : But no effect on the result. – mshikher Oct 26 '20 at 03:33
  • just remove SimpleAccordian view for a moment, and give background color to scrollView and look how much area it's taking, when ScrollView takes full screen then after put back your SimpleAccordian view to it's place – Pavan Tank Oct 26 '20 at 03:52