create responsive hooks

Author: DaniAkash

src/index.js

@@ -22,6 +22,7 @@
  * SOFTWARE.
  */
 
+import { useState, useEffect } from "react";
 import { Dimensions } from "react-native";
 
 export const responsiveHeight = h => {
@@ -39,3 +40,56 @@ export const responsiveFontSize = f => {
   const tempHeight = (16 / 9) * width;
   return Math.sqrt(Math.pow(tempHeight, 2) + Math.pow(width, 2)) * (f / 100);
 };
+
+export const useResponsiveHeight = h => {
+  const [calculatedHeight, setCalculatedHeight] = useState(responsiveHeight(h));
+
+  useEffect(() => {
+    function handleDimensionChange() {
+      setCalculatedHeight(responsiveHeight(h));
+    }
+
+    Dimensions.addEventListener("change", handleDimensionChange);
+    return () => {
+      Dimensions.removeEventListener("change", handleDimensionChange);
+    };
+  });
+
+  return calculatedHeight;
+};
+
+export const useResponsiveWidth = w => {
+  const [calculatedWidth, setCalculatedWidth] = useState(responsiveWidth(w));
+
+  useEffect(() => {
+    function handleDimensionChange() {
+      setCalculatedWidth(responsiveWidth(w));
+    }
+
+    Dimensions.addEventListener("change", handleDimensionChange);
+    return () => {
+      Dimensions.removeEventListener("change", handleDimensionChange);
+    };
+  });
+
+  return calculatedWidth;
+};
+
+export const useResponsiveFontSize = f => {
+  const [calculatedFontSize, setCalculatedFontSize] = useState(
+    responsiveFontSize(f)
+  );
+
+  useEffect(() => {
+    function handleDimensionChange() {
+      setCalculatedFontSize(responsiveFontSize(f));
+    }
+
+    Dimensions.addEventListener("change", handleDimensionChange);
+    return () => {
+      Dimensions.removeEventListener("change", handleDimensionChange);
+    };
+  });
+
+  return calculatedFontSize;
+};