@tecsinapse/react-core 1.12.1 → 1.12.5

package/dist/utils/index.js

@@ -3,6 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  lightenDarkenColor: true,
+  extractNumbersFromString: true,
+  extractDigitsFromString: true
+};
 Object.defineProperty(exports, "lightenDarkenColor", {
   enumerable: true,
   get: function () {
@@ -25,4 +30,32 @@ Object.defineProperty(exports, "extractDigitsFromString", {
 var _lightenDarkenColor = require("./lightenDarkenColor");
 
 var _extractNumbersFromString = require("./extractNumbersFromString");
+
+var _IPhoneXHelper = require("./IPhoneXHelper");
+
+Object.keys(_IPhoneXHelper).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _IPhoneXHelper[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _IPhoneXHelper[key];
+    }
+  });
+});
+
+var _ResponsiveFontSize = require("./ResponsiveFontSize");
+
+Object.keys(_ResponsiveFontSize).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ResponsiveFontSize[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ResponsiveFontSize[key];
+    }
+  });
+});
 //# sourceMappingURL=index.js.map

package/dist/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA","sourcesContent":["export { lightenDarkenColor } from './lightenDarkenColor';\nexport {\n  extractNumbersFromString,\n  extractDigitsFromString,\n} from './extractNumbersFromString';\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/utils/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AAIA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export { lightenDarkenColor } from './lightenDarkenColor';\nexport {\n  extractNumbersFromString,\n  extractDigitsFromString,\n} from './extractNumbersFromString';\nexport * from './IPhoneXHelper'\nexport * from './ResponsiveFontSize'"],"file":"index.js"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tecsinapse/react-core",
   "description": "TecSinapse hybrid React components",
-  "version": "1.12.1",
+  "version": "1.12.5",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -31,5 +31,5 @@
     "react-native": ">=0.64.0",
     "react-native-vector-icons": ">=8.1.0"
   },
-  "gitHead": "50b3fc522e7726e43f9dd16d9681faf0a1e5a4d6"
+  "gitHead": "ce86b8c8b3e7c09e0fd86689418b540010f1419b"
 }

package/src/components/atoms/Badge/styled.ts

@@ -1,6 +1,7 @@
-import { View } from 'react-native';
 import styled, { css } from '@emotion/native';
-import { StyleProps } from '@tecsinapse/react-core';
+import { View } from 'react-native';
+import { StyleProps } from '../../../types/defaults';
+import { RFValueStr } from '../../../utils';
 import { BadgeProps } from './Badge';
 
 const baseStyle = ({
@@ -17,8 +18,8 @@ const baseStyle = ({
     justify-content: center;
     height: ${theme.iconSize.centi};
     width: ${theme.iconSize.centi};
-    top: -4px;
-    right: -4px;
+    top: ${RFValueStr('-4px')};
+    right: ${RFValueStr('-4px')};
   `;
 };
 

package/src/components/atoms/Button/styled.ts

@@ -1,5 +1,6 @@
 import styled, { css } from '@emotion/native';
 import { StyleProps } from '../../../types/defaults';
+import { RFValueStr } from '../../../utils';
 import { PressableSurface } from '../PressableSurface';
 import { ButtonProps } from './Button';
 
@@ -20,12 +21,12 @@ const sizeStyles = ({ theme, size = 'default' }: StyleProps & ButtonProps) => {
     case 'small':
       return css`
         padding: ${theme.spacing.mili} ${theme.spacing.deca};
-        min-height: 34px;
+        min-height: ${RFValueStr('34px')};
       `;
     default:
       return css`
         padding: ${theme.spacing.mili} ${theme.spacing.kilo};
-        min-height: 44px;
+        min-height: ${RFValueStr('44px')};
       `;
   }
 };

package/src/components/atoms/GroupButton/styled.ts

@@ -1,6 +1,7 @@
 import styled, { css } from '@emotion/native';
 import { FC } from 'react';
 import { StyleProps } from '../../../types/defaults';
+import { RFValueStr } from '../../../utils';
 import { ButtonSizeType } from '../Button';
 import { PressableSurface } from '../PressableSurface';
 import { TextProps } from '../Text';
@@ -104,12 +105,12 @@ const sizeStyles = ({
     case 'small':
       return css`
         padding: ${theme?.spacing.mili} ${theme?.spacing.deca};
-        min-height: 34px;
+        min-height: ${RFValueStr('34px')};
       `;
     default:
       return css`
         padding: ${theme?.spacing.mili} ${theme?.spacing.kilo};
-        min-height: 44px;
+        min-height: ${RFValueStr('44px')};
       `;
   }
 };

package/src/components/atoms/Input/styled.ts

@@ -2,6 +2,7 @@ import styled, { css } from '@emotion/native';
 import { TextInput } from 'react-native';
 import { InputElementProps } from '.';
 import { StyleProps } from '../../../types/defaults';
+import { RFValueStr } from '../../../utils';
 import { Icon } from '../Icon';
 import { InputContainerProps } from './InputContainer/InputContainer';
 
@@ -62,7 +63,7 @@ export const StyledInputContainer = styled.View<
 >`
   flex-direction: row;
   align-items: center;
-  min-height: 44px;
+  min-height: ${RFValueStr('44px')};
 `;
 
 export const StyledInputElementBase = styled(TextInput)<

package/src/components/atoms/ProgressBar/styled.ts

@@ -1,6 +1,7 @@
 import styled from '@emotion/native';
-import { StyleProps } from '@tecsinapse/react-core';
 import { Animated } from 'react-native';
+import { StyleProps } from '../../../types/defaults';
+import { RFValueStr } from '../../../utils';
 
 export const Container = styled.View<Partial<StyleProps>>`
   display: flex;
@@ -14,7 +15,7 @@ export const Container = styled.View<Partial<StyleProps>>`
 export const Segment = styled.View<Partial<StyleProps>>`
   flex: 1;
   background-color: ${({ theme }) => theme.color.secondary.light};
-  border-right-width: 2px;
+  border-right-width: ${RFValueStr('2px')};
   border-color: ${({ theme }) => theme.color.secondary.xlight};
 `;
 

package/src/components/atoms/Switch/styled.ts

@@ -1,6 +1,8 @@
 import styled from '@emotion/native';
-import { StyleProps, SwitchProps } from '@tecsinapse/react-core';
 import { Animated } from 'react-native';
+import { StyleProps } from '../../../types/defaults';
+import { RFValueStr } from '../../../utils';
+import { SwitchProps } from './Switch';
 
 export const StyledSwitchContent = styled(Animated.View)<
   Partial<SwitchProps> & Partial<StyleProps>
@@ -8,13 +10,13 @@ export const StyledSwitchContent = styled(Animated.View)<
   border-radius: ${({ theme }) => theme.borderRadius.pill};
   padding: 0 ${({ theme }) => theme.spacing.micro};
   justify-content: center;
-  width: 40px;
-  height: 22px;
+  width: ${RFValueStr('40px')};
+  height: ${RFValueStr('22px')};
 `;
 
 export const StyledSwitch = styled(Animated.View)<Partial<StyleProps>>`
   border-radius: ${({ theme }) => theme.borderRadius.pill};
   background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};
-  width: 16px;
-  height: 16px;
+  width: ${RFValueStr('16px')};
+  height: ${RFValueStr('16px')};
 `;

package/src/components/atoms/shared/PaperAndCard.ts

@@ -3,7 +3,6 @@ import { StyleProps } from '@tecsinapse/react-core';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const baseStyles = ({ theme }: StyleProps): any => css`
-  padding: ${theme.spacing.deca};
   border-radius: ${theme.borderRadius.mili};
   background-color: ${theme.miscellaneous.surfaceColor};
   overflow: hidden;

package/src/components/molecules/DatePicker/styled.ts

@@ -1,11 +1,13 @@
 import styled, { css } from '@emotion/native';
 import { FC } from 'react';
 import { Platform } from 'react-native';
+import { hex2rgba } from '../../../styles/definitions';
+import { StyleProps } from '../../../types/defaults';
+import { RFValue } from '../../../utils';
 import { Icon } from '../../atoms/Icon';
 import { disabledInputStyles, InputContainerProps } from '../../atoms/Input';
 import { PressableSurface } from '../../atoms/PressableSurface';
 import { TextProps } from '../../atoms/Text';
-import { hex2rgba, StyleProps } from '@tecsinapse/react-core';
 
 const isWeb = Platform.OS === 'web';
 
@@ -29,7 +31,7 @@ export const ModalContent = styled.View<
   { offset: number } & Partial<StyleProps>
 >`
   background-color: transparent;
-  padding-bottom: ${({ offset }) => `${offset}px`};
+  padding-bottom: ${({ offset }) => `${RFValue(offset)}px`};
   ${({ theme: { borderRadius } }) => css`
     ${isWeb
       ? `

package/src/components/molecules/DateTimePicker/styled.ts

@@ -2,9 +2,10 @@ import styled, { css } from '@emotion/native';
 import { FC } from 'react';
 import { Platform } from 'react-native';
 import { StyleProps } from '../../../types/defaults';
+import { RFValue, RFValueStr } from '../../../utils';
 import {
   PressableSurface,
-  PressableSurfaceProps,
+  PressableSurfaceProps
 } from '../../atoms/PressableSurface';
 import { DateTimeSelectorProps } from '../DateTimeSelector';
 
@@ -35,11 +36,11 @@ export const ModalContent = styled.View<
   { offset: number } & Partial<StyleProps>
 >`
   background-color: transparent;
-  padding-bottom: ${({ offset }) => `${offset}px`};
+  padding-bottom: ${({ offset }) => `${RFValue(offset)}px`};
   ${({ theme: { borderRadius } }) => css`
     ${isWeb
       ? `
-      width: 375px;
+      width: ${RFValueStr('375px')};
       border-radius: ${borderRadius.micro};
     `
       : `

package/src/components/molecules/DateTimeSelector/styled.ts

@@ -1,5 +1,6 @@
 import styled from '@emotion/native';
 import { StyleProps } from '../../../types/defaults';
+import { RFValueStr } from '../../../utils';
 import { PressableSurface } from '../../atoms/PressableSurface';
 
 export const Root = styled.View<Partial<StyleProps>>`
@@ -14,7 +15,7 @@ export const Content = styled.View<Partial<StyleProps>>`
 `;
 
 export const SelectorRoot = styled.View<Partial<StyleProps>>`
-  border-width: 1px;
+  border-width: ${RFValueStr('1px')};
   border-color: ${({ theme }) => theme.color.secondary.xlight};
   border-radius: ${({ theme }) => theme.borderRadius.mili};
 `;

package/src/components/molecules/Grid/Grid.tsx

@@ -16,7 +16,14 @@ export interface IGrid extends ViewProps {
   layout?: number[][];
   /** Number of grid columns to be considered (not the number of elements per row) */
   columns?: number;
-  spacing?: SpacingType;
+  spacing?:
+    | SpacingType
+    | {
+        top?: SpacingType;
+        right?: SpacingType;
+        bottom?: SpacingType;
+        left?: SpacingType;
+      };
 }
 
 const Grid = ({
@@ -70,7 +77,7 @@ const Grid = ({
         return React.cloneElement(child, {
           ...child?.props,
           columns,
-          spacing,
+          spacing: child?.props.spacing ?? spacing,
         });
       })}
     </View>

package/src/components/molecules/Grid/Item/Item.tsx

@@ -11,6 +11,8 @@ type FlexAlignBase = FlexPositioning | 'stretch';
 type FlexAlignType = FlexAlignBase | 'baseline';
 type FlexSpacing = 'space-between' | 'space-around';
 
+type PaddingPosition = 'top' | 'right' | 'bottom' | 'left';
+
 export interface IGridItem {
   children: React.ReactElement;
   /** Number of columns to fill */
@@ -30,7 +32,14 @@ export interface IGridItem {
   flexShrink?: number;
   justifyContent?: FlexPositioning | FlexSpacing | 'space-evenly';
   /** You don't have to give this property since is inherited from Grid */
-  spacing?: SpacingType;
+  spacing?:
+    | SpacingType
+    | {
+        top?: SpacingType;
+        right?: SpacingType;
+        bottom?: SpacingType;
+        left?: SpacingType;
+      };
   /** Used to wrap children in a View when its style extrapolates the dimensions*/
   wrapper?: boolean;
 }
@@ -53,11 +62,24 @@ const GridItem = ({
     return loadingComponent;
   }
 
+  const getPadding = (pos: PaddingPosition) => {
+    if (_spacing) {
+      if (typeof _spacing === 'string')
+        return extractNumbersFromString(spacing[_spacing]);
+      else if (typeof _spacing === 'object' && _spacing[pos]) {
+        return extractNumbersFromString(spacing[_spacing[pos]!]);
+      } else return undefined;
+    } else return undefined;
+  };
+
   const style = {
     ...rest,
     boxSizing: 'border-box',
     flexBasis: `${100 / (columns / span)}%`,
-    padding: _spacing ? extractNumbersFromString(spacing[_spacing]) : undefined,
+    paddingTop: getPadding('top'),
+    paddingBottom: getPadding('bottom'),
+    paddingRight: getPadding('right'),
+    paddingLeft: getPadding('left'),
   };
 
   const clone = React.cloneElement(children, {

package/src/components/molecules/Snackbar/styled.ts

@@ -1,10 +1,11 @@
-import { View } from 'react-native';
 import styled, { css } from '@emotion/native';
-import { SnackbarProps } from './Snackbar';
+import { View } from 'react-native';
 import { StyleProps } from '../../../types/defaults';
-import { ProgressBar } from '../../atoms/ProgressBar';
+import { RFValue } from '../../../utils';
 import { Paper } from '../../atoms/Paper';
 import { PressableSurface } from '../../atoms/PressableSurface';
+import { ProgressBar } from '../../atoms/ProgressBar';
+import { SnackbarProps } from './Snackbar';
 
 const baseStyles = ({
   theme,
@@ -31,7 +32,7 @@ const anchorTop = ({
   return (
     anchor === 'top' &&
     css`
-      top: ${anchorDistance ? `${anchorDistance}px` : theme.spacing.deca};
+      top: ${anchorDistance ? `${RFValue(anchorDistance)}px` : theme.spacing.deca};
     `
   );
 };
@@ -44,7 +45,7 @@ const anchorBottom = ({
   return (
     anchor === 'bottom' &&
     css`
-      bottom: ${anchorDistance ? `${anchorDistance}px` : theme.spacing.deca};
+      bottom: ${anchorDistance ? `${RFValue(anchorDistance)}px` : theme.spacing.deca};
     `
   );
 };

package/src/components/molecules/TextArea/styled.ts

@@ -1,25 +1,19 @@
 import styled from '@emotion/native';
-import {
-  extractNumbersFromString,
-  InputContainer,
-  InputElement,
-  StyleProps,
-} from '@tecsinapse/react-core';
+import { StyleProps } from '../../../types/defaults';
+import { extractNumbersFromString, RFValue, RFValueStr } from '../../../utils';
+import { InputContainer, InputElement } from '../../atoms/Input';
 import { TextAreaProps } from './TextArea';
 
 export const StyledInputContainer = styled(InputContainer)<Partial<StyleProps>>`
-  min-height: 50px;
+  min-height: ${RFValueStr('50px')};
 `;
 
 export const TextAreaInputBase = styled(InputElement)<
   Partial<TextAreaProps> & Partial<StyleProps>
 >`
   max-height: ${({ theme, numberOfLines }) =>
-    `${
-      extractNumbersFromString(theme.typography.h5.lineHeight) *
-      (numberOfLines || 1)
-    }px`};
+    `${RFValue(extractNumbersFromString(theme.typography.h5.lineHeight) * (numberOfLines || 1))}px`};
   width: 100%;
   padding: 0;
-  margin: 3px 0;
+  margin: ${RFValueStr('3px')} 0;
 `;

package/src/styles/definitions.ts

@@ -8,8 +8,9 @@ import {
   Miscellaneous,
   Spacing,
   TypographyVariation,
-  ZIndex,
+  ZIndex
 } from '../types/defaults';
+import { RFValueStr } from '../utils';
 
 export const statusColor = {
   error: {
@@ -55,74 +56,74 @@ export const miscellaneous: Miscellaneous = {
 };
 
 export const spacing: Spacing = {
-  nano: '2px',
-  micro: '4px',
-  mili: '8px',
-  centi: '12px',
-  deca: '16px',
-  kilo: '24px',
-  mega: '32px',
-  giga: '40px',
-  tera: '48px',
-  peta: '56px',
-  hexa: '64px',
+  nano: RFValueStr('2px'),
+  micro: RFValueStr('4px'),
+  mili: RFValueStr('8px'),
+  centi: RFValueStr('12px'),
+  deca: RFValueStr('16px'),
+  kilo: RFValueStr('24px'),
+  mega: RFValueStr('32px'),
+  giga: RFValueStr('40px'),
+  tera: RFValueStr('48px'),
+  peta: RFValueStr('56px'),
+  hexa: RFValueStr('64px'),
 };
 
 export const iconSize: IconSize = {
-  micro: '12px',
-  mili: '14px',
-  centi: '16px', // '1rem'
-  deca: '18px', // '1.5rem'
-  kilo: '24px', // '1.6rem'
-  mega: '32px', // '2rem'
+  micro: RFValueStr('12px'),
+  mili: RFValueStr('14px'),
+  centi: RFValueStr('16px'), // '1rem'
+  deca: RFValueStr('18px'), // '1.5rem'
+  kilo: RFValueStr('24px'), // '1.6rem'
+  mega: RFValueStr('32px'), // '2rem'
 };
 
 export const borderRadius: BorderRadius = {
-  nano: '2px',
-  micro: '4px',
-  mili: '8px',
-  centi: '16px',
-  deca: '24px',
-  pill: '999999px', // also circle
+  nano: RFValueStr('2px'),
+  micro: RFValueStr('4px'),
+  mili: RFValueStr('8px'),
+  centi: RFValueStr('16px'),
+  deca: RFValueStr('24px'),
+  pill: RFValueStr('999999px'), // also circle
 };
 
 export const borderWidth: BorderWidth = {
-  pico: '1px',
-  nano: '2px',
+  pico: RFValueStr('1px'),
+  nano: RFValueStr('2px'),
 };
 
 export const typography: TypographyVariation = {
   h5: {
-    fontSize: '16px', // '1rem'
-    lineHeight: '24px', // '1.5rem'
+    fontSize: RFValueStr('16px'), // '1rem'
+    lineHeight: RFValueStr('24px'), // '1.5rem'
   },
   h4: {
-    fontSize: '18px', // '1.125rem'
-    lineHeight: '27px', // '1.688rem'
+    fontSize: RFValueStr('18px'), // '1.125rem'
+    lineHeight: RFValueStr('27px'), // '1.688rem'
   },
   h3: {
-    fontSize: '20px', // '1.25rem'
-    lineHeight: '32px', // '2rem'
+    fontSize: RFValueStr('20px'), // '1.25rem'
+    lineHeight: RFValueStr('32px'), // '2rem'
   },
   h2: {
-    fontSize: '26px', // '1.625rem'
-    lineHeight: '38px', // '2.375rem'
+    fontSize: RFValueStr('26px'), // '1.625rem'
+    lineHeight: RFValueStr('38px'), // '2.375rem'
   },
   h1: {
-    fontSize: '32px', // '2rem'
-    lineHeight: '42px', // '2.625rem'
+    fontSize: RFValueStr('32px'), // '2rem'
+    lineHeight: RFValueStr('42px'), // '2.625rem'
   },
   base: {
-    fontSize: '14px', // '0.875rem'
-    lineHeight: '21px', // '1.313rem'
+    fontSize: RFValueStr('14px'), // '0.875rem'
+    lineHeight: RFValueStr('21px'), // '1.313rem'
   },
   sub: {
-    fontSize: '12px', // '0.75rem'
-    lineHeight: '18px', // '1.125rem'
+    fontSize: RFValueStr('12px'), // '0.75rem'
+    lineHeight: RFValueStr('18px'), // '1.125rem'
   },
   label: {
-    fontSize: '10px',
-    lineHeight: '12px',
+    fontSize: RFValueStr('10px'),
+    lineHeight: RFValueStr('12px'),
   },
 };
 

package/src/utils/IPhoneXHelper.ts

@@ -0,0 +1,34 @@
+import { Dimensions, Platform, StatusBar } from 'react-native';
+
+export function isIphoneX() {
+    const dimen = Dimensions.get('window');
+    return (
+        Platform.OS === 'ios' &&
+        !Platform.isPad &&
+        !Platform.isTVOS &&
+        ((dimen.height === 780 || dimen.width === 780)
+          || (dimen.height === 812 || dimen.width === 812)
+          || (dimen.height === 844 || dimen.width === 844)
+          || (dimen.height === 896 || dimen.width === 896)
+          || (dimen.height === 926 || dimen.width === 926))
+    );
+}
+
+export function ifIphoneX(iphoneXStyle, regularStyle) {
+    if (isIphoneX()) {
+        return iphoneXStyle;
+    }
+    return regularStyle;
+}
+
+export function getStatusBarHeight(safe) {
+    return Platform.select({
+        ios: ifIphoneX(safe ? 44 : 30, 20),
+        android: StatusBar.currentHeight,
+        default: 0
+    });
+}
+
+export function getBottomSpace() {
+    return isIphoneX() ? 34 : 0;
+}

package/src/utils/ResponsiveFontSize.ts

@@ -0,0 +1,52 @@
+import { Dimensions, Platform, StatusBar } from "react-native";
+import { extractNumbersFromString } from "./extractNumbersFromString";
+import { isIphoneX } from "./IPhoneXHelper";
+
+const STANDARD_SCREEN_HEIGHT = 640
+
+/**
+ * Use this function when you want to scale a percentage number
+ * to a reasonable value that will fit better on most of devices.
+ * 
+ * @param percent 
+ * @returns 
+ */
+export const RFPercentage = (percent: number) => {
+    if (Platform.OS === 'web') return percent
+    const { height, width } = Dimensions.get("window");
+    const standardLength = width > height ? width : height;
+    const offset = width > height ? 0 : Platform.OS === "ios" ? 78 : StatusBar.currentHeight || 0 // iPhone X style SafeAreaView size in portrait
+    const deviceHeight = isIphoneX() || Platform.OS === "android" ? standardLength - offset : standardLength;
+    const heightPercent = (percent * deviceHeight) / 100;
+    return Math.round(heightPercent);
+}
+
+/**
+ * Use this function when you want to scale a font size based on pixel unit 
+ * to a reasonable value that will fit better on most of devices.
+ * 
+ * @param fontSize 
+ * @param standardScreenHeight 
+ * @returns 
+ */
+export const RFValue = (fontSize: number, standardScreenHeight: number = STANDARD_SCREEN_HEIGHT) => {
+    if (Platform.OS === 'web') return fontSize
+    const { height, width } = Dimensions.get("window");
+    const standardLength = width > height ? width : height;
+    const offset = width > height ? 0 : Platform.OS === "ios" ? 78 : StatusBar.currentHeight || 0 // iPhone X style SafeAreaView size in portrait
+    const deviceHeight = isIphoneX() || Platform.OS === "android" ? standardLength - offset : standardLength;
+    const heightPercent = (fontSize * deviceHeight) / standardScreenHeight;
+    return Math.round(heightPercent);
+}
+
+/**
+ * Same of RFValue, however you can provide string values. E.g: '10px', '-5px'.
+ * 
+ * @param fontSize 
+ * @param standardScreenHeight 
+ * @returns 
+ */
+export const RFValueStr = (fontSize: string, standardScreenHeight?: number) => {
+    const _fontSize = extractNumbersFromString(fontSize)
+    return `${RFValue(_fontSize, standardScreenHeight)}px`
+}

package/src/utils/extractNumbersFromString.ts

@@ -1,8 +1,6 @@
-export const extractNumbersFromString = (value: string): number =>
-  Number(value.replace(/[^0-9]/g, ''));
+export const extractNumbersFromString = (value: string): number => Number(extractDigitsFromString(value));
 
 /*
  * implemented for the case: string numbers start with 0. Example: 012.345.678-91 Example: 012.345.678-91
  * */
-export const extractDigitsFromString = (value: string): string =>
-  value.replace(/[^0-9]/g, '');
+export const extractDigitsFromString = (value: string): string => value.replace(/[^-0-9]/g, '');

package/src/utils/index.ts

@@ -3,3 +3,5 @@ export {
   extractNumbersFromString,
   extractDigitsFromString,
 } from './extractNumbersFromString';
+export * from './IPhoneXHelper'
+export * from './ResponsiveFontSize'