title: React Native: Is there a way to make components scrollable/sticky without using ScrollView?
body: <p>New to react native. Here is what I am trying to do:</p>
  <ol>
  <li>Render a page with three components: top panel, middle row, and content box.</li>
  <li>When the user scrolls down, the top panel is scrolled and disappears, middle row is scrolled but is sticky to the top of the screen, and the content box is scrolled all the way down until the end of the content.</li>
  </ol>
  <p>Below code serves my intention. However, when I use this code, I get warnings about nesting virtualized views.</p>
  <pre><code>return (
      &lt;View style={style.profileContainer}&gt;
          &lt;ScrollView
          stickyHeaderIndices={[1]}
          showsVerticalScrollIndicator={false}
          &gt;
          &lt;TopPanel /&gt; // This is a view component and is scrolled up as the user scrolls down.
          &lt;MiddleRow /&gt;  // This is a view component that is sticky to the top of the screen
          &lt;BottomArray /&gt; //This is a FlatList
          &lt;/ScrollView&gt;
      &lt;/View&gt;
  )
  </code></pre>
  <p>Below code gets rid of the warning but all the scroll/sticky behaviors of the top/middle components disappear. They just remain fixed as the user scrolls down.</p>
  <pre><code>return (
      &lt;View style={style.profileContainer}&gt;
          &lt;SafeAreaView style={{flex:1}}&gt;
          &lt;TopPanel /&gt; // This is a view component and is fixed as the user scrolls down.
          &lt;MiddleRow /&gt;  // This is a view component and is fixed as the user scrolls down.
          &lt;BottomArray /&gt; //This is a FlatList
          &lt;/SafeAreaView&gt;
      &lt;/View&gt;
  )
  </code></pre>
  <p>Is there a way to make the top panel scrollable and middle row sticky without relying on ScrollView? This is one of the key interfaces of the app and I'd like to keep it alive.</p>
  <p>Thanks!</p>