diff --git a/examples/responsive-screen-orientation-change/App.js b/examples/responsive-screen-orientation-change/App.js index 6d1f57e..74305e6 100644 --- a/examples/responsive-screen-orientation-change/App.js +++ b/examples/responsive-screen-orientation-change/App.js @@ -10,11 +10,14 @@ import { export default class App extends React.Component { componentWillMount() { - listenOrientationChange(this); + // `listenOrientationChange` returns the handler method, + // consider store it to be pushed back when removing the listener. + this.orientationChangeHandler = listenOrientationChange(this); } componentWillUnMount() { - removeOrientationListener(); + // Optionally path the original handler to be removed. + removeOrientationListener(this.orientationChangeHandler); } render() { diff --git a/examples/responsive-screen-orientation-change/local-package/react-native-responsive-screen-1.3.0-preview.tgz b/examples/responsive-screen-orientation-change/local-package/react-native-responsive-screen-1.3.0-preview.tgz new file mode 100644 index 0000000..50314b9 Binary files /dev/null and b/examples/responsive-screen-orientation-change/local-package/react-native-responsive-screen-1.3.0-preview.tgz differ diff --git a/examples/responsive-screen-orientation-change/package.json b/examples/responsive-screen-orientation-change/package.json index bf7e34d..2957fa0 100644 --- a/examples/responsive-screen-orientation-change/package.json +++ b/examples/responsive-screen-orientation-change/package.json @@ -22,6 +22,6 @@ "expo": "^27.0.1", "react": "16.3.1", "react-native": "~0.55.2", - "react-native-responsive-screen": "^1.1.2" + "react-native-responsive-screen": "file:./local-package/react-native-responsive-screen-1.3.0-preview.tgz" } } diff --git a/index.d.ts b/index.d.ts index d4b921c..8d342f5 100644 --- a/index.d.ts +++ b/index.d.ts @@ -3,6 +3,6 @@ declare module 'react-native-responsive-screen' { export function widthPercentageToDP(widthPercent: string | number): number; export function heightPercentageToDP(widthPercent: string | number): number; - export function listenOrientationChange(screenClassComponent: Component): void; - export function removeOrientationListener(): void; + export function listenOrientationChange(screenClassComponent: Component): (newDimensions: any) => void; + export function removeOrientationListener(orientationChangeHandler?: any): void; } diff --git a/index.js b/index.js index f620420..cde4e9a 100644 --- a/index.js +++ b/index.js @@ -47,16 +47,21 @@ const heightPercentageToDP = heightPercent => { * invoke setState method and trigger screen rerender (this.setState()). */ const listenOrientationChange = that => { - Dimensions.addEventListener('change', newDimensions => { + const orientationChangeHandler = newDimensions => { // Retrieve and save new dimensions screenWidth = newDimensions.window.width; screenHeight = newDimensions.window.height; - + // Trigger screen's rerender with a state update of the orientation variable that.setState({ orientation: screenWidth < screenHeight ? 'portrait' : 'landscape' }); - }); + } + + Dimensions.addEventListener('change', orientationChangeHandler); + + // Save this somewhere to path it back when removing the listener. + return orientationChangeHandler; }; /** @@ -65,7 +70,11 @@ const listenOrientationChange = that => { * listenOrientationChange function has been invoked. This should be done in order to * avoid adding new listeners every time the same component is re-mounted. */ -const removeOrientationListener = () => { +const removeOrientationListener = orientationChangeHandler => { + // Remove the original handler if possible, otherwise path an empty function. + if (orientationChangeHandler) { + return Dimensions.removeEventListener('change', orientationChangeHandler); + } Dimensions.removeEventListener('change', () => {}); };