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?

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> 

1 Answers

Answers 1

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.

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati