SafeAreaViewをScrollView内で使用するときの注意点

TL;DR

ScrollView内でSafeAreaView使うときは、ScrollViewにcontentInsetAdjustmentBehavior="automatic"のpropsを渡せばスクロールがぶっ壊れない。

<ScrollView contentInsetAdjustmentBehavior="automatic"> 
  <SafeAreaView>
    {/* Long Content */}
  </SafeAreaView>
</ScrollView>

はじめに

React Nativeには、AndroidとiOSを同時に開発できる利点があります。
一方で、AndroidにはAndroidの、iOSにはiOSにしか無い仕様も存在し、その一つにiOSのセーフエリアがあります。

セーフエリアには、上部のセーフエリア（Status Bar）と下部のセーフエリア（Home Indicator）の２つが存在します。
React Nativeでは、SafeAreaViewというコンポーネントを利用することで、よしなにセーフエリア領域を扱うことができます。

ScrollView内で使用するときの注意

<ScrollView contentInsetAdjustmentBehavior="automatic"> 
  <SafeAreaView>
    {/* Long Content */}
  </SafeAreaView>
</ScrollView>