Support RN 0.71 EventEmitter Changes

package.json

@@ -38,21 +38,14 @@
     "core-js": "^3.6.5",
     "eslint": "^7.12.0",
     "eslint-config-satya164": "^3.1.8",
-    "husky": "^4.2.5",
     "jest": "^26.6.1",
     "lerna": "^3.22.1",
     "prettier": "^2.1.2",
-    "typescript": "^4.0.3"
+    "typescript": "4.8.4"
   },
   "resolutions": {
     "react": "~16.13.1",
-    "react-native": "~0.63.2"
-  },
-  "husky": {
-    "hooks": {
-      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
-      "pre-commit": "yarn lint && yarn typescript && yarn test"
-    }
+    "react-native": "~0.71.3"
   },
   "jest": {
     "testEnvironment": "node",

packages/drawer/src/views/DrawerView.tsx

@@ -92,7 +92,10 @@ export default class DrawerView extends React.PureComponent<Props, State> {
       this.handleDrawerOpen();
     }
 
-    Dimensions.addEventListener('change', this.updateWidth);
+    this.onDimensionChangedEventSubscriber = Dimensions.addEventListener(
+      'change',
+      this.updateWidth
+    );
   }
 
   componentDidUpdate(prevProps: Props) {
@@ -109,7 +112,7 @@ export default class DrawerView extends React.PureComponent<Props, State> {
   }
 
   componentWillUnmount() {
-    Dimensions.removeEventListener('change', this.updateWidth);
+    this.onDimensionChangedEventSubscriber?.remove();
   }
 
   context!: React.ContextType<typeof ThemeContext>;

packages/native/package.json

@@ -36,7 +36,7 @@
   "homepage": "https://github.com/react-navigation/react-navigation-native#readme",
   "dependencies": {
     "hoist-non-react-statics": "^3.3.2",
-    "react-native-safe-area-view": "^0.14.9"
+    "react-native-safe-area-context": "4.5.0"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.16.2",

packages/native/src/index.js

@@ -22,7 +22,8 @@ module.exports = {
   },
 
   get SafeAreaView() {
-    return require('react-native-safe-area-view').default;
+    // react-native-safe-area-view is deprecated, use the new package
+    return require('react-native-safe-area-context/lib/commonjs').SafeAreaView;
   },
 
   get ScrollView() {

packages/native/src/withOrientation.js

@@ -14,11 +14,14 @@ export default function (WrappedComponent) {
     }
 
     componentDidMount() {
-      Dimensions.addEventListener('change', this.handleOrientationChange);
+      this.onDimensionChangedEventSubscriber = Dimensions.addEventListener(
+        'change',
+        this.handleOrientationChange
+      );
     }
 
     componentWillUnmount() {
-      Dimensions.removeEventListener('change', this.handleOrientationChange);
+      this.onDimensionChangedEventSubscriber?.remove();
     }
 
     handleOrientationChange = ({ window }) => {

packages/react-navigation/package.json

@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@react-navigation/core": "^3.7.9",
-    "@react-navigation/native": "^3.8.4"
+    "@react-navigation/native": "https://github.com/TeamGuilded/react-navigation.git#react-navigation-native-v3.8.4-gitpkg"
   },
   "devDependencies": {
     "@types/react": "^16.9.53",

packages/tabs/package.json

@@ -72,13 +72,7 @@
     "output": "lib",
     "targets": [
       "commonjs",
-      "module",
-      [
-        "typescript",
-        {
-          "project": "tsconfig.build.json"
-        }
-      ]
+      "module"
     ]
   }
 }

packages/tabs/src/utils/withDimensions.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Dimensions, ScaledSize } from 'react-native';
+import { Dimensions, ScaledSize, EmitterSubscription } from 'react-native';
 import hoistNonReactStatic from 'hoist-non-react-statics';
 
 type DimensionsType = {
@@ -32,13 +32,18 @@ export default function withDimensions<Props extends InjectedProps>(
     }
 
     componentDidMount() {
-      Dimensions.addEventListener('change', this.handleOrientationChange);
+      this.onDimensionChangedEventSubscriber = Dimensions.addEventListener(
+        'change',
+        this.handleOrientationChange
+      );
     }
 
     componentWillUnmount() {
-      Dimensions.removeEventListener('change', this.handleOrientationChange);
+      this.onDimensionChangedEventSubscriber?.remove();
     }
 
+    onDimensionChangedEventSubscriber: EmitterSubscription | null = null;
+
     handleOrientationChange = ({ window }: { window: ScaledSize }) => {
       const { width, height } = window;
       this.setState({