React NativeでTouchableWithoutFeedback配下のScrollViewがなぜかスクロールできないときのメモ

めっちゃハマったので知見を忘れないように書いておく。

結論: onStartShouldSetResponder

ScrollViewの内側のViewのPropsにonStartShouldSetResponder={() => true}する

こうなっていればスクロールできるようになるはず。

<TouchableWithoutFeedback>
  <ScrollView>
    <View onStartShouldSetResponder={() => true}>
      {scrollableContents}
    </View>
  </ScrollView>
</TouchableWithoutFeedback>

style類は割愛している

RNのジェスチャーレスポンダー

RNにおけるイベントバブリング的なシステムのあれという認識をしているけど、こういう概念があってonStartShouldSetResponderでtrueを返すようにするとタッチ開始時にこの要素がresponderになるらしい。

facebook.github.io

知らんかったので学びがある。ドキュメントちゃんと読まないとこういうときに無限にハマってしまうのでドキュメントはやはりちゃんと読んでおかないとダメということがわかる。

なお今回もStackOverFlowに助けられた。ありがとうStackOverFlow。

stackoverflow.com