CODEWITHSUNDEEP
scrollviewreact-native
chapinkapa
chapinkapa

Reputation: 2673

React Native: 2 scroll views with 2 sticky headers

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.

How do you get 2 sticky headers?

Two Scroll Views each with a header

My render looks like this:

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

        <View style={styles.row}>
          <View style={[styles.container, { width, marginLeft: 40 }]}>
            {this.generateRows()}
          </View>
        </View>

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

Upvotes: 13

Views: 1695

Answers (1)

narayanan
narayanan

Reputation: 69

Can you try changing the top-level ScrollView to View/FlexBox with flexDirection as 'column'? This will cause the inner ScrollViews to fit into the window size.

Upvotes: 1

Related Questions