title: SectionList Component not Scrolling till the end inside Accordion Component
body: <p>I have tried to make SectionList Component inside Accordion Component, List is rendered but I can't scroll it till the end, some item in the last section not appearing. I have tried to remove all styling, wrap the SectionList Component in <code>&lt;View&gt;&lt;/View&gt;</code> and add <code>style={{flex:1}}</code>, but not working. Here is the code example:</p>
  <p>App.js</p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  import { View, Text } from &quot;react-native&quot;;
  import { Picker } from &quot;@react-native-picker/picker&quot;;
  import * as Village from &quot;./mydb&quot;;
  
  export default class App extends Component {
    constructor(props){
      super(props);
      this.state = {
        selected: undefined
      };
    }
    onValueChange(value: string) {
      this.setState({
        selected: value
      });
    }
    renderSelectedItem(){
     switch(this.state.selected){
        case '4001':
          return &lt;Village.A/&gt;
        case '4002':
          return &lt;Village.B/&gt;
        default:
          return null
      }
    }
    render(){
      return(
        &lt;View&gt;
          &lt;Picker
            selectedValue={this.state.selected}
            onValueChange={this.onValueChange.bind(this)}
          &gt;
            &lt;Picker.Item label=&quot;Village A&quot; value='4001'/&gt;
            &lt;Picker.Item label=&quot;Village B&quot; value='4002'/&gt;
          &lt;/Picker&gt;
          {this.renderSelectedItem()}
        &lt;/View&gt;
      )
    }
  }
  </code></pre>
  <p>A.js/B.js</p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  import { StyleSheet, Text, View, SafeAreaView, SectionList, StatusBar } from &quot;react-native&quot;;
  
  const DATA = [
    {
      title: &quot;Main dishes&quot;,
      data: [&quot;Pizza&quot;, &quot;Burger&quot;, &quot;Risotto&quot;, &quot;1&quot;, &quot;2&quot;, &quot;3&quot;, &quot;4&quot;, &quot;5&quot;, &quot;6&quot;, &quot;7&quot;, &quot;8&quot;, &quot;9&quot;, &quot;10&quot;]
    },
    {
      title: &quot;Sides&quot;,
      data: [&quot;French Fries&quot;, &quot;Onion Rings&quot;, &quot;Fried Shrimps&quot;,  &quot;1&quot;, &quot;2&quot;, &quot;3&quot;, &quot;4&quot;, &quot;5&quot;, &quot;6&quot;, &quot;7&quot;, &quot;8&quot;, &quot;9&quot;, &quot;10&quot;]
    },
    {
      title: &quot;Drinks&quot;,
      data: [&quot;Water&quot;, &quot;Coke&quot;, &quot;Beer&quot;,  &quot;1&quot;, &quot;2&quot;, &quot;3&quot;, &quot;4&quot;, &quot;5&quot;, &quot;6&quot;, &quot;7&quot;, &quot;8&quot;, &quot;9&quot;, &quot;10&quot;]
    },
    {
      title: &quot;Desserts&quot;,
      data: [&quot;Cheese Cake&quot;, &quot;Ice Cream&quot;,  &quot;1&quot;, &quot;2&quot;, &quot;3&quot;, &quot;4&quot;, &quot;5&quot;, &quot;6&quot;, &quot;7&quot;, &quot;8&quot;, &quot;9&quot;, &quot;10&quot;]
    }
  ];
  
  const Item = ({ title }) =&gt; (
    &lt;View&gt;
      &lt;Text&gt;{title}&lt;/Text&gt;
    &lt;/View&gt;
  );
  
  export default class A extends Component {
    render() {
      return (
        &lt;SectionList
          sections={DATA}
          keyExtractor={(item, index) =&gt; item + index}
          renderItem={({ item }) =&gt; &lt;Item title={item} /&gt;}
          renderSectionHeader={({ section: { title } }) =&gt; (
            &lt;Text&gt;{title}&lt;/Text&gt;
          )}
        /&gt;
      );
    }
  };
  
  </code></pre>
  <p>when I copied the A.js/B.js code and replace in App.js, it works normally, the problem occured when I render the sectionList Component inside the Accordion Component. how to make the SectionList scroll normally till the end inside the Accordion Component?</p>