RN: Change Dimensions to Return EventSubscription

Summary:
Changes `Dimensions.addEventListener` to return an `EventSubscription` object that has a `remove()` method on it.

In an upcoming commit, calling `Dimensions.removeEventListener` will lead to a deprecation warning.

Changelog:
[General][Change] - `Dimensions.addEventListener` now returns an `EventSubscription`.

Reviewed By: kacieb

Differential Revision: D26808827

fbshipit-source-id: 0cfdc65b83c177f60937c1aa3a4cf633592f73d7

Libraries/Utilities/Dimensions.js

@@ -8,7 +8,9 @@
  * @flow
  */
 
-import EventEmitter from '../vendor/emitter/EventEmitter';
+import EventEmitter, {
+  type EventSubscription,
+} from '../vendor/emitter/EventEmitter';
 import RCTDeviceEventEmitter from '../EventEmitter/RCTDeviceEventEmitter';
 import NativeDeviceInfo, {
   type DisplayMetrics,
@@ -100,24 +102,28 @@ class Dimensions {
    *   are the same as the return values of `Dimensions.get('window')` and
    *   `Dimensions.get('screen')`, respectively.
    */
-  static addEventListener(type: 'change', handler: Function) {
+  static addEventListener(
+    type: 'change',
+    handler: Function,
+  ): EventSubscription {
     invariant(
       type === 'change',
       'Trying to subscribe to unknown event: "%s"',
       type,
     );
-    eventEmitter.addListener(type, handler);
+    return eventEmitter.addListener(type, handler);
   }
 
   /**
-   * Remove an event handler.
+   * @deprecated Use `remove` on the EventSubscription from `addEventListener`.
    */
   static removeEventListener(type: 'change', handler: Function) {
     invariant(
       type === 'change',
       'Trying to remove listener for unknown event: "%s"',
       type,
     );
+    // NOTE: This will report a deprecation notice via `console.error`.
     eventEmitter.removeListener(type, handler);
   }
 }

Libraries/Utilities/useWindowDimensions.js

@@ -25,13 +25,13 @@ export default function useWindowDimensions(): DisplayMetrics {
         setDimensions(window);
       }
     }
-    Dimensions.addEventListener('change', handleChange);
+    const subscription = Dimensions.addEventListener('change', handleChange);
     // We might have missed an update between calling `get` in render and
     // `addEventListener` in this handler, so we set it here. If there was
     // no change, React will filter out this update as a no-op.
     handleChange({window: Dimensions.get('window')});
     return () => {
-      Dimensions.removeEventListener('change', handleChange);
+      subscription.remove();
     };
   }, [dimensions]);
   return dimensions;

packages/rn-tester/js/examples/Dimensions/DimensionsExample.js

@@ -8,6 +8,7 @@
  * @flow
  */
 
+import type {EventSubscription} from 'react-native/Libraries/vendor/emitter/EventEmitter';
 import {Dimensions, Text, useWindowDimensions} from 'react-native';
 import * as React from 'react';
 
@@ -19,20 +20,23 @@ class DimensionsSubscription extends React.Component<
     dims: Dimensions.get(this.props.dim),
   };
 
+  _dimensionsSubscription: ?EventSubscription;
+
   componentDidMount() {
-    Dimensions.addEventListener('change', this._handleDimensionsChange);
+    this._dimensionsSubscription = Dimensions.addEventListener(
+      'change',
+      dimensions => {
+        this.setState({
+          dims: dimensions[this.props.dim],
+        });
+      },
+    );
   }
 
   componentWillUnmount() {
-    Dimensions.removeEventListener('change', this._handleDimensionsChange);
+    this._dimensionsSubscription?.remove();
   }
 
-  _handleDimensionsChange = dimensions => {
-    this.setState({
-      dims: dimensions[this.props.dim],
-    });
-  };
-
   render() {
     return <Text>{JSON.stringify(this.state.dims, null, 2)}</Text>;
   }