React Native: 2 scroll views with 2 sticky headers : <p>I am trying to create a day-view with times on the left side, and a top header of people. Currently I can get the left OR the top header to stick, but not both.</p>

<p><strong>How do you get 2 sticky headers?</strong></p>

<p><a href="https://i.stack.imgur.com/07CUw.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/07CUw.gif" alt="Two Scroll Views each with a header"></a></p>

<p>My render looks like this:</p>

<pre><code>  &lt;ScrollView style={{height: 600}}&gt;
    &lt;ScrollView horizontal={true}&gt;
      &lt;View style={styles.column}&gt;
        &lt;View style={{ flex: 1, flexDirection: 'row', width}}&gt;
          {header}
        &lt;/View&gt;

        &lt;View style={styles.row}&gt;
          &lt;View style={[styles.container, { width, marginLeft: 40 }]}&gt;
            {this.generateRows()}
          &lt;/View&gt;
        &lt;/View&gt;

      &lt;/View&gt;
    &lt;/ScrollView&gt;
    &lt;View style={{backgroundColor: 'white', position: 'absolute', top: 0, bottom: 0, left: 0, }}&gt;
      &lt;View style={{ flex: 1, flexDirection: 'row'}}&gt;
        &lt;View style={styles.row}&gt;
          &lt;Text&gt;&lt;/Text&gt;
        &lt;/View&gt;
      &lt;/View&gt;
      &lt;View style={{height: 1000, width: 40 }}&gt;
        {this.generateRowLabels()}
      &lt;/View&gt;
    &lt;/View&gt;
  &lt;/ScrollView&gt;
</code></pre>
