react-native-responsive-dimensions/lib/commonjs/index.js

Resposive fontSize, height and width for your react-native components.

"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.useResponsiveScreenFontSize=exports.useResponsiveScreenWidth=exports.useResponsiveScreenHeight=exports.useResponsiveFontSize=exports.useResponsiveWidth=exports.useResponsiveHeight=exports.responsiveScreenFontSize=exports.responsiveScreenWidth=exports.responsiveScreenHeight=exports.responsiveFontSize=exports.responsiveWidth=exports.responsiveHeight=exports.useDimensionsChange=void 0;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _react=require("react");var _reactNative=require("react-native");var useDimensionsListener=function useDimensionsListener(){var _useState=(0,_react.useState)(_reactNative.Dimensions.get("screen")),_useState2=(0,_slicedToArray2.default)(_useState,2),screenDimension=_useState2[0],setScreenDimension=_useState2[1];var _useState3=(0,_react.useState)(_reactNative.Dimensions.get("window")),_useState4=(0,_slicedToArray2.default)(_useState3,2),windowDimension=_useState4[0],setWindowDimension=_useState4[1];(0,_react.useEffect)(function(){function handleDimensionChange(_ref){var window=_ref.window,screen=_ref.screen;setWindowDimension(window);setScreenDimension(screen);}_reactNative.Dimensions.addEventListener("change",handleDimensionChange);return function(){_reactNative.Dimensions.removeEventListener("change",handleDimensionChange);};},[]);return{screen:screenDimension,window:windowDimension};};var percentageCalculation=function percentageCalculation(max,val){return max*(val/100);};var fontCalculation=function fontCalculation(height,width,val){var widthDimension=height>width?width:height;var aspectRatioBasedHeight=16/9*widthDimension;return percentageCalculation(Math.sqrt(Math.pow(aspectRatioBasedHeight,2)+Math.pow(widthDimension,2)),val);};var useDimensionsChange=function useDimensionsChange(effect){var hasMountRef=(0,_react.useRef)(false);var dimensions=useDimensionsListener();(0,_react.useEffect)(function(){if(hasMountRef.current){var destroy=effect(dimensions);var cleanUp=function cleanUp(){return null;};if(typeof destroy==="function"){cleanUp=destroy;}return function(){return cleanUp();};}else{hasMountRef.current=true;}},[dimensions,effect]);};exports.useDimensionsChange=useDimensionsChange;var responsiveHeight=function responsiveHeight(h){var _Dimensions$get=_reactNative.Dimensions.get("window"),height=_Dimensions$get.height;return percentageCalculation(height,h);};exports.responsiveHeight=responsiveHeight;var responsiveWidth=function responsiveWidth(w){var _Dimensions$get2=_reactNative.Dimensions.get("window"),width=_Dimensions$get2.width;return percentageCalculation(width,w);};exports.responsiveWidth=responsiveWidth;var responsiveFontSize=function responsiveFontSize(f){var _Dimensions$get3=_reactNative.Dimensions.get("window"),height=_Dimensions$get3.height,width=_Dimensions$get3.width;return fontCalculation(height,width,f);};exports.responsiveFontSize=responsiveFontSize;var responsiveScreenHeight=function responsiveScreenHeight(h){var _Dimensions$get4=_reactNative.Dimensions.get("screen"),height=_Dimensions$get4.height;return percentageCalculation(height,h);};exports.responsiveScreenHeight=responsiveScreenHeight;var responsiveScreenWidth=function responsiveScreenWidth(w){var _Dimensions$get5=_reactNative.Dimensions.get("screen"),width=_Dimensions$get5.width;return percentageCalculation(width,w);};exports.responsiveScreenWidth=responsiveScreenWidth;var responsiveScreenFontSize=function responsiveScreenFontSize(f){var _Dimensions$get6=_reactNative.Dimensions.get("screen"),height=_Dimensions$get6.height,width=_Dimensions$get6.width;return fontCalculation(height,width,f);};exports.responsiveScreenFontSize=responsiveScreenFontSize;var useResponsiveHeight=function useResponsiveHeight(h){var height=useDimensionsListener().window.height;return percentageCalculation(height,h);};exports.useResponsiveHeight=useResponsiveHeight;var useResponsiveWidth=function useResponsiveWidth(w){var width=useDimensionsListener().window.width;return percentageCalculation(width,w);};exports.useResponsiveWidth=useResponsiveWidth;var useResponsiveFontSize=function useResponsiveFontSize(f){var _useDimensionsListene=useDimensionsListener().window,height=_useDimensionsListene.height,width=_useDimensionsListene.width;return fontCalculation(height,width,f);};exports.useResponsiveFontSize=useResponsiveFontSize;var useResponsiveScreenHeight=function useResponsiveScreenHeight(h){var height=useDimensionsListener().screen.height;return percentageCalculation(height,h);};exports.useResponsiveScreenHeight=useResponsiveScreenHeight;var useResponsiveScreenWidth=function useResponsiveScreenWidth(w){var width=useDimensionsListener().screen.width;return percentageCalculation(width,w);};exports.useResponsiveScreenWidth=useResponsiveScreenWidth;var useResponsiveScreenFontSize=function useResponsiveScreenFontSize(f){var _useDimensionsListene2=useDimensionsListener().screen,height=_useDimensionsListene2.height,width=_useDimensionsListene2.width;return fontCalculation(height,width,f);};exports.useResponsiveScreenFontSize=useResponsiveScreenFontSize;
//# sourceMappingURL=index.js.map