feat: stuttering of safe area

Author: RichardLindhout

example/package.json

@@ -18,7 +18,6 @@
     "react-dom": "18.1.0",
     "react-native": "0.70.5",
     "react-native-paper": "^4.12.4",
-    "react-native-safe-area-context": "4.4.1",
     "react-native-web": "~0.18.7"
   },
   "devDependencies": {

example/src/App.tsx

@@ -6,7 +6,7 @@ import {
   Linking,
   Image,
   Animated,
-  useColorScheme,
+  Platform,
 } from 'react-native'
 import { SafeAreaProvider } from 'react-native-safe-area-context'
 
@@ -394,13 +394,16 @@ function Label({ children }: { children: string }) {
 }
 
 export default function AppWithProviders() {
-  return (
-    <SafeAreaProvider>
-      <PaperProvider>
-        <App />
-      </PaperProvider>
-    </SafeAreaProvider>
+  const inner = (
+    <PaperProvider>
+      <App />
+    </PaperProvider>
   )
+
+  if (Platform.OS === 'web') {
+    return <SafeAreaProvider>{inner}</SafeAreaProvider>
+  }
+  return <SafeAreaProvider>{inner}</SafeAreaProvider>
 }
 
 function TwitterFollowButton({ userName }: { userName: string }) {

example/yarn.lock

@@ -9381,11 +9381,6 @@ react-native-paper@^4.12.4:
     color "^3.1.2"
     react-native-iphone-x-helper "^1.3.1"
 
-[email protected]:
-  version "4.4.1"
-  resolved "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.4.1.tgz#239c60b8a9a80eac70a38a822b04c0f1d15ffc01"
-  integrity sha512-N9XTjiuD73ZpVlejHrUWIFZc+6Z14co1K/p1IFMkImU7+avD69F3y+lhkqA2hN/+vljdZrBSiOwXPkuo43nFQA==
-
 react-native-web@~0.18.7:
   version "0.18.8"
   resolved "https://registry.npmjs.org/react-native-web/-/react-native-web-0.18.8.tgz#6a761cc5531dfbb8fffa9c1e342f153a792dce07"

src/Date/DatePickerModalHeader.tsx

@@ -25,13 +25,6 @@ export default function DatePickerModalHeader(
   const color = useHeaderTextColor()
   const insets = useSafeAreaInsets()
 
-  // safeContent: {
-  //   paddingBottom: 0,
-  // },
-  // safeContentNoTop: {
-  //   paddingTop: 0,
-  // },
-
   return (
     <Animated.View
       style={[

src/Date/DatePickerModalHeaderBackground.tsx

@@ -16,7 +16,6 @@ export default function DatePickerModalHeaderBackground({
         styles.animated,
         {
           backgroundColor,
-          paddingTop: insets.top,
           paddingLeft: insets.left,
           paddingRight: insets.right,
         },