[RaectNative]SafeAreaView in ScrollViewの余計なpaddingを消す方法

はじめに

こんにちは！

タイトルの通り解消法を書きます。

環境

    "react-native": "0.64.0",
    "react-native-safe-area-context": "^3.2.0",

結論

    <SafeAreaView edges={['right', 'left', 'top']}>

SafeAreaViewのオプションeddesにpaddingを指定したい箇所を記述するだけです。

これで下のpaddingが消えます。

経緯

こんな感じでタブバーの中でSafeAreaViewとScrollViewを呼んでいる時に、

footerのタブバーの上にSafeAreaViewのpaddingが設定され、scrollの範囲が狭まります。Navigation.tsx

  <Tab.Navigator
    screenOptions={({ route }) => ({
      tabBarActiveBackgroundColor: 'black',
      tabBarInactiveBackgroundColor: 'black',
      tabBarStyle: {
        backgroundColor: 'black',
      },
      headerShown: false,
    })}
  >
    <Tab.Screen name="Home" component={HomeScreen} />
    <Tab.Screen name="Setting" component={SettingScreen} />
  </Tab.Navigator>

Home.tsx

export const Home = () => {
  return (
    <SafeAreaView edges={['right', 'left', 'top']}>
      <View>
        <CustomHeader
          title="ホーム"
        />
      </View>

      <ScrollView>
        <View>
          ・
　　　     ・
　　　     ・
        </View>
      </ScrollView>
    </SafeAreaView> 
    )
  }

参考

Problem with Tab Navigation