diff --git a/packages/docs/src/pages/docs/apis/dimensions.md b/packages/docs/src/pages/docs/apis/dimensions.md index 6f9d938b..f9995a3e 100644 --- a/packages/docs/src/pages/docs/apis/dimensions.md +++ b/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 %} diff --git a/packages/examples/pages/dimensions/index.js b/packages/examples/pages/dimensions/index.js index 33d6d0e1..2d6b4af6 100644 --- a/packages/examples/pages/dimensions/index.js +++ b/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]); diff --git a/packages/react-native-web/src/exports/Dimensions/__tests__/index-test.js b/packages/react-native-web/src/exports/Dimensions/__tests__/index-test.js index c068e81a..283e6f93 100644 --- a/packages/react-native-web/src/exports/Dimensions/__tests__/index-test.js +++ b/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', () => { diff --git a/packages/react-native-web/src/exports/Dimensions/index.js b/packages/react-native-web/src/exports/Dimensions/index.js index 36fdce7d..6629d180 100644 --- a/packages/react-native-web/src/exports/Dimensions/index.js +++ b/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(