react-native android nested scrollview and listvie

Question

In react-native android, when we have nested scrollview and listview, then the control is not being passed from scrollview to listview and vice-versa..

https://www.youtube.com/watch?v=oC2iHhw3Ddk this is the link to the interaction that I am trying to achieve in a video clip. So, I am using scrollview for parent scroll and listview for the childscroll.. scrollview should have the control until the listview doesnot reach the top, as the listview reaches the top it should have the control, and the view should stick on top. I have tried to make it as part of listview header, but the stickiness that i wanted to achieve did not work. Also, I have tried to use onScroll on parent scrollview and when it reaches a particular value i want to disable it and enable the listview scrolling.For that I tried, to pass onStartShouldSetResponder, onMoveShouldSetResponder as props, set and their values, as state variables. But, onStartShouldSetResponder, onMoveShouldSetResponder donot respond with scrollview and listview. Please tell me how can I achieve this interaction.

<View style={{flex:1}}>
        <ScrollView showsVerticalScrollIndicator = {true}
            onResponderTerminationRequest={(evt) =>true}           
            onStartShouldSetResponderCapture={ (evt) => false}                      
            onMoveShouldSetResponderCapture={ (evt) => false}>
            <View style={{flex:1}}>
                <View style={[styles.coverpicwrapr]}>
                  <Image style={styles.coverpic} source={{uri: 'coverpic'}}/>
                </View>
                <View  style={[styles.tagfullwrapr, styles.borderBottomThick]}>
                  <View  style={[styles.title, styles.explore]}>
                    <View style={[styles.smlimgoutline]}>
                     <View style={[styles.smlimgwrapr]}>
                      <Image style={styles.smlimg} source={{uri: 'explore'}}/>
                     </View> 
                    </View>
                    <View style={[styles.tagWrapr]}>
                       <View><Text style={[styles.tagTitle]}>Explore</Text></View>
                       <View><Text style={[styles.tagDes]}>By your mood or prefrence</Text></View>
                    </View>
                  </View>
                  <View style={[styles.optionsBlock]}>
                    <View style={[styles.optionsRow]}>
                        <TouchableWithoutFeedback onPress={this.gotoLunchPage}>
                          <Image style={styles.optionsPic} source={{uri: 'lunch'}}/>
                        </TouchableWithoutFeedback>   
                           <Image style={styles.optionsPic} source={{uri: 'delivery'}}/>
                    </View>
                    <View style={[styles.optionsRow]}>
                        <Image style={styles.optionsPic} source={{uri: 'dinner'}}/>
                        <Image style={styles.optionsPic} source={{uri: 'breakfast'}}/>
                    </View>
                    <View style={[styles.optionsRow]}>
                        <Image style={styles.optionsPic} source={{uri: 'drinks'}}/>
                        <Image style={styles.optionsPic} source={{uri: 'cafes'}}/>
                    </View>
                    <View style={[styles.optionsRow]}>
                        <Image style={styles.optionsPic} source={{uri: 'luxury'}}/>
                        <Image style={styles.optionsPic} source={{uri: 'northindian'}}/>
                    </View>
                  </View>
                </View>  
                <View  style={[styles.title, styles.orderonline, styles.borderBottomThick]}>
                  <View style={[styles.smlimgoutline]}>
                   <View style={[styles.smlimgwrapr]}>
                    <Image style={styles.smlimg} source={{uri: 'orderonline'}}/>
                   </View> 
                  </View>
                  <View style={[styles.tagWrapr]}>
                     <View><Text style={[styles.tagTitle]}>Order Online</Text></View>
                     <View><Text style={[styles.tagDes]}>From restaurants that deliver to you.</Text></View>
                  </View>
                  <View style={[styles.rightIcon]}>
                    <Icon name="ios-arrow-forward" size={25} color='#A4A4A4'/>                      
                  </View>
                </View>
                <View  style={[styles.title, styles.nearby, styles.borderBottomThick]}>
                  <View style={[styles.smlimgoutline]}>
                   <View style={[styles.smlimgwrapr]}>
                    <Image style={styles.smlimg} source={{uri: 'nearby'}}/>
                   </View> 
                  </View>
                  <View style={[styles.tagWrapr]}>
                     <View><Text style={[styles.tagTitle]}>Nearby</Text></View>
                     <View><Text style={[styles.tagDes]}>See restaurants near you</Text></View>
                  </View>
                  <View style={[styles.rightIcon]}>
                    <Icon name="ios-arrow-forward" size={25} color='#A4A4A4'/>                      
                  </View>
                </View>
                <View  style={[styles.title,styles.feed]}>
                    <View style={[styles.smlimgoutline]}>
                     <View style={[styles.smlimgwrapr]}>
                      <Image style={styles.smlimg} source={{uri: 'feed'}}/>
                     </View> 
                    </View>
                    <View style={[styles.tagWrapr]}>
                       <View><Text style={[styles.tagTitle]}>Feed</Text></View>
                       <View><Text style={[styles.tagDes]}>See what is happening around you</Text></View>
                    </View>
                </View> 
            </View>    
            <View style={[styles.feedTabsWrapr]}>
                      <View style={[styles.feeds,styles.activeFeedWrapr]}>
                        <Text style={[styles.localFeed,styles.activeFeed]}>Local Feed</Text>
                      </View>
                      <View style={[styles.feeds,styles.inactiveFeedWrapr]}>
                        <Text style={[styles.localFeed,styles.inactiveFeed]}>My Feed</Text>
                      </View>
            </View>
            <View  style={[styles.scrollwrapr,{{flex:1}}]}>
                 <ListView
                  dataSource={this.state.dataSource}
                  renderRow={this.renderCards}
                  onEndReachedThreshold={10}
                  onEndReached={this.onEndReached}
                  renderFooter={this._renderFooter}/> 
            </View>
        </ScrollView>
      </View>  

Answer 1

One way to achieve this animation in ios to simply add stickyHeaderIndices ={2} for the parent scroll. But, since stickyHeaderIndices is not supported in android, I am trying to achieve this animation by using a scrollview and a listview. But, the control is not being passed from one scrollview to listview or vice-versa. I have tried PanResponder, but the animation is not smooth in that. So, please could you suggest a way around or add stickyHeaderIndices as props for android also??