[FIX] screen error

src/components/Chart.tsx

@@ -32,7 +32,7 @@ const Chart = ({
           filterData={filterData}
           backendURL={backendURL}
         />
-        <View style={{ height: 100 }} />
+        <View style={{ height: 120 }} />
       </ScrollView>
     </Animated.View>
   </>

src/components/UI/RangeTitle.tsx

@@ -14,13 +14,26 @@ import Animated, { Layout, SlideInUp, SlideOutUp } from 'react-native-reanimated
 import { RootDispatch, RootState } from '../../store';
 import ErrorWidget from './ErrorWidget';
 import CurrencySwitcher from './CurrencySwitcher';
+import { isMediumScreen, isSmallScreen } from '../../lib/common';
 
 const RangeTitle: FC = () => {
   const firefly = useSelector((state: RootState) => state.firefly);
   const dispatch = useDispatch<RootDispatch>();
   const displayFilter = useSelector((state: RootState) => state.configuration.displayFilter);
   const { loading } = useSelector((state: RootState) => state.loading.effects.firefly.handleChangeRange);
 
+  const tabSize = (() => {
+    if (isSmallScreen()) {
+      return 28;
+    }
+
+    if (isMediumScreen()) {
+      return 54;
+    }
+
+    return 67;
+  })();
+
   return (
     <>
       <Box
@@ -107,7 +120,7 @@ const RangeTitle: FC = () => {
         </HStack>
       </Box>
       <Box>
-        <Box height={55} />
+        <Box height={tabSize} />
         <Box bgColor="gray.100" height={41} display={!displayFilter ? 'none' : ''} />
         <Animated.View layout={Layout}>
           <CurrencySwitcher />

src/lib/common.ts

@@ -8,23 +8,33 @@ const { height: D_HEIGHT, width: D_WIDTH } = (() => {
   return { width, height };
 })();
 
-const X_WIDTH = 375;
-const X_HEIGHT = 812;
-const XSMAX_WIDTH = 414;
-const XSMAX_HEIGHT = 896;
+const LG_HEIGHT = 900;
+const MD_HEIGHT = 800;
+const XS_HEIGHT = 690;
 
-export const isiPhoneX = (() => {
+export const isSmallScreen = () => {
   if (Platform.OS === 'web') {
     return false;
   }
-  return (
-    (Platform.OS === 'ios' &&
-      ((D_HEIGHT === X_HEIGHT && D_WIDTH === X_WIDTH) ||
-        (D_HEIGHT === X_WIDTH && D_WIDTH === X_HEIGHT))) ||
-    (D_HEIGHT === XSMAX_HEIGHT && D_WIDTH === XSMAX_WIDTH) ||
-    (D_HEIGHT === XSMAX_WIDTH && D_WIDTH === XSMAX_HEIGHT)
-  );
-})();
+
+  return (Platform.OS === 'ios' && D_HEIGHT < XS_HEIGHT);
+};
+
+export const isMediumScreen = () => {
+  if (Platform.OS === 'web') {
+    return false;
+  }
+
+  return (Platform.OS === 'ios' && D_HEIGHT > MD_HEIGHT && D_HEIGHT < LG_HEIGHT);
+};
+
+export const isLargeScreen = () => {
+  if (Platform.OS === 'web') {
+    return false;
+  }
+
+  return (Platform.OS === 'ios' && D_HEIGHT > LG_HEIGHT);
+};
 
 export const isValidHttpUrl = (string) => {
   const pattern = new RegExp('^(https?:\\/\\/)' // protocol