@tecsinapse/react-core 1.18.0 → 1.19.0

package/dist/utils/variantComplement.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.borderColorGradationVC = exports.borderColorVC = exports.colorGradationVC = exports.colorVC = exports.fontColorVC = void 0;
+exports.fontColorVC = exports.colorVC = exports.colorGradationVC = exports.borderColorVC = exports.borderColorGradationVC = void 0;
 const fontColorVC = {
   filled: 'light',
   outlined: 'orange',

package/dist/utils/variantComplement.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/variantComplement.ts"],"names":["fontColorVC","filled","outlined","text","colorVC","colorGradationVC","borderColorVC","borderColorGradationVC"],"mappings":";;;;AAOO,MAAMA,WAA+C,GAAG;AAC7DC,EAAAA,MAAM,EAAE,OADqD;AAE7DC,EAAAA,QAAQ,EAAE,QAFmD;AAG7DC,EAAAA,IAAI,EAAE;AAHuD,CAAxD;;AAMA,MAAMC,OAAuC,GAAG;AACrDH,EAAAA,MAAM,EAAE,SAD6C;AAErDC,EAAAA,QAAQ,EAAE,SAF2C;AAGrDC,EAAAA,IAAI,EAAE;AAH+C,CAAhD;;AAMA,MAAME,gBAAyD,GAAG;AACvEJ,EAAAA,MAAM,EAAE,MAD+D;AAEvEC,EAAAA,QAAQ,EAAE,MAF6D;AAGvEC,EAAAA,IAAI,EAAE;AAHiE,CAAlE;;AAMA,MAAMG,aAA6C,GAAG;AAC3DL,EAAAA,MAAM,EAAE,SADmD;AAE3DC,EAAAA,QAAQ,EAAE,SAFiD;AAG3DC,EAAAA,IAAI,EAAE;AAHqD,CAAtD;;AAMA,MAAMI,sBAA+D,GAAG;AAC7EN,EAAAA,MAAM,EAAE,MADqE;AAE7EC,EAAAA,QAAQ,EAAE,MAFmE;AAG7EC,EAAAA,IAAI,EAAE;AAHuE,CAAxE","sourcesContent":["import {\n  ColorGradationType,\n  ColorType,\n  FontColorType,\n  VariantType,\n} from '../types/defaults';\n\nexport const fontColorVC: Record<VariantType, FontColorType> = {\n  filled: 'light',\n  outlined: 'orange',\n  text: 'orange',\n};\n\nexport const colorVC: Record<VariantType, ColorType> = {\n  filled: 'primary',\n  outlined: 'primary',\n  text: 'primary',\n};\n\nexport const colorGradationVC: Record<VariantType, ColorGradationType> = {\n  filled: 'dark',\n  outlined: 'dark',\n  text: 'dark',\n};\n\nexport const borderColorVC: Record<VariantType, ColorType> = {\n  filled: 'primary',\n  outlined: 'primary',\n  text: 'primary',\n};\n\nexport const borderColorGradationVC: Record<VariantType, ColorGradationType> = {\n  filled: 'dark',\n  outlined: 'dark',\n  text: 'dark',\n};\n"],"file":"variantComplement.js"}
+{"version":3,"file":"variantComplement.js","names":["fontColorVC","filled","outlined","text","colorVC","colorGradationVC","borderColorVC","borderColorGradationVC"],"sources":["../../src/utils/variantComplement.ts"],"sourcesContent":["import {\n  ColorGradationType,\n  ColorType,\n  FontColorType,\n  VariantType,\n} from '../types/defaults';\n\nexport const fontColorVC: Record<VariantType, FontColorType> = {\n  filled: 'light',\n  outlined: 'orange',\n  text: 'orange',\n};\n\nexport const colorVC: Record<VariantType, ColorType> = {\n  filled: 'primary',\n  outlined: 'primary',\n  text: 'primary',\n};\n\nexport const colorGradationVC: Record<VariantType, ColorGradationType> = {\n  filled: 'dark',\n  outlined: 'dark',\n  text: 'dark',\n};\n\nexport const borderColorVC: Record<VariantType, ColorType> = {\n  filled: 'primary',\n  outlined: 'primary',\n  text: 'primary',\n};\n\nexport const borderColorGradationVC: Record<VariantType, ColorGradationType> = {\n  filled: 'dark',\n  outlined: 'dark',\n  text: 'dark',\n};\n"],"mappings":";;;;AAOO,MAAMA,WAA+C,GAAG;EAC7DC,MAAM,EAAE,OADqD;EAE7DC,QAAQ,EAAE,QAFmD;EAG7DC,IAAI,EAAE;AAHuD,CAAxD;;AAMA,MAAMC,OAAuC,GAAG;EACrDH,MAAM,EAAE,SAD6C;EAErDC,QAAQ,EAAE,SAF2C;EAGrDC,IAAI,EAAE;AAH+C,CAAhD;;AAMA,MAAME,gBAAyD,GAAG;EACvEJ,MAAM,EAAE,MAD+D;EAEvEC,QAAQ,EAAE,MAF6D;EAGvEC,IAAI,EAAE;AAHiE,CAAlE;;AAMA,MAAMG,aAA6C,GAAG;EAC3DL,MAAM,EAAE,SADmD;EAE3DC,QAAQ,EAAE,SAFiD;EAG3DC,IAAI,EAAE;AAHqD,CAAtD;;AAMA,MAAMI,sBAA+D,GAAG;EAC7EN,MAAM,EAAE,MADqE;EAE7EC,QAAQ,EAAE,MAFmE;EAG7EC,IAAI,EAAE;AAHuE,CAAxE"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tecsinapse/react-core",
   "description": "TecSinapse hybrid React components",
-  "version": "1.18.0",
+  "version": "1.19.0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -34,5 +34,5 @@
     "react-native": "^0.64.0",
     "react-native-vector-icons": "^8.1.0 || ^9.0.0"
   },
-  "gitHead": "7014df32d2de88a1f42259b56599d7fc10d794a9"
+  "gitHead": "59f85f1085ace4af0b26b85e32faf92cd2bf303f"
 }

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

@@ -23,9 +23,8 @@ const baseStyle = ({
   `;
 };
 
-export const BadgeStyle = styled(View)<Partial<StyleProps & BadgeProps>>(
-  baseStyle
-);
+export const BadgeStyle =
+  styled(View)<Partial<StyleProps & BadgeProps>>(baseStyle);
 
 export const ViewStyled = styled(View)<Partial<StyleProps & BadgeProps>>`
   align-items: center;

package/src/components/atoms/GroupButton/GroupButton.tsx

@@ -44,16 +44,13 @@ export interface GroupButtonProps<T> {
   disableAllOptions?: boolean;
 }
 
-const GroupButton = <T extends unknown>({
-  style,
-  ...rest
-}: GroupButtonProps<T>) => {
+const GroupButton = <T,>({ style, ...rest }: GroupButtonProps<T>) => {
   return (
     <StyledGroupButton style={style}>{groupOptions(rest)}</StyledGroupButton>
   );
 };
 
-const groupOptions = <T extends unknown>({
+const groupOptions = <T,>({
   options,
   renderOption,
   renderKey,

package/src/components/atoms/Input/InputContainer/InputContainer.tsx

@@ -7,14 +7,14 @@ import {
   FontColorType,
   FontStackType,
   FontWeightType,
-  TypographyVariationType
-} from '../../../../types/defaults';
+  TypographyVariationType,
+} from '@tecsinapse/react-core';
 import { Text, TextProps } from '../../Text';
 import {
   StyledBorderKeeper,
   StyledIconContent,
   StyledInputContainer,
-  StyledLabelContainer
+  StyledLabelContainer,
 } from '../styled';
 
 export type InputVariantType = 'default' | 'error' | 'success';

package/src/components/atoms/Input/InputElement/InputElement.tsx

@@ -1,7 +1,7 @@
 import { useTheme } from '@emotion/react';
 import { ThemeProp } from '@tecsinapse/react-core';
-import React, { FC } from 'react';
-import { StyleProp, TextInputProps, TextStyle } from 'react-native';
+import React from 'react';
+import { StyleProp, TextInput, TextInputProps, TextStyle } from 'react-native';
 import { StyledInputElement } from '../styled';
 
 export interface InputElementProps
@@ -13,10 +13,9 @@ export interface InputElementProps
   onChange?: (value: string) => void;
   onFocus?: () => void;
   onBlur?: () => void;
-  ref?: React.Ref<any>;
 }
 
-const InputElement: FC<InputElementProps> = React.forwardRef(
+const InputElement = React.forwardRef<TextInput, InputElementProps>(
   (
     {
       onChange,
@@ -26,7 +25,7 @@ const InputElement: FC<InputElementProps> = React.forwardRef(
       placeholderTextColor,
       ...rest
     },
-    ref: React.Ref<any>
+    ref
   ): JSX.Element => {
     const theme = useTheme() as ThemeProp;
     const _placeholderColor = placeholderTextColor || theme.font.color.dark;

package/src/components/atoms/Input/InputMaskElement/InputMaskElement.tsx

@@ -1,7 +1,7 @@
 import { useTheme } from '@emotion/react';
 import { ThemeProp } from '@tecsinapse/react-core';
-import React, { FC, useCallback, useEffect } from 'react';
-import { StyleProp, TextInputProps, TextStyle } from 'react-native';
+import React, { useCallback, useEffect } from 'react';
+import { StyleProp, TextInput, TextInputProps, TextStyle } from 'react-native';
 import { StyledInputElement } from '../styled';
 import { MaskType, useStringMask } from '../hooks/useStringMask';
 import { CurrencyOptions, useNumberMask } from '../hooks/useNumberMask';
@@ -24,10 +24,9 @@ export interface InputMaskElementProps
   mask?: (MaskType[] | ((value: string) => MaskType[])) | CurrencyOptions;
   onFocus?: () => void;
   onBlur?: () => void;
-  ref?: React.Ref<any>;
 }
 
-const InputMaskElement: FC<InputMaskElementProps> = React.forwardRef(
+const InputMaskElement = React.forwardRef<TextInput, InputMaskElementProps>(
   (
     {
       onChange,
@@ -38,7 +37,7 @@ const InputMaskElement: FC<InputMaskElementProps> = React.forwardRef(
       mask,
       ...rest
     },
-    ref: React.Ref<any>
+    ref
   ): JSX.Element => {
     const theme = useTheme() as ThemeProp;
 

package/src/components/atoms/ProgressBar/ProgressBar.tsx

@@ -4,8 +4,8 @@ import { Animated, ViewProps } from 'react-native';
 import {
   ColorGradationType,
   ColorType,
-  ThemeProp
-} from '../../../types/defaults';
+  ThemeProp,
+} from '@tecsinapse/react-core';
 import { extractNumbersFromString } from '../../../utils';
 import { Container, Progress, Segment } from './styled';
 
@@ -54,8 +54,6 @@ const ProgressBar: React.FC<ProgressBarProps> = ({
   const items = [...Array(segments).keys()];
 
   const segmentsRender = items.map(index => {
-    
-
     const max = segmentWidth * (index + 1);
     const min = segmentWidth * index;
     const minmax = (totalProgress - min) / (max - min);

package/src/components/atoms/Switch/Switch.tsx

@@ -10,7 +10,7 @@ import {
   ColorGradationType,
   ColorType,
   ThemeProp,
-} from '../../../types/defaults';
+} from '@tecsinapse/react-core';
 import {
   extractNumbersFromString,
   lightenDarkenColor,

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

@@ -1,6 +1,6 @@
 import { Animated, Easing } from 'react-native';
 
-const ANIMATION_SPEED = 140
+const ANIMATION_SPEED = 140;
 
 export const transitionSwitch = (
   active: boolean,
@@ -8,9 +8,8 @@ export const transitionSwitch = (
   transitionValue: Animated.Value,
   animatedColor: Animated.Value
 ): void => {
+  if (translate <= 0) return;
 
-  if (translate <= 0) return
-  
   if (active) {
     Animated.timing(transitionValue, {
       toValue: translate,
@@ -23,8 +22,8 @@ export const transitionSwitch = (
       duration: ANIMATION_SPEED,
       useNativeDriver: false,
     }).start();
-    return
-  } 
+    return;
+  }
 
   Animated.timing(transitionValue, {
     toValue: 0,
@@ -37,5 +36,4 @@ export const transitionSwitch = (
     duration: ANIMATION_SPEED,
     useNativeDriver: false,
   }).start();
-
 };

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

@@ -1,14 +1,12 @@
 import styled from '@emotion/native';
 import { Animated } from 'react-native';
-import { StyleProps } from '../../../types/defaults';
+import { StyleProps } from '@tecsinapse/react-core';
 import { RFValueStr } from '../../../utils';
 
-export const SWITCH_BODY_WIDTH = '40px'
-export const SWITCH_PIN_WIDTH = '16px'
+export const SWITCH_BODY_WIDTH = '40px';
+export const SWITCH_PIN_WIDTH = '16px';
 
-export const StyledSwitchContent = styled(Animated.View)<
-  Partial<StyleProps>
->`
+export const StyledSwitchContent = styled(Animated.View)<Partial<StyleProps>>`
   border-radius: ${({ theme }) => theme.borderRadius.pill};
   padding: 0 ${({ theme }) => theme.spacing.micro};
   justify-content: center;

package/src/components/atoms/Tag/Tag.tsx

@@ -43,7 +43,7 @@ const Tag: React.FC<TagProps> = ({
     <StyledTagContainer
       {...rest}
       variant={variant}
-      style={[{ opacity: (fadeAnim as unknown) as number }, style]}
+      style={[{ opacity: fadeAnim as unknown as number }, style]}
       visible={!dismiss}
     >
       {icon && (

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

@@ -18,7 +18,7 @@ export const elevatedStyles = ({
       shadowOffset: { width: 0, height: 2 },
       shadowOpacity: 0.05,
       shadowRadius: 5,
-      elevation: 2
+      elevation: 2,
     }),
   ];
 /* eslint-enable @typescript-eslint/no-explicit-any */

package/src/components/molecules/Calendar/index.ts

@@ -3,5 +3,5 @@ export {
   CalendarProps,
   SelectionType,
   DateRange,
-  Value
+  Value,
 } from './Calendar';

package/src/components/molecules/DatePicker/DatePicker.tsx

@@ -7,21 +7,26 @@ import { CalendarProps, DateRange, SelectionType } from '../Calendar';
 import { HintInputContainer } from '../HintInputContainer';
 import { CalendarIcon, getStyledTextComponent } from './styled';
 
-export interface DatePickerProps<T extends SelectionType> extends InputContainerProps, Omit<CalendarProps<T>, 'style'> {
+export interface DatePickerProps<T extends SelectionType>
+  extends InputContainerProps,
+    Omit<CalendarProps<T>, 'style'> {
   controlComponent?: (
     onPress: () => void,
     displayValue?: string
   ) => JSX.Element;
   TextComponent?: React.FC<TextProps>;
-  CalendarComponent: React.FC<CalendarProps<T>>
+  CalendarComponent: React.FC<CalendarProps<T>>;
   placeholder?: string;
   onFocus?: () => void | never;
   onBlur?: () => void | never;
   format?: string;
   closeOnPick?: boolean;
-  renderCalendar: (calendar: React.ReactElement, blur?: () => void) => JSX.Element|null
-  requestShowCalendar: () => void
-  requestCloseCalendar: () => void
+  renderCalendar: (
+    calendar: React.ReactElement,
+    blur?: () => void
+  ) => JSX.Element | null;
+  requestShowCalendar: () => void;
+  requestCloseCalendar: () => void;
 }
 
 function DatePicker<T extends SelectionType>({
@@ -51,7 +56,6 @@ function DatePicker<T extends SelectionType>({
   requestCloseCalendar,
   ...rest
 }: DatePickerProps<T>): JSX.Element {
-  
   const { focused, handleBlur, handleFocus } = useInputFocus(
     onFocus,
     onBlur,
@@ -59,7 +63,7 @@ function DatePicker<T extends SelectionType>({
   );
 
   const handleShowCalendar = React.useCallback(() => {
-    requestShowCalendar()
+    requestShowCalendar();
     handleFocus();
   }, [handleFocus, requestShowCalendar]);
 
@@ -99,7 +103,7 @@ function DatePicker<T extends SelectionType>({
       onChange={onChange}
       locale={locale}
     />
-  )
+  );
 
   return (
     <>

package/src/components/molecules/DateTimePicker/DateTimePicker.tsx

@@ -7,7 +7,9 @@ import { DateTimeSelector, DateTimeSelectorProps } from '../DateTimeSelector';
 import { HintInputContainer } from '../HintInputContainer';
 import { getStyledDateTimeSelector } from './styled';
 
-export interface DateTimePickerProps extends InputContainerProps, Omit<DateTimeSelectorProps, 'style'> {
+export interface DateTimePickerProps
+  extends InputContainerProps,
+    Omit<DateTimeSelectorProps, 'style'> {
   controlComponent?: (
     onPress: () => void,
     displayValue?: string
@@ -17,9 +19,12 @@ export interface DateTimePickerProps extends InputContainerProps, Omit<DateTimeS
   placeholder?: string;
   onFocus?: () => void | never;
   onBlur?: () => void | never;
-  renderSelector: (selector: React.ReactElement, blur?: () => void) => JSX.Element|null
-  requestShowSelector: () => void
-  requestCloseSelector: () => void
+  renderSelector: (
+    selector: React.ReactElement,
+    blur?: () => void
+  ) => JSX.Element | null;
+  requestShowSelector: () => void;
+  requestCloseSelector: () => void;
 }
 
 const DateTimePicker: React.FC<DateTimePickerProps> = ({
@@ -59,7 +64,6 @@ const DateTimePicker: React.FC<DateTimePickerProps> = ({
   requestCloseSelector,
   ...rest
 }) => {
-  
   const { focused, handleBlur, handleFocus } = useInputFocus(
     onFocus,
     onBlur,
@@ -67,18 +71,22 @@ const DateTimePicker: React.FC<DateTimePickerProps> = ({
   );
 
   const handleShowSelector = () => {
-    requestShowSelector()
+    requestShowSelector();
     handleFocus();
   };
 
   const handleChoosing = (value: Date) => {
-    onChange?.(value)
-    requestCloseSelector()
+    onChange?.(value);
+    requestCloseSelector();
   };
 
   const StyledText = getStyledTextComponent(TextComponent);
-  const displayValue = (value ? formatDate(value, format, { locale: locale }) : placeholder) || ' ';
-  const StyledDateTimeSelector = getStyledDateTimeSelector(DateTimeSelectorComponent)
+  const displayValue =
+    (value ? formatDate(value, format, { locale: locale }) : placeholder) ||
+    ' ';
+  const StyledDateTimeSelector = getStyledDateTimeSelector(
+    DateTimeSelectorComponent
+  );
 
   const dateTimeSelector = (
     <StyledDateTimeSelector
@@ -102,7 +110,7 @@ const DateTimePicker: React.FC<DateTimePickerProps> = ({
       minuteLabel={minuteLabel}
       onChange={handleChoosing}
     />
-  )
+  );
 
   return (
     <>

package/src/components/molecules/DateTimeSelector/DateTimeSelector.tsx

@@ -99,7 +99,6 @@ const DateTimeSelector: React.FC<DateTimeSelectorProps> = ({
   value,
   onChange,
   mode = 'date',
-  format,
   locale,
   upperDateThreshold: _upperDateThreshold,
   lowerDateThreshold: _lowerDateThreshold,

package/src/components/molecules/Grid/index.ts

@@ -63,4 +63,4 @@ export interface IGridItem {
   wrapper?: boolean;
 }
 
-export * from './functions';
+export { getGridItemColumSpan, getGridItemPadding } from './functions';

package/src/components/molecules/HintInputContainer/HintInputContainer.tsx

@@ -1,6 +1,11 @@
 import * as React from 'react';
 import { StyleProp, View, ViewStyle } from 'react-native';
-import { Hint, InputVariantType, PressableInputContainer, PressableInputContainerProps } from '../../atoms/Input';
+import {
+  Hint,
+  InputVariantType,
+  PressableInputContainer,
+  PressableInputContainerProps,
+} from '../../atoms/Input';
 import { TextProps } from '../../atoms/Text';
 
 export interface HintInputContainerProps extends PressableInputContainerProps {

package/src/components/molecules/IconTextButton/IconTextButton.tsx

@@ -1,6 +1,4 @@
-import { ButtonProps } from '../../atoms/Button';
-import { IconProps } from '../../atoms/Icon';
-import { TextProps } from '../../atoms/Text';
+import { ButtonProps, IconProps, TextProps } from '@tecsinapse/react-core';
 
 export type IconPositionOptions = 'left' | 'right';
 

package/src/components/molecules/Snackbar/Snackbar.tsx

@@ -84,7 +84,7 @@ export const Snackbar: React.FC<SnackbarProps> = ({
       anchor={anchor}
       anchorDistance={anchorDistance}
       visible={open}
-      style={[{ opacity: (fadeAnim as unknown) as number }, style]}
+      style={[{ opacity: fadeAnim as unknown as number }, style]}
       timeout={timeout}
     >
       <StyledContainerFlexRow>

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

@@ -32,7 +32,9 @@ const anchorTop = ({
   return (
     anchor === 'top' &&
     css`
-      top: ${anchorDistance ? `${RFValue(anchorDistance)}px` : theme.spacing.deca};
+      top: ${anchorDistance
+        ? `${RFValue(anchorDistance)}px`
+        : theme.spacing.deca};
     `
   );
 };
@@ -45,7 +47,9 @@ const anchorBottom = ({
   return (
     anchor === 'bottom' &&
     css`
-      bottom: ${anchorDistance ? `${RFValue(anchorDistance)}px` : theme.spacing.deca};
+      bottom: ${anchorDistance
+        ? `${RFValue(anchorDistance)}px`
+        : theme.spacing.deca};
     `
   );
 };

package/src/components/molecules/TextArea/TextArea.tsx

@@ -1,7 +1,11 @@
 import React, { FC } from 'react';
 import { View } from 'react-native';
-import { FontStackType, FontWeightType } from '../../../types/defaults';
-import { Hint, InputContainerProps, InputElementProps } from '../../atoms/Input';
+import { FontStackType, FontWeightType } from '@tecsinapse/react-core';
+import {
+  Hint,
+  InputContainerProps,
+  InputElementProps,
+} from '../../atoms/Input';
 import { Text, TextProps } from '../../atoms/Text';
 import { StyledInputContainer } from './styled';
 

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

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

package/src/index.ts

@@ -68,7 +68,18 @@ export {
   DateTimeSelectorMode,
   DateTimeSelectorProps,
 } from './components/molecules/DateTimeSelector';
-export * from './components/molecules/Grid';
+export {
+  GridSpacing,
+  IGridItem,
+  getGridItemPadding,
+  getGridItemColumSpan,
+  IGrid,
+  FlexAlignBase,
+  FlexAlignType,
+  FlexPositioning,
+  FlexSpacing,
+  PaddingPosition,
+} from './components/molecules/Grid';
 export {
   HintInputContainer,
   HintInputContainerProps,

package/src/utils/IPhoneXHelper.ts

@@ -1,34 +1,39 @@
 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))
-    );
+  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;
+  if (isIphoneX()) {
+    return iphoneXStyle;
+  }
+  return regularStyle;
 }
 
 export function getStatusBarHeight(safe) {
-    return Platform.select({
-        ios: ifIphoneX(safe ? 44 : 30, 20),
-        android: StatusBar.currentHeight,
-        default: 0
-    });
+  return Platform.select({
+    ios: ifIphoneX(safe ? 44 : 30, 20),
+    android: StatusBar.currentHeight,
+    default: 0,
+  });
 }
 
 export function getBottomSpace() {
-    return isIphoneX() ? 34 : 0;
-}
+  return isIphoneX() ? 34 : 0;
+}