Android implementation

android/build.gradle

@@ -11,11 +11,11 @@ buildscript {
 }
 
 def getExtOrDefault(name) {
-  return rootProject.ext.has(name) ? rootProject.ext.get(name) : project.properties['ReactNativeNetInfo_' + name]
+  return rootProject.ext.has(name) ? rootProject.ext.get(name) : project.properties['ReactNativeSafeAreaView_' + name]
 }
 
 def getExtOrIntegerDefault(name) {
-  return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties['ReactNativeNetInfo_' + name]).toInteger()
+  return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties['ReactNativeSafeAreaView_' + name]).toInteger()
 }
 
 apply plugin: 'com.android.library'

android/gradle.properties

@@ -1,6 +1,6 @@
-ReactNativeNetInfo_compileSdkVersion=28
-ReactNativeNetInfo_buildToolsVersion=28.0.3
-ReactNativeNetInfo_targetSdkVersion=27
-ReactNativeNetInfo_minSdkVersion=16
+ReactNativeSafeAreaView_compileSdkVersion=28
+ReactNativeSafeAreaView_buildToolsVersion=28.0.3
+ReactNativeSafeAreaView_targetSdkVersion=27
+ReactNativeSafeAreaView_minSdkVersion=16
 android.useAndroidX=true
 android.enableJetifier=true

android/licenseHeader.txt

@@ -1,6 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */

android/src/main/AndroidManifest.xml

@@ -1,10 +1,6 @@
 
 <manifest
 	xmlns:android="http://schemas.android.com/apk/res/android"
-	package="com.reactnativecommunity.netinfo">
-
-	<uses-permission
-		android:name="android.permission.ACCESS_NETWORK_STATE" />
+	package="com.th3rdwave.safeareaview">
 
 </manifest>
-  

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

@@ -0,0 +1,15 @@
+package com.th3rdwave.safeareaview;
+
+/* package */ class EdgeInsets {
+  public float top;
+  public float right;
+  public float bottom;
+  public float left;
+
+  public EdgeInsets(float top, float right, float bottom, float left) {
+    this.top = top;
+    this.right = right;
+    this.bottom = bottom;
+    this.left = left;
+  }
+}

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

@@ -0,0 +1,36 @@
+package com.th3rdwave.safeareaview;
+
+import com.facebook.react.bridge.Arguments;
+import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.uimanager.PixelUtil;
+import com.facebook.react.uimanager.events.Event;
+import com.facebook.react.uimanager.events.RCTEventEmitter;
+
+/* package */  class InsetsChangeEvent extends Event<InsetsChangeEvent> {
+  public static final String EVENT_NAME = "topInsetsChange";
+
+  private EdgeInsets mInsets;
+
+  protected InsetsChangeEvent(int viewTag, EdgeInsets insets) {
+    super(viewTag);
+
+    mInsets = insets;
+  }
+
+  @Override
+  public String getEventName() {
+    return EVENT_NAME;
+  }
+
+  @Override
+  public void dispatch(RCTEventEmitter rctEventEmitter) {
+    WritableMap insets = Arguments.createMap();
+    insets.putDouble("top", PixelUtil.toDIPFromPixel(mInsets.top));
+    insets.putDouble("right", PixelUtil.toDIPFromPixel(mInsets.right));
+    insets.putDouble("bottom", PixelUtil.toDIPFromPixel(mInsets.bottom));
+    insets.putDouble("left", PixelUtil.toDIPFromPixel(mInsets.left));
+    WritableMap event = Arguments.createMap();
+    event.putMap("insets", insets);
+    rctEventEmitter.receiveEvent(getViewTag(), getEventName(), event);
+  }
+}

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

@@ -0,0 +1,83 @@
+package com.th3rdwave.safeareaview;
+
+import android.content.Context;
+import android.os.Build;
+import android.util.DisplayMetrics;
+import android.view.Surface;
+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 interface OnInsetsChangeListener {
+    void onInsetsChange(SafeAreaView view, EdgeInsets insets);
+  }
+
+  private @Nullable OnInsetsChangeListener mInsetsChangeListener;
+  WindowManager mWindowManager;
+
+  public SafeAreaView(Context context) {
+    super(context);
+
+    mWindowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
+  }
+
+  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
+    // do a best effort polyfill.
+    EdgeInsets windowInsets;
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
+      WindowInsets insets = getRootWindowInsets();
+      windowInsets = new EdgeInsets(
+          insets.getSystemWindowInsetTop(),
+          insets.getSystemWindowInsetRight(),
+          insets.getSystemWindowInsetBottom(),
+          insets.getSystemWindowInsetLeft());
+    } else {
+      int rotation = mWindowManager.getDefaultDisplay().getRotation();
+      int statusBarHeight = 0;
+      int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android");
+      if (resourceId > 0) {
+        statusBarHeight = getResources().getDimensionPixelSize(resourceId);
+      }
+      int navbarHeight = 0;
+      resourceId = getResources().getIdentifier("navigation_bar_height", "dimen", "android");
+      if (resourceId > 0) {
+        navbarHeight = getResources().getDimensionPixelSize(resourceId);
+      }
+
+      windowInsets = new EdgeInsets(
+          statusBarHeight,
+          rotation == Surface.ROTATION_90 ? navbarHeight : 0,
+          rotation == Surface.ROTATION_0 || rotation == Surface.ROTATION_180 ? navbarHeight : 0,
+          rotation == Surface.ROTATION_270 ? navbarHeight : 0);
+    }
+
+    // Calculate the part of the root view that overlaps with window insets.
+    int[] windowLocation = new int[2];
+    getLocationInWindow(windowLocation);
+    DisplayMetrics screenMetrics = DisplayMetricsHolder.getScreenDisplayMetrics();
+    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);
+    return windowInsets;
+  }
+
+  @Override
+  protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
+    super.onLayout(changed, left, top, right, bottom);
+
+    Assertions.assertNotNull(mInsetsChangeListener).onInsetsChange(this, getSafeAreaInsets());
+  }
+
+  public void setOnInsetsChangeListener(OnInsetsChangeListener listener) {
+    mInsetsChangeListener = listener;
+  }
+}

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

@@ -0,0 +1,44 @@
+package com.th3rdwave.safeareaview;
+
+import com.facebook.react.common.MapBuilder;
+import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.uimanager.UIManagerModule;
+import com.facebook.react.uimanager.ViewGroupManager;
+import com.facebook.react.uimanager.events.EventDispatcher;
+
+import java.util.Map;
+
+import androidx.annotation.NonNull;
+
+public class SafeAreaViewManager extends ViewGroupManager<SafeAreaView> {
+  @Override
+  @NonNull
+  public String getName() {
+    return "RNCSafeAreaView";
+  }
+
+  @Override
+  @NonNull
+  public SafeAreaView createViewInstance(@NonNull ThemedReactContext context) {
+    return new SafeAreaView(context);
+  }
+
+  @Override
+  protected void addEventEmitters(@NonNull ThemedReactContext reactContext, @NonNull final SafeAreaView view) {
+    final EventDispatcher dispatcher =
+        reactContext.getNativeModule(UIManagerModule.class).getEventDispatcher();
+    view.setOnInsetsChangeListener(new SafeAreaView.OnInsetsChangeListener() {
+      @Override
+      public void onInsetsChange(SafeAreaView view, EdgeInsets insets) {
+        dispatcher.dispatchEvent(new InsetsChangeEvent(view.getId(), insets));
+      }
+    });
+  }
+
+  @Override
+  public Map<String, Object> getExportedCustomDirectEventTypeConstants() {
+    return MapBuilder.<String, Object>builder()
+        .put(InsetsChangeEvent.EVENT_NAME, MapBuilder.of("registrationName", "onInsetsChange"))
+        .build();
+  }
+}

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

@@ -0,0 +1,26 @@
+package com.th3rdwave.safeareaview;
+
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ViewManager;
+
+import java.util.Collections;
+import java.util.List;
+
+import javax.annotation.Nonnull;
+
+public class SafeAreaViewPackage implements ReactPackage {
+
+  @Nonnull
+  @Override
+  public List<NativeModule> createNativeModules(@Nonnull ReactApplicationContext reactContext) {
+    return Collections.emptyList();
+  }
+
+  @Nonnull
+  @Override
+  public List<ViewManager> createViewManagers(@Nonnull ReactApplicationContext reactContext) {
+    return Collections.<ViewManager>singletonList(new SafeAreaViewManager());
+  }
+}

example/App.tsx

@@ -21,7 +21,11 @@ import {
 const App = () => {
   return (
     <>
-      <StatusBar barStyle="dark-content" />
+      <StatusBar
+        barStyle="dark-content"
+        translucent
+        backgroundColor="rgba(0, 0, 0, 0.3)"
+      />
       <SafeAreaView>
         {insets => (
           <ScrollView

example/android/app/build.gradle

@@ -80,7 +80,7 @@ project.ext.react = [
     enableHermes: false,  // clean and rebuild if changing
 ]
 
-apply from: "../../node_modules/react-native/react.gradle"
+apply from: "../../../node_modules/react-native/react.gradle"
 
 /**
  * Set this to true to create two separate APKs instead of one:
@@ -192,12 +192,14 @@ dependencies {
     implementation "com.facebook.react:react-native:+"  // From node_modules
 
     if (enableHermes) {
-      def hermesPath = "../../node_modules/hermesvm/android/";
+      def hermesPath = "../../../node_modules/hermesvm/android/";
       debugImplementation files(hermesPath + "hermes-debug.aar")
       releaseImplementation files(hermesPath + "hermes-release.aar")
     } else {
       implementation jscFlavor
     }
+
+    implementation project(":th3rdwave-safe-area-view")
 }
 
 // Run this once to be able to run the application with BUCK
@@ -206,5 +208,3 @@ task copyDownloadableDepsToLibs(type: Copy) {
     from configurations.compile
     into 'libs'
 }
-
-apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

example/android/app/src/main/java/com/safeareaviewexample/MainApplication.java

@@ -1,16 +1,15 @@
 package com.safeareaviewexample;
 
 import android.app.Application;
-import android.util.Log;
 
-import com.facebook.react.PackageList;
-import com.facebook.hermes.reactexecutor.HermesExecutorFactory;
-import com.facebook.react.bridge.JavaScriptExecutorFactory;
 import com.facebook.react.ReactApplication;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
+import com.facebook.react.shell.MainReactPackage;
 import com.facebook.soloader.SoLoader;
+import com.th3rdwave.safeareaview.SafeAreaViewPackage;
 
+import java.util.Arrays;
 import java.util.List;
 
 public class MainApplication extends Application implements ReactApplication {
@@ -23,16 +22,14 @@ public class MainApplication extends Application implements ReactApplication {
 
     @Override
     protected List<ReactPackage> getPackages() {
-      @SuppressWarnings("UnnecessaryLocalVariable")
-      List<ReactPackage> packages = new PackageList(this).getPackages();
-      // Packages that cannot be autolinked yet can be added manually here, for example:
-      // packages.add(new MyReactNativePackage());
-      return packages;
+      return Arrays.asList(
+          new MainReactPackage(),
+          new SafeAreaViewPackage());
     }
 
     @Override
     protected String getJSMainModuleName() {
-      return "index";
+      return "example/index";
     }
   };
 

example/android/build.gradle

@@ -25,11 +25,11 @@ allprojects {
         mavenLocal()
         maven {
             // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
-            url("$rootDir/../node_modules/react-native/android")
+            url("$rootDir/../../node_modules/react-native/android")
         }
         maven {
             // Android JSC is installed from npm
-            url("$rootDir/../node_modules/jsc-android/dist")
+            url("$rootDir/../../node_modules/jsc-android/dist")
         }
 
         google()

example/android/settings.gradle

@@ -1,3 +1,5 @@
 rootProject.name = 'SafeAreaViewExample'
-apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
 include ':app'
+
+include ':th3rdwave-safe-area-view'
+project(':th3rdwave-safe-area-view').projectDir = new File(rootProject.projectDir, '../../android')

src/index.tsx

@@ -29,6 +29,8 @@ export default function SafeAreaView({ children, style }: SafeAreaViewProps) {
     [],
   );
 
+  console.warn(insets);
+
   return (
     <NativeSafeAreaView
       style={[styles.fill, style]}