Change api, fix android

.eslintrc.js

@@ -23,6 +23,7 @@ module.exports = {
           '@typescript-eslint/explicit-member-accessibility': 'off',
           '@typescript-eslint/explicit-function-return-type': 'off',
           '@typescript-eslint/no-use-before-define': 'off',
+          'react-native/no-inline-styles': 'off',
         },
       ),
     },

android/src/main/java/com/th3rdwave/safeareaview/EdgeInsets.java

@@ -12,4 +12,11 @@ package com.th3rdwave.safeareaview;
     this.bottom = bottom;
     this.left = left;
   }
+
+  public boolean equalsToEdgeInsets(EdgeInsets other) {
+    if (this == other) {
+      return true;
+    }
+    return this.top == other.top && this.right == other.right && this.bottom == other.bottom && this.left == other.left;
+  }
 }

android/src/main/java/com/th3rdwave/safeareaview/SafeAreaView.java

@@ -1,25 +1,29 @@
 package com.th3rdwave.safeareaview;
 
+import android.app.Activity;
 import android.content.Context;
+import android.content.ContextWrapper;
 import android.os.Build;
-import android.util.DisplayMetrics;
 import android.view.Surface;
+import android.view.View;
+import android.view.ViewTreeObserver;
+import android.view.Window;
 import android.view.WindowInsets;
 import android.view.WindowManager;
 
 import com.facebook.infer.annotation.Assertions;
-import com.facebook.react.uimanager.DisplayMetricsHolder;
 import com.facebook.react.views.view.ReactViewGroup;
 
 import androidx.annotation.Nullable;
 
-public class SafeAreaView extends ReactViewGroup {
+public class SafeAreaView extends ReactViewGroup implements ViewTreeObserver.OnGlobalLayoutListener {
   public interface OnInsetsChangeListener {
     void onInsetsChange(SafeAreaView view, EdgeInsets insets);
   }
 
   private @Nullable OnInsetsChangeListener mInsetsChangeListener;
-  WindowManager mWindowManager;
+  private WindowManager mWindowManager;
+  private @Nullable EdgeInsets mLastInsets;
 
   public SafeAreaView(Context context) {
     super(context);
@@ -27,6 +31,17 @@ public class SafeAreaView extends ReactViewGroup {
     mWindowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
   }
 
+  private Activity getActivity() {
+    Context context = getContext();
+    while (context instanceof ContextWrapper) {
+      if (context instanceof Activity) {
+        return (Activity)context;
+      }
+      context = ((ContextWrapper)context).getBaseContext();
+    }
+    return null;
+  }
+
   private EdgeInsets getSafeAreaInsets() {
     // Window insets are parts of the window that are covered by system views (status bar,
     // navigation bar, notches). There are no apis the get these values for android < M so we
@@ -60,21 +75,40 @@ public class SafeAreaView extends ReactViewGroup {
     }
 
     // Calculate the part of the root view that overlaps with window insets.
+    View rootView = getRootView();
+    View contentView = rootView.findViewById(android.R.id.content);
+    float windowWidth = rootView.getWidth();
+    float windowHeight = rootView.getHeight();
     int[] windowLocation = new int[2];
-    getLocationInWindow(windowLocation);
-    DisplayMetrics screenMetrics = DisplayMetricsHolder.getScreenDisplayMetrics();
+    contentView.getLocationInWindow(windowLocation);
     windowInsets.top = Math.max(windowInsets.top - windowLocation[1], 0);
     windowInsets.left = Math.max(windowInsets.left - windowLocation[0], 0);
-    windowInsets.bottom = Math.max(windowLocation[1] + getHeight() + windowInsets.bottom - screenMetrics.heightPixels, 0);
-    windowInsets.right = Math.max(windowLocation[0] + getWidth() + windowInsets.right - screenMetrics.widthPixels, 0);
+    windowInsets.bottom = Math.max(windowLocation[1] + contentView.getHeight() + windowInsets.bottom - windowHeight, 0);
+    windowInsets.right = Math.max(windowLocation[0] + contentView.getWidth() + windowInsets.right - windowWidth, 0);
     return windowInsets;
   }
 
   @Override
-  protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
-    super.onLayout(changed, left, top, right, bottom);
+  protected void onAttachedToWindow() {
+    super.onAttachedToWindow();
+
+    getRootView().getViewTreeObserver().addOnGlobalLayoutListener(this);
+  }
+
+  @Override
+  protected void onDetachedFromWindow() {
+    super.onDetachedFromWindow();
+
+    getRootView().getViewTreeObserver().removeOnGlobalLayoutListener(this);
+  }
 
-    Assertions.assertNotNull(mInsetsChangeListener).onInsetsChange(this, getSafeAreaInsets());
+  @Override
+  public void onGlobalLayout() {
+    EdgeInsets edgeInsets = getSafeAreaInsets();
+    if (mLastInsets == null || !mLastInsets.equalsToEdgeInsets(edgeInsets)) {
+      Assertions.assertNotNull(mInsetsChangeListener).onInsetsChange(this, edgeInsets);
+      mLastInsets = edgeInsets;
+    }
   }
 
   public void setOnInsetsChangeListener(OnInsetsChangeListener listener) {

example/App.tsx

@@ -8,7 +8,6 @@
 
 import * as React from 'react';
 import { StyleSheet, ScrollView, View, Text, StatusBar } from 'react-native';
-import SafeAreaView from '..';
 
 import {
   Header,
@@ -17,57 +16,96 @@ import {
   DebugInstructions,
   ReloadInstructions,
 } from 'react-native/Libraries/NewAppScreen';
+import { SafeAreaProvider, useSafeArea } from '..';
+
+type ForceInsets = 'always' | 'never';
+
+const CompatSafeAreaView = ({
+  forceInsets = {},
+  children,
+}: {
+  forceInsets?: {
+    top?: ForceInsets;
+    right?: ForceInsets;
+    bottom?: ForceInsets;
+    left?: ForceInsets;
+  };
+  children?: React.ReactNode;
+}) => {
+  const insets = useSafeArea();
+  const top = forceInsets.top === 'never' ? 0 : insets.top;
+  const right = forceInsets.right === 'never' ? 0 : insets.right;
+  const bottom = forceInsets.bottom === 'never' ? 0 : insets.bottom;
+  const left = forceInsets.left === 'never' ? 0 : insets.left;
+  return (
+    <View
+      style={{
+        paddingTop: top,
+        paddingRight: right,
+        paddingBottom: bottom,
+        paddingLeft: left,
+      }}
+    >
+      {children}
+    </View>
+  );
+};
 
 const App = () => {
+  const insets = useSafeArea();
   return (
     <>
       <StatusBar
         barStyle="dark-content"
-        translucent
-        backgroundColor="rgba(0, 0, 0, 0.3)"
+        translucent={false}
+        backgroundColor="transparent"
       />
-      <SafeAreaView>
-        {insets => (
-          <ScrollView
-            contentInsetAdjustmentBehavior="automatic"
-            contentContainerStyle={{
-              paddingTop: insets.top,
-              paddingBottom: insets.bottom,
-            }}
-            style={styles.scrollView}
-          >
-            <Header />
-            <View style={styles.body}>
-              <View style={styles.sectionContainer}>
-                <Text style={styles.sectionTitle}>Step One</Text>
-                <Text style={styles.sectionDescription}>
-                  Edit <Text style={styles.highlight}>App.js</Text> to change
-                  this screen and then come back to see your edits.
-                </Text>
-              </View>
-              <View style={styles.sectionContainer}>
-                <Text style={styles.sectionTitle}>See Your Changes</Text>
-                <Text style={styles.sectionDescription}>
-                  <ReloadInstructions />
-                </Text>
-              </View>
-              <View style={styles.sectionContainer}>
-                <Text style={styles.sectionTitle}>Debug</Text>
-                <Text style={styles.sectionDescription}>
-                  <DebugInstructions />
-                </Text>
-              </View>
-              <View style={styles.sectionContainer}>
-                <Text style={styles.sectionTitle}>Learn More</Text>
-                <Text style={styles.sectionDescription}>
-                  Read the docs to discover what to do next:
-                </Text>
-              </View>
-              <LearnMoreLinks />
+      <ScrollView
+        contentInsetAdjustmentBehavior="never"
+        style={styles.scrollView}
+      >
+        <CompatSafeAreaView>
+          <Header />
+          <View style={styles.body}>
+            <View style={styles.sectionContainer}>
+              <Text style={styles.sectionTitle}>Step One</Text>
+              <Text style={styles.sectionDescription}>
+                Edit <Text style={styles.highlight}>App.js</Text> to change this
+                screen and then come back to see your edits.
+              </Text>
             </View>
-          </ScrollView>
-        )}
-      </SafeAreaView>
+            <View style={styles.sectionContainer}>
+              <Text style={styles.sectionTitle}>See Your Changes</Text>
+              <Text style={styles.sectionDescription}>
+                <ReloadInstructions />
+              </Text>
+            </View>
+            <View style={styles.sectionContainer}>
+              <Text style={styles.sectionTitle}>Debug</Text>
+              <Text style={styles.sectionDescription}>
+                <DebugInstructions />
+              </Text>
+            </View>
+            <View style={styles.sectionContainer}>
+              <Text style={styles.sectionTitle}>Learn More</Text>
+              <Text style={styles.sectionDescription}>
+                Read the docs to discover what to do next:
+              </Text>
+            </View>
+            <LearnMoreLinks />
+          </View>
+        </CompatSafeAreaView>
+      </ScrollView>
+      <View
+        style={{
+          position: 'absolute',
+          top: 0,
+          right: 0,
+          left: 0,
+          height: insets.top,
+          backgroundColor: 'rgba(0, 0, 0, 0.3)',
+        }}
+      />
     </>
   );
 };
@@ -111,4 +149,8 @@ const styles = StyleSheet.create({
   },
 });
 
-export default App;
+export default () => (
+  <SafeAreaProvider>
+    <App />
+  </SafeAreaProvider>
+);

ios/SafeAreaView/RNCSafeAreaView.m

@@ -5,7 +5,18 @@
 #import <React/RCTBridge.h>
 #import <React/RCTUIManager.h>
 
+static BOOL UIEdgeInsetsEqualToEdgeInsetsWithThreshold(UIEdgeInsets insets1, UIEdgeInsets insets2, CGFloat threshold) {
+  return
+  ABS(insets1.left - insets2.left) <= threshold &&
+  ABS(insets1.right - insets2.right) <= threshold &&
+  ABS(insets1.top - insets2.top) <= threshold &&
+  ABS(insets1.bottom - insets2.bottom) <= threshold;
+}
+
 @implementation RNCSafeAreaView
+{
+  UIEdgeInsets _currentSafeAreaInsets;
+}
 
 - (BOOL)isSupportedByOS
 {
@@ -57,6 +68,13 @@
 - (void)invalidateSafeAreaInsets
 {
   UIEdgeInsets safeAreaInsets = [self realOrEmulateSafeAreaInsets];
+
+  if (UIEdgeInsetsEqualToEdgeInsetsWithThreshold(safeAreaInsets, _currentSafeAreaInsets, 1.0 / RCTScreenScale())) {
+    return;
+  }
+
+  _currentSafeAreaInsets = safeAreaInsets;
+
   self.onInsetsChange(@{
     @"insets": @{
       @"top": @(safeAreaInsets.top),

src/index.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import {
   requireNativeComponent,
   NativeSyntheticEvent,
-  ViewStyle,
   StyleSheet,
 } from 'react-native';
 
@@ -15,12 +14,13 @@ export interface EdgeInsets {
   left: number;
 }
 
+const SafeAreaContext = React.createContext<EdgeInsets | null>(null);
+
 export interface SafeAreaViewProps {
-  children: (insets: EdgeInsets) => React.ReactNode;
-  style?: ViewStyle;
+  children?: React.ReactNode;
 }
 
-export default function SafeAreaView({ children, style }: SafeAreaViewProps) {
+export function SafeAreaProvider({ children }: SafeAreaViewProps) {
   const [insets, setInsets] = React.useState<EdgeInsets | null>(null);
   const onInsetsChange = React.useCallback(
     (event: NativeSyntheticEvent<{ insets: EdgeInsets }>) => {
@@ -29,14 +29,13 @@ export default function SafeAreaView({ children, style }: SafeAreaViewProps) {
     [],
   );
 
-  console.warn(insets);
-
   return (
-    <NativeSafeAreaView
-      style={[styles.fill, style]}
-      onInsetsChange={onInsetsChange}
-    >
-      {insets !== null ? children(insets) : null}
+    <NativeSafeAreaView style={styles.fill} onInsetsChange={onInsetsChange}>
+      {insets !== null ? (
+        <SafeAreaContext.Provider value={insets}>
+          {children}
+        </SafeAreaContext.Provider>
+      ) : null}
     </NativeSafeAreaView>
   );
 }
@@ -44,3 +43,13 @@ export default function SafeAreaView({ children, style }: SafeAreaViewProps) {
 const styles = StyleSheet.create({
   fill: { flex: 1 },
 });
+
+export function useSafeArea(): EdgeInsets {
+  const safeArea = React.useContext(SafeAreaContext);
+  if (safeArea == null) {
+    throw new Error(
+      'No safe area value available. Make sure you are rendering `<SafeAreaProvider>` at the top of your app.',
+    );
+  }
+  return safeArea;
+}