Fixed #21

README.md

@@ -36,6 +36,9 @@ Check out [this medium article](https://medium.com/react-native-training/build-r
 * There are 2 more methods to use if you want to support responsiveness along with orientation change. These are `listenOrientationChange` and `removeOrientationListener`. To see how to use them, check example number 3.
 * You can use this package along with `styled-components`. To see how to do that, check example number 2.
 
+# Updates 🚀
+* `widthPercentageToDP` and `heightPercentageToDP` methods accept numeric values as well from version 1.2.1 onwards. That being said a width of 53% can now be written both `width: widthPercentageToDP('53%')` and `width: widthPercentageToDP(53)`.
+
 # Examples
 
 ## 1. How to use with StyleSheet.create() and without orientation change support 

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();
+    // Path the original handler to be removed.
+    removeOrientationListener(this.orientationChangeHandler);
   }
 
   render() {

index.d.ts

@@ -1,8 +1,8 @@
 declare module 'react-native-responsive-screen' {
   import { Component } from 'react';
 
-  export function widthPercentageToDP(widthPercent: string): number;
-  export function heightPercentageToDP(widthPercent: string): number;
-  export function listenOrientationChange(screenClassComponent: Component<any, any>): void;
-  export function removeOrientationListener(): void;
+  export function widthPercentageToDP(widthPercent: string | number): number;
+  export function heightPercentageToDP(widthPercent: string | number): number;
+  export function listenOrientationChange(screenClassComponent: Component<any, any>): (newDimensions: any) => void;
+  export function removeOrientationListener(orientationChangeHandler: any): void;
 }

index.js

@@ -15,7 +15,7 @@ let screenHeight = Dimensions.get('window').height;
  */
 const widthPercentageToDP = widthPercent => {
   // Parse string percentage input and convert it to number.
-  const elemWidth = parseFloat(widthPercent);
+  const elemWidth = typeof widthPercent === "number" ? widthPercent : parseFloat(widthPercent);
 
   // Use PixelRatio.roundToNearestPixel method in order to round the layout
   // size (dp) to the nearest one that correspons to an integer number of pixels.
@@ -30,7 +30,7 @@ const widthPercentageToDP = widthPercent => {
  */
 const heightPercentageToDP = heightPercent => {
   // Parse string percentage input and convert it to number.
-  const elemHeight = parseFloat(heightPercent);
+  const elemHeight = typeof heightPercent === "number" ? heightPercent : parseFloat(heightPercent);
 
   // Use PixelRatio.roundToNearestPixel method in order to round the layout
   // size (dp) to the nearest one that correspons to an integer number of pixels.
@@ -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,8 +70,12 @@ 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 = () => {
-  Dimensions.removeEventListener('change', () => {});
+const removeOrientationListener = orientationChangeHandler => {
+  // Warn if the original handler not passed.
+  if (orientationChangeHandler) {
+    console.warn('Please push back the original handler to be removed');
+  }
+  return Dimensions.removeEventListener('change', orientationChangeHandler);
 };
 
 export {