How to handle a touch gesture with multiple components in a native response?

Question

Using React Native 0.47 and yarn, I create an introduction section in which you can scroll through several pages and finally get to the home page. Therefore, we scroll through the pages from right to left and move like this: Slide1 → Slide2 → Slide3 → Slide4 → Home. I have a component that displays a slide page that spans the entire screen. For example, the first slide looks like this:

And the code for this:

class IntroSlide extends Component { render () { return ( <View style={[styles.introSlide, this.props.myStyle]}> <View style={styles.introSlideIconView}> <Icon name={this.props.iconName} size={SLIDE_ICON_SIZE} color="white"/> </View> <View style={styles.introSlideTextView}> <Text style={styles.introSlideTextHeader}> {this.props.headerText} </Text> <Text style={styles.introSlideText}> {this.props.text} </Text> </View> </View> ); } } 

And I use it here:

 import AppIntro from 'react-native-app-intro'; // Other imports here export default class Intro extends Component { render() { return ( <View style={{flex: 1}}> <AppIntro showSkipButton={false} nextBtnLabel={<Text style={styles.introButton}>بعدی</Text>} doneBtnLabel={<Text style={styles.introButton}>شروع</Text>} > <IntroSlide iconName="user" myStyle={styles.introSlide1} headerText="DontCare" text= "SomeTextDoesntMatter" /> </AppIntro> </View> ); } } 

I use react-native-app-intro for this, which gives me a very cool swiper, but here is the problem:

I have a small View component with Icon ( react-native-vector-icons ) as you can see what I want to rotate when I go to the next page. I created panResponder in IntroSlide and set it to the top of the View . but my slide cannot receive any events. I think that some of the parent views provided by react-native-app-intro capture all events, and I can still scroll through the pages, but the console log is not showing. here is what i did:

 class IntroSlide extends Component { constructor(props) { super(props); const panResponder = PanResponder.create({ onStartShouldSetPanResponder: () => true, onPanResponderMove: () => console.log("Moving"), }); this.pan = panResponder; } render () { return ( <View style={[styles.introSlide, this.props.myStyle]} {...this.pan.panHandlers} > <View style={styles.introSlideIconView}> <Icon name={this.props.iconName} size={SLIDE_ICON_SIZE} color="white"/> </View> <View style={styles.introSlideTextView}> <Text style={styles.introSlideTextHeader}> {this.props.headerText} </Text> <Text style={styles.introSlideText}> {this.props.text} </Text> </View> </View> ); } } 

I did the same with the View component with flex: 1 , and I had a different result. I get console logs as expected, but I can no longer scroll through them. So, how can I scroll pages when receiving touch events in the parent component? (In other words, I want two different components to receive touch events, and I'm developing for android)