SafeAreaView adding padding to bottom when used with ScrollView in React Navigation 6

[thecannabisapp]

Hello, I'm having some weird padding issues when I use a ScrollView inside a SafeAreaView using Expo 44, React Navigation 6 bottom Tab navigator, React Native Paper and tailwind.

Note that I'm running this using Expo Web and this is presented as a PWA in the iOS simulator. There's no padding issue inside Safari. Only when it is saved as a desktop bookmark and running as PWA the padding issue appears.

Any ideas on why and how to fix it, please? Thank you! 🙏🏻

import React from "react";
import { SafeAreaView } from 'react-native-safe-area-context';
import { ScrollView } from "react-native";
import { Appbar } from "react-native-paper";
import tailwind from "tailwind-rn"

const Home: React.FC = () => {
  return (
    <SafeAreaView style={{flex: 1, padding: 0}}>
      <Appbar
        style={{
          height: 50,
        }}
      >
        <Appbar.Content
          subtitle="The highest authority"
          subtitleStyle={tailwind('text-xs')}
        />
        <Appbar.Action icon="menu" />
      </Appbar>
      <ScrollView style={tailwind("mb-0 pb-0 bg-black")}>
      {SOME LONG OVERFLOWING CONTENT HERE...}
      </ScrollView>
    </SafeAreaView>
  );
};

export default Home;

[thecannabisapp]

I solved it by adding <SafeAreaView edges={['top', 'left', 'right']} style={tailwind("flex-1 pb-0 mb-0")}>

[Salman9000]

I solved it by adding <SafeAreaView edges={['top', 'left', 'right']} style={tailwind("flex-1 pb-0 mb-0")}>

Works like a charm! thank you