chore: set initial insets for safe areas

Author: satya164

packages/bottom-tabs/src/views/SafeAreaProviderCompat.tsx

@@ -2,17 +2,25 @@ import * as React from 'react';
 import {
   SafeAreaProvider,
   SafeAreaConsumer,
+  initialWindowSafeAreaInsets,
 } from 'react-native-safe-area-context';
 import {
   getStatusBarHeight,
   getBottomSpace,
 } from 'react-native-iphone-x-helper';
 
+// The provider component for safe area initializes asynchornously
+// Until the insets are available, there'll be blank screen
+// To avoid the blank screen, we specify some initial values
 const initialSafeAreaInsets = {
+  // Approximate values which are good enough for most cases
   top: getStatusBarHeight(true),
   bottom: getBottomSpace(),
   right: 0,
   left: 0,
+  // If we are on a newer version of the library, we can get the correct window insets
+  // The component might not be filling the window, but this is good enough for most cases
+  ...initialWindowSafeAreaInsets,
 };
 
 type Props = {

packages/drawer/src/views/SafeAreaProviderCompat.tsx

@@ -2,17 +2,25 @@ import * as React from 'react';
 import {
   SafeAreaProvider,
   SafeAreaConsumer,
+  initialWindowSafeAreaInsets,
 } from 'react-native-safe-area-context';
 import {
   getStatusBarHeight,
   getBottomSpace,
 } from 'react-native-iphone-x-helper';
 
+// The provider component for safe area initializes asynchornously
+// Until the insets are available, there'll be blank screen
+// To avoid the blank screen, we specify some initial values
 const initialSafeAreaInsets = {
+  // Approximate values which are good enough for most cases
   top: getStatusBarHeight(true),
   bottom: getBottomSpace(),
   right: 0,
   left: 0,
+  // If we are on a newer version of the library, we can get the correct window insets
+  // The component might not be filling the window, but this is good enough for most cases
+  ...initialWindowSafeAreaInsets,
 };
 
 type Props = {

packages/stack/src/views/SafeAreaProviderCompat.tsx

@@ -2,17 +2,25 @@ import * as React from 'react';
 import {
   SafeAreaProvider,
   SafeAreaConsumer,
+  initialWindowSafeAreaInsets,
 } from 'react-native-safe-area-context';
 import {
   getStatusBarHeight,
   getBottomSpace,
 } from 'react-native-iphone-x-helper';
 
+// The provider component for safe area initializes asynchornously
+// Until the insets are available, there'll be blank screen
+// To avoid the blank screen, we specify some initial values
 const initialSafeAreaInsets = {
+  // Approximate values which are good enough for most cases
   top: getStatusBarHeight(true),
   bottom: getBottomSpace(),
   right: 0,
   left: 0,
+  // If we are on a newer version of the library, we can get the correct window insets
+  // The component might not be filling the window, but this is good enough for most cases
+  ...initialWindowSafeAreaInsets,
 };
 
 type Props = {