⬆️ (react-native) calling getNode on the ref is no longer necessary

package.json

@@ -55,11 +55,11 @@
     "@babel/core": "^7",
     "@react-native-community/bob": "^0.6.1",
     "@types/react": "~16.8",
-    "@types/react-native": "^0.60.7",
+    "@types/react-native": "^0.62.1",
     "prettier": "^1.18.2",
     "react": "16.8.3",
-    "react-native": "^0.59.8",
+    "react-native": "^0.62.0",
     "react-native-safe-area-context": "^0.3.5",
-    "typescript": "^3.5.2"
+    "typescript": "^3.8.3"
   }
 }

src/index.tsx

@@ -45,10 +45,11 @@ interface State {
   viewHeight: number;
 }
 
-// note(brentvatne): Animated.View is typed as any in @types/react-native, so
-// let's improve that a bit here
-interface AnimatedView {
-  getNode(): View;
+// https://github.com/facebook/react-native/blob/282b8b04e167cb426e40947064c4c18186e093f5/Libraries/ReactNative/DummyUIManager.js#L64
+interface AnimatedView extends Animated.AnimatedComponent<View> {
+  measureInWindow: (
+    callback: (x: number, y: number, width: number, height: number) => void
+  ) => void;
 }
 
 export default class SafeAreaView extends React.Component<Props, State> {
@@ -82,6 +83,7 @@ export default class SafeAreaView extends React.Component<Props, State> {
 
     return (
       <Animated.View
+        // @ts-ignore
         ref={this._view}
         pointerEvents="box-none"
         {...props}
@@ -103,38 +105,40 @@ export default class SafeAreaView extends React.Component<Props, State> {
 
     const { width: WIDTH, height: HEIGHT } = getResolvedDimensions();
 
-    this._view.current
-      .getNode()
-      .measureInWindow((realX, realY, winWidth, winHeight) => {
-        if (!this._view.current) {
-          return;
-        }
-
-        if (realY >= HEIGHT) {
-          realY = realY % HEIGHT;
-        } else if (realY < 0) {
-          realY = (realY % HEIGHT) + HEIGHT;
-        }
-
-        if (realX >= WIDTH) {
-          realX = realX % WIDTH;
-        } else if (realX < 0) {
-          realX = (realX % WIDTH) + WIDTH;
-        }
-
-        let nextState = {
-          touchesTop: realY === 0,
-          touchesBottom: realY + winHeight >= HEIGHT,
-          touchesLeft: realX === 0,
-          touchesRight: realX + winWidth >= WIDTH,
-          viewWidth: winWidth,
-          viewHeight: winHeight,
-        };
-
-        if (!shallowEquals(nextState, this.state)) {
-          this.setState(nextState);
-        }
-      });
+    // calling getNode on the ref is no longer necessary in the future
+    const view = this._view.current.measureInWindow
+      ? this._view.current
+      : this._view.current.getNode();
+    view.measureInWindow((realX, realY, winWidth, winHeight) => {
+      if (!this._view.current) {
+        return;
+      }
+
+      if (realY >= HEIGHT) {
+        realY = realY % HEIGHT;
+      } else if (realY < 0) {
+        realY = (realY % HEIGHT) + HEIGHT;
+      }
+
+      if (realX >= WIDTH) {
+        realX = realX % WIDTH;
+      } else if (realX < 0) {
+        realX = (realX % WIDTH) + WIDTH;
+      }
+
+      let nextState = {
+        touchesTop: realY === 0,
+        touchesBottom: realY + winHeight >= HEIGHT,
+        touchesLeft: realX === 0,
+        touchesRight: realX + winWidth >= WIDTH,
+        viewWidth: winWidth,
+        viewHeight: winHeight,
+      };
+
+      if (!shallowEquals(nextState, this.state)) {
+        this.setState(nextState);
+      }
+    });
   };
 
   _getSafeAreaStyle = () => {

tsconfig.json

@@ -5,9 +5,7 @@
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "jsx": "react",
-    "lib": [
-      "esnext"
-    ],
+    "lib": ["esnext"],
     "module": "esnext",
     "moduleResolution": "node",
     "noFallthroughCasesInSwitch": true,
@@ -20,5 +18,6 @@
     "skipLibCheck": true,
     "strict": true,
     "target": "esnext"
-  }
+  },
+  "include": ["./src/*"]
 }