Add support for getting initial safe area insets on mount (#27)

README.md

@@ -43,12 +43,14 @@ pod 'react-native-safe-area-context', :path => '../node_modules/react-native-saf
 Make the following changes:
 
 #### `android/settings.gradle`
+
 ```groovy
 include ':react-native-safe-area-context'
 project(':react-native-safe-area-context').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-safe-area-context/android')
 ```
 
 #### `android/app/build.gradle`
+
 ```groovy
 dependencies {
    ...
@@ -57,6 +59,7 @@ dependencies {
 ```
 
 #### `android/app/src/main/.../MainApplication.java`
+
 On top, where imports are:
 
 ```java
@@ -75,6 +78,7 @@ protected List<ReactPackage> getPackages() {
     );
 }
 ```
+
 </details>
 
 ## Usage
@@ -85,11 +89,7 @@ Add `SafeAreaProvider` in your app root component:
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 
 function App() {
-  return (
-    <SafeAreaProvider>
-      ...
-    </SafeAreaProvider>
-  );
+  return <SafeAreaProvider>...</SafeAreaProvider>;
 }
 ```
 
@@ -139,6 +139,27 @@ function SomeComponent() {
 
 If you are doing server side rendering on the web you can use `initialSafeAreaInsets` to inject insets value based on the device the user has, or simply pass zero values. Since insets measurement is async it will break rendering your page content otherwise.
 
+### Optimization
+
+To speed up the initial render, you can import `initialWindowSafeAreaInsets` from this package and set as the `initialSafeAreaInsets` prop on the provider as described in Web SSR. You cannot do this if your provider remounts, or you are using `react-native-navigation`.
+
+Only supported on iOS at the moment.
+
+```js
+import {
+  SafeAreaProvider,
+  initialWindowSafeAreaInsets,
+} from 'react-native-safe-area-context';
+
+function App() {
+  return (
+    <SafeAreaProvider initialSafeAreaInsets={initialWindowSafeAreaInsets}>
+      ...
+    </SafeAreaProvider>
+  );
+}
+```
+
 ## Resources
 
 - Great article about how this library can be used: https://dev.to/brunolemos/adding-notch-support-to-your-react-native-android-app-3ci3

ios/SafeAreaView/RNCSafeAreaViewManager.m

@@ -8,9 +8,32 @@ RCT_EXPORT_MODULE(RNCSafeAreaView)
 
 RCT_EXPORT_VIEW_PROPERTY(onInsetsChange, RCTBubblingEventBlock)
 
++ (BOOL)requiresMainQueueSetup
+{
+  return YES;
+}
+
 - (UIView *)view
 {
   return [RNCSafeAreaView new];
 }
 
+- (NSDictionary *)constantsToExport
+{
+  if (@available(iOS 11.0, *)) {
+    UIWindow* window = [[UIApplication sharedApplication] keyWindow];
+    UIEdgeInsets safeAreaInsets = window.safeAreaInsets;
+    return @{
+      @"initialWindowSafeAreaInsets": @{
+        @"top": @(safeAreaInsets.top),
+        @"right": @(safeAreaInsets.right),
+        @"bottom": @(safeAreaInsets.bottom),
+        @"left": @(safeAreaInsets.left),
+      }
+    };
+  } else {
+    return @{ @"initialWindowSafeAreaInsets": [NSNull null] };
+  }
+}
+
 @end

src/InitialWindowSafeAreaInsets.ios.ts

@@ -0,0 +1,3 @@
+import { NativeModules } from 'react-native';
+
+export default NativeModules.RNCSafeAreaView.initialWindowSafeAreaInsets;

src/InitialWindowSafeAreaInsets.ts

@@ -0,0 +1,4 @@
+import { EdgeInsets } from './SafeArea.types';
+
+const initialWindowSafeAreaInsets: EdgeInsets | null = null;
+export default initialWindowSafeAreaInsets;

src/index.tsx

@@ -3,6 +3,10 @@ import { StyleSheet, View, ViewProps } from 'react-native';
 import { EdgeInsets as EdgeInsetsT, InsetChangedEvent } from './SafeArea.types';
 import NativeSafeAreaView from './NativeSafeAreaView';
 
+export {
+  default as initialWindowSafeAreaInsets,
+} from './InitialWindowSafeAreaInsets';
+
 export const SafeAreaContext = React.createContext<EdgeInsetsT | null>(null);
 
 export interface SafeAreaViewProps {