UNPKG

react-native-text

Version:

Scalable font size in Text component for React Native

2 lines 2.82 kB
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");var _interopRequireWildcard=require("@babel/runtime/helpers/interopRequireWildcard");Object.defineProperty(exports,"__esModule",{value:true});exports.default=exports.useScaleText=exports.scaleText=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _jsxFileName="/Users/mzatorski/Projects/react-native-text/src/index.tsx";var _Dimensions$get=_reactNative.Dimensions.get('window'),width=_Dimensions$get.width,height=_Dimensions$get.height;var DEVICE_BASE_WIDTH=375;var FONT_SIZE=14;var REAL_WIDTH=height>width?width:height;var scaleText=function scaleText(_ref){var _ref$deviceBaseWidth=_ref.deviceBaseWidth,deviceBaseWidth=_ref$deviceBaseWidth===void 0?DEVICE_BASE_WIDTH:_ref$deviceBaseWidth,_ref$fontSize=_ref.fontSize,fontSize=_ref$fontSize===void 0?FONT_SIZE:_ref$fontSize,_ref$lineHeight=_ref.lineHeight,lineHeight=_ref$lineHeight===void 0?fontSize*1.2:_ref$lineHeight;return{fontSize:Math.round(fontSize*REAL_WIDTH/deviceBaseWidth),lineHeight:Math.round(lineHeight*REAL_WIDTH/deviceBaseWidth)};};exports.scaleText=scaleText;var useScaleText=function useScaleText(_ref2){var _ref2$deviceBaseWidth=_ref2.deviceBaseWidth,deviceBaseWidth=_ref2$deviceBaseWidth===void 0?DEVICE_BASE_WIDTH:_ref2$deviceBaseWidth,_ref2$fontSize=_ref2.fontSize,fontSize=_ref2$fontSize===void 0?FONT_SIZE:_ref2$fontSize,_ref2$lineHeight=_ref2.lineHeight,lineHeight=_ref2$lineHeight===void 0?fontSize*1.2:_ref2$lineHeight;return(0,_react.useMemo)(function(){return{fontSize:Math.round(fontSize*REAL_WIDTH/deviceBaseWidth),lineHeight:Math.round(lineHeight*REAL_WIDTH/deviceBaseWidth)};},[deviceBaseWidth,fontSize,lineHeight]);};exports.useScaleText=useScaleText;var ScalableText=function ScalableText(_ref3){var deviceBaseWidth=_ref3.deviceBaseWidth,_ref3$style=_ref3.style,style=_ref3$style===void 0?{}:_ref3$style,children=_ref3.children,props=(0,_objectWithoutProperties2.default)(_ref3,["deviceBaseWidth","style","children"]);var _StyleSheet$flatten=_reactNative.StyleSheet.flatten(style),fontSize=_StyleSheet$flatten.fontSize,lineHeight=_StyleSheet$flatten.lineHeight;var _useScaleText=useScaleText({deviceBaseWidth:deviceBaseWidth,fontSize:fontSize,lineHeight:lineHeight}),scaledText=(0,_extends2.default)({},_useScaleText);return _react.default.createElement(_reactNative.Text,(0,_extends2.default)({style:_reactNative.StyleSheet.flatten([style,scaledText])},props,{__source:{fileName:_jsxFileName,lineNumber:56}}),children);};var _default=ScalableText;exports.default=_default; //# sourceMappingURL=index.js.map