[fix] Dimensions addEventListener returns subscription object

Fix #2130
Close #2131

packages/docs/src/pages/docs/apis/dimensions.md

@@ -33,7 +33,7 @@ Get a dimension (e.g., window or screen).
 This should only be called server-side with an estimate for initial dimensions to be used when pre-rendering pages on the server.
 {% endcall %}
 
-{% call macro.prop('addEventListener', '(type: ?string, listener: (dimensions) => void) => void') %}
+{% call macro.prop('addEventListener', '(type: ?string, listener: (dimensions) => void) => ?EmitterSubscription') %}
 Add a listener to `Dimensions` changes. Listen to the `"change"` event type. The handler is called with the dimensions state.
 {% endcall %}
 

packages/examples/pages/dimensions/index.js

@@ -12,9 +12,9 @@ export default function DimensionsPage() {
       setWindow(win);
     };
 
-    Dimensions.addEventListener('change', handleChange);
+    const subscription = Dimensions.addEventListener('change', handleChange);
     return () => {
-      Dimensions.removeEventListener('change', handleChange);
+      subscription.remove();
     };
   }, [setScreen, setWindow]);
 

packages/react-native-web/src/exports/Dimensions/__tests__/index-test.js

@@ -14,13 +14,16 @@ describe('apis/Dimensions', () => {
 
   test('addEventListener', () => {
     const handler = jest.fn();
-    Dimensions.addEventListener('change', handler);
+    const subscription = Dimensions.addEventListener('change', handler);
     Dimensions._update();
     expect(handler).toHaveBeenCalledTimes(1);
     expect(handler).toHaveBeenLastCalledWith({
       window: Dimensions.get('window'),
       screen: Dimensions.get('screen')
     });
+    subscription.remove();
+    Dimensions._update();
+    expect(handler).toHaveBeenCalledTimes(1);
   });
 
   test('removeEventListener', () => {

packages/react-native-web/src/exports/Dimensions/index.js

@@ -8,6 +8,7 @@
  * @flow
  */
 
+import type { EventSubscription } from '../../vendor/react-native/emitter/EventEmitter';
 import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
 import invariant from 'fbjs/lib/invariant';
 
@@ -94,9 +95,15 @@ export default class Dimensions {
   static addEventListener(
     type: DimensionEventListenerType,
     handler: (DimensionsValue) => void
-  ): void {
+  ): EventSubscription {
     listeners[type] = listeners[type] || [];
     listeners[type].push(handler);
+
+    return {
+      remove: () => {
+        this.removeEventListener(type, handler);
+      }
+    };
   }
 
   static removeEventListener(