The way scroll views work in react native is extremely unintuitive

[GNUGradyn]

Introduction

ScrollViews break if there are any non-touchable children and you try to scroll with your finger starting on the non touchable child

Details

Hello. I was just working on my react native app when I ran into a strange issue. I had a <ScrollView> with several child <View>s. When trying to scroll down, if you put your finger directly on any touchables within one of the <View>s, it was fine. But if you put your finger directly on the <View> itself, the scroll would fail.

The issue is ScrollView depends on the touch event propagating down from it's child views, and <View> (among others) does not handle touch events.

A simple workaround is wrapping the entire body of your ScrollView with a touchable.

Example:

{/*not ok*/}
<ScrollView>
  <View>
    {/*Stuff here*/}
  </View>
</ScrollView>

Touching the <View> in an attempt to scroll will not work

{/*ok*/}
<ScrollView>
  <TouchableWithoutFeedback>
    <View>
      {/*Stuff here*/}
    </View>
  </TouchableWithoutFeedback>
</ScrollView>

Touching the <View> in an attempt to scroll will now work fine, because the TouchableWithoutFeedback will capture the touch event and it will propegate down to ScrollView

Discussion points

I understand this isn't really a bug, but it is extremely unintuitive to the end user. I am proposing react native simply wrap the entire contents of every ScrollView inside a touchable automatically. This seems manky, but I'd argue it's better then scroll views "breaking" every time you put a non-touchable directly inside one