title: How to use ScrollView with nested FlatList?
body: <p>In Home screen, I have 3 FlatList and some other View's 'other data',
  So should I wrap it inside ScrollView that enables me to scroll to see other data and so on,</p>
  <p>But when I Wrap the FlatList's with scrollView I got this warning</p>
  <blockquote>
  <p>VirtualizedLists should never be nested inside plain ScrollViews with
  the same orientation - use another VirtualizedList-backed container
  instead.</p>
  </blockquote>
  <p>So how can I solve this issue without making a header/footer component to FlatList?</p>
  <p><a href="https://snack.expo.io/UBFLbsvzM" rel="nofollow noreferrer">Demo</a> &quot;Note: I don't get a warning in the expo and I don't use it, that's just an example to see live demo&quot;</p>
  <p>here code snippet</p>
  <pre><code>const HomeScreen = () =&gt; {
    const renderServices = ({item, index}) =&gt; {
      return (
        &lt;View style={styles.itemContainer}&gt;
          &lt;View style={styles.serviceImgContainer}&gt;
            &lt;Image
              style={styles.serviceImg}
              source={{
                uri:
                  'https://cdn1.iconfinder.com/data/icons/appliance-1/100/dryer-03-512.png',
              }}
            /&gt;
          &lt;/View&gt;
          &lt;Text&gt;{item.name}&lt;/Text&gt;
        &lt;/View&gt;
      );
    };
    return (
      &lt;View style={styles.container}&gt;
        &lt;ScrollView style={{flex: 1}}&gt;
          &lt;View style={styles.headerContainer}&gt;
            &lt;Text style={styles.headerText}&gt;
               Booking Now!
            &lt;/Text&gt;
            &lt;View style={styles.imgHeaderContainer} /&gt;
          &lt;/View&gt;
          {/* Services */}
          &lt;View style={styles.servicesContainer}&gt;
            &lt;View style={styles.servicesHeader}&gt;
              &lt;Text style={styles.headerTitle}&gt;Services&lt;/Text&gt;
              &lt;TouchableOpacity&gt;
                &lt;Text style={styles.headerTitle}&gt;more&lt;/Text&gt;
              &lt;/TouchableOpacity&gt;
            &lt;/View&gt;
            &lt;FlatList
              scrollEnabled={false}
              data={[
                {id: 0, name: 'service 0', img: 'img.jpg'},
                {id: 1, name: 'service 1', img: 'img.jpg'},
                {id: 2, name: 'service 2', img: 'img.jpg'},
                {id: 3, name: 'service 3', img: 'img.jpg'},
                {id: 4, name: 'service 4', img: 'img.jpg'},
                {id: 5, name: 'service 5', img: 'img.jpg'},
                {id: 6, name: 'service 6', img: 'img.jpg'},
                {id: 7, name: 'service 7', img: 'img.jpg'},
              ]}
              renderItem={renderServices}
              keyExtractor={(item) =&gt; item.id.toString()}
              numColumns={4}
              ItemSeparatorComponent={() =&gt; &lt;View style={styles.separator} /&gt;}
              columnWrapperStyle={styles.columnWrapperStyle}
            /&gt;
          &lt;/View&gt;
  
          {/* FlatList Services 2 */}
          &lt;View style={styles.servicesContainer}&gt;
            &lt;View style={styles.servicesHeader}&gt;
              &lt;Text style={styles.headerTitle}&gt;Services&lt;/Text&gt;
              &lt;TouchableOpacity&gt;
                &lt;Text style={styles.headerTitle}&gt;more&lt;/Text&gt;
              &lt;/TouchableOpacity&gt;
            &lt;/View&gt;
            &lt;FlatList
              scrollEnabled={false}
              data={[
                {id: 0, name: 'service 0', img: 'img.jpg'},
                {id: 1, name: 'service 1', img: 'img.jpg'},
                {id: 2, name: 'service 2', img: 'img.jpg'},
                {id: 3, name: 'service 3', img: 'img.jpg'},
                {id: 4, name: 'service 4', img: 'img.jpg'},
                {id: 5, name: 'service 5', img: 'img.jpg'},
                {id: 6, name: 'service 6', img: 'img.jpg'},
                {id: 7, name: 'service 7', img: 'img.jpg'},
              ]}
              renderItem={renderServices}
              keyExtractor={(item) =&gt; item.id.toString()}
              numColumns={4}
              ItemSeparatorComponent={() =&gt; &lt;View style={styles.separator} /&gt;}
              columnWrapperStyle={styles.columnWrapperStyle}
            /&gt;
          &lt;/View&gt;
  
          {/* FlatList Services 3 .... */} 
              ....
          
          {/* other data */} 
              ....
        &lt;/ScrollView&gt;
      &lt;/View&gt;
    );
  };
  </code></pre>