I have a ScrollView (let's call it parent) which is nesting multiple ScrollViews (let's call them childs). When the child finishes scrolling I want to start scrolling the parent when the user continues to scroll over the child.

I've searched in another answers but I couldn't find any information related to this situation. Can anyone help?

Thanks!

Code until now:

return (

    <View style={{ flex: 1 }}>
      <ScrollView style={{ flex: 1, backgroundColor: "white" }}>

        <View style={styles.dummyView1}>
          <ScrollView style={styles.scrollView}>
             SOME LONG TEXT
          </ScrollView>
        </View>



        <View style={styles.dummyView2}>
          <ScrollView style={styles.scrollView}>
           SOME LONG TEXT
          </ScrollView>
        </View>

        <View style={styles.dummyView3}>
          <ScrollView style={styles.scrollView}>
             SOME LONG TEXT
          </ScrollView>
        </View>

        <StatusBar style="auto" />
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({

  scrollView: {
    margin: 10,
    backgroundColor: "#FF5733",
  },

  dummyView1: {
    height: 300,
    backgroundColor: "#3352FF",
  },
  dummyView2: {
    height: 300,
    backgroundColor: "coral",
  },
  dummyView3: {
    height: 300,
    backgroundColor: "#61FF33",
  }
})