UNPKG

react-native-text

Version:

Scalable font size in Text component for React Native

2 lines 2.29 kB
import _extends from"@babel/runtime/helpers/extends";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _jsxFileName="/Users/mzatorski/Projects/react-native-text/src/index.tsx";import React,{useMemo}from'react';import{Dimensions,Text,StyleSheet}from'react-native';var _Dimensions$get=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;export 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)};};export 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 useMemo(function(){return{fontSize:Math.round(fontSize*REAL_WIDTH/deviceBaseWidth),lineHeight:Math.round(lineHeight*REAL_WIDTH/deviceBaseWidth)};},[deviceBaseWidth,fontSize,lineHeight]);};var ScalableText=function ScalableText(_ref3){var deviceBaseWidth=_ref3.deviceBaseWidth,_ref3$style=_ref3.style,style=_ref3$style===void 0?{}:_ref3$style,children=_ref3.children,props=_objectWithoutProperties(_ref3,["deviceBaseWidth","style","children"]);var _StyleSheet$flatten=StyleSheet.flatten(style),fontSize=_StyleSheet$flatten.fontSize,lineHeight=_StyleSheet$flatten.lineHeight;var _useScaleText=useScaleText({deviceBaseWidth:deviceBaseWidth,fontSize:fontSize,lineHeight:lineHeight}),scaledText=_extends({},_useScaleText);return React.createElement(Text,_extends({style:StyleSheet.flatten([style,scaledText])},props,{__source:{fileName:_jsxFileName,lineNumber:56}}),children);};export default ScalableText; //# sourceMappingURL=index.js.map