Update deps and example

.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',
+          '@typescript-eslint/ban-ts-ignore': 'off',
           'react-native/no-inline-styles': 'off',
         },
       ),

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

@@ -1,8 +1,6 @@
 package com.th3rdwave.safeareacontext;
 
-import android.app.Activity;
 import android.content.Context;
-import android.content.ContextWrapper;
 import android.os.Build;
 import android.view.Surface;
 import android.view.View;
@@ -30,17 +28,6 @@ public class SafeAreaView extends ReactViewGroup implements ViewTreeObserver.OnG
     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

example/App.tsx

@@ -1,59 +1,10 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
- * @format
- * @flow
- */
-
 import * as React from 'react';
-import { StyleSheet, ScrollView, View, Text, StatusBar } from 'react-native';
-
-import {
-  Header,
-  LearnMoreLinks,
-  Colors,
-  DebugInstructions,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
+import { View, Text, StatusBar, Button } from 'react-native';
 
 // import { SafeAreaProvider, useSafeArea } from 'react-native-safe-area-context'; in your app.
 import { SafeAreaProvider, useSafeArea } from '../src';
 
-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 Screen = () => {
   const insets = useSafeArea();
   return (
     <>
@@ -62,97 +13,42 @@ const App = () => {
         translucent={false}
         backgroundColor="transparent"
       />
-      <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>
-            <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)',
+          flex: 1,
+          backgroundColor: 'red',
+          paddingTop: insets.top,
+          paddingLeft: insets.left,
+          paddingBottom: insets.bottom,
+          paddingRight: insets.right,
         }}
-      />
+      >
+        <View
+          style={{
+            flex: 1,
+            backgroundColor: 'white',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <Text>Insets: {JSON.stringify(insets, null, 2)}</Text>
+        </View>
+      </View>
     </>
   );
 };
 
-const styles = StyleSheet.create({
-  scrollView: {
-    backgroundColor: Colors.lighter,
-  },
-  engine: {
-    position: 'absolute',
-    right: 0,
-  },
-  body: {
-    backgroundColor: Colors.white,
-  },
-  sectionContainer: {
-    marginTop: 32,
-    paddingHorizontal: 24,
-  },
-  sectionTitle: {
-    fontSize: 24,
-    fontWeight: '600',
-    color: Colors.black,
-  },
-  sectionDescription: {
-    marginTop: 8,
-    fontSize: 18,
-    fontWeight: '400',
-    color: Colors.dark,
-  },
-  highlight: {
-    fontWeight: '700',
-  },
-  footer: {
-    color: Colors.dark,
-    fontSize: 12,
-    fontWeight: '600',
-    padding: 4,
-    paddingRight: 12,
-    textAlign: 'right',
-  },
-});
-
-export default () => (
-  <SafeAreaProvider>
-    <App />
-  </SafeAreaProvider>
-);
+export default function App() {
+  const [refreshKey, setRefreshKey] = React.useState(1);
+  return (
+    <View key={refreshKey} style={{ flex: 1 }}>
+      <SafeAreaProvider>
+        <Screen />
+        <Button
+          title="Refresh"
+          onPress={() => setRefreshKey(state => state + 1)}
+        />
+      </SafeAreaProvider>
+    </View>
+  );
+}

package.json

@@ -44,20 +44,20 @@
   "devDependencies": {
     "@react-native-community/bob": "^0.7.0",
     "@react-native-community/eslint-config": "^0.0.5",
-    "@types/react-native": "^0.60.5",
-    "@typescript-eslint/eslint-plugin": "^1.7.0",
-    "@typescript-eslint/parser": "^1.7.0",
-    "eslint": "5.16.0",
-    "eslint-config-prettier": "^4.2.0",
-    "eslint-plugin-prettier": "3.0.1",
-    "expo": "^34.0.4",
-    "metro-react-native-babel-preset": "^0.55.0",
+    "@types/react-native": "^0.60.22",
+    "@typescript-eslint/eslint-plugin": "^2.6.0",
+    "@typescript-eslint/parser": "^2.6.0",
+    "eslint": "6.6.0",
+    "eslint-config-prettier": "^6.5.0",
+    "eslint-plugin-prettier": "3.1.1",
+    "expo": "^35.0.0",
+    "metro-react-native-babel-preset": "^0.57.0",
     "prettier": "^1.18.2",
-    "react": "^16.8.3",
-    "react-dom": "^16.9.0",
-    "react-native": "^0.60.5",
+    "react": "^16.11.0",
+    "react-dom": "^16.11.0",
+    "react-native": "^0.61.0",
     "react-native-web": "^0.11.7",
-    "typescript": "^3.5.3"
+    "typescript": "^3.6.4"
   },
   "repository": {
     "type": "git",

src/NativeSafeAreaView.web.tsx

@@ -9,13 +9,13 @@ interface NativeSafeAreaViewProps {
   onInsetsChange: InsetChangeNativeCallback;
 }
 
-enum CSSTransitions {
-  WebkitTransition = 'webkitTransitionEnd',
-  Transition = 'transitionEnd',
-  MozTransition = 'transitionend',
-  MSTransition = 'msTransitionEnd',
-  OTransition = 'oTransitionEnd',
-}
+const CSSTransitions: Record<string, string> = {
+  WebkitTransition: 'webkitTransitionEnd',
+  Transition: 'transitionEnd',
+  MozTransition: 'transitionend',
+  MSTransition: 'msTransitionEnd',
+  OTransition: 'oTransitionEnd',
+};
 
 export default function NativeSafeAreaView({
   children,
@@ -67,7 +67,7 @@ function getSupportedTransitionEvent(): string {
 
   _supportedTransitionEvent = CSSTransitions.Transition;
   for (const key in CSSTransitions) {
-    if (element.style[key] !== undefined) {
+    if (element.style[key as keyof CSSStyleDeclaration] !== undefined) {
       _supportedTransitionEvent = CSSTransitions[key];
       break;
     }
@@ -82,7 +82,6 @@ function getSupportedEnv(): CssEnv {
   if (_supportedEnv !== null) {
     return _supportedEnv;
   }
-  // @ts-ignore: Property 'CSS' does not exist on type 'Window'.ts(2339)
   const { CSS } = window;
   if (
     CSS &&