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>