fixed isIPhoneX and adjusted spacing

6 files changed, 27 insertions, 19 deletions

diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index e7fb566b..82803a7a 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -113,9 +113,10 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
   const [isStageOnePromptClosed, setIsStageOnePromptClosed] = useState<boolean>(
     false,
   );
-  const [isStageThreePromptClosed, setIsStageThreePromptClosed] = useState<
-    boolean
-  >(false);
+  const [
+    isStageThreePromptClosed,
+    setIsStageThreePromptClosed,
+  ] = useState<boolean>(false);
 
   const onRefresh = useCallback(() => {
     const refrestState = async () => {
@@ -284,7 +285,7 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
                 momentCategories.filter((mc) => mc !== category),
                 false,
               ),
-            )
+            );
             dispatch(deleteUserMomentsForCategory(category));
           },
         },
diff --git a/src/components/profile/ProfileBody.tsx b/src/components/profile/ProfileBody.tsx
index 6284ff59..0b00481b 100644
--- a/src/components/profile/ProfileBody.tsx
+++ b/src/components/profile/ProfileBody.tsx
@@ -162,7 +162,6 @@ const styles = StyleSheet.create({
     fontWeight: '600',
     fontSize: 16.5,
     marginBottom: '1%',
-    marginTop: '-3%',
   },
   biography: {
     fontSize: 16,
diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx
index 8d502d97..9c91c079 100644
--- a/src/components/profile/ProfileHeader.tsx
+++ b/src/components/profile/ProfileHeader.tsx
@@ -2,6 +2,7 @@ import React, {useState} from 'react';
 import {StyleSheet, Text, View} from 'react-native';
 import {useSelector} from 'react-redux';
 import {UniversityIcon} from '.';
+import {PROFILE_CUTOUT_TOP_Y} from '../../constants';
 import {NO_MOMENTS} from '../../store/initialStates';
 import {RootState} from '../../store/rootreducer';
 import {ScreenType} from '../../types';
@@ -78,7 +79,7 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
 
 const styles = StyleSheet.create({
   container: {
-    top: SCREEN_HEIGHT / 2.4,
+    top: PROFILE_CUTOUT_TOP_Y * 0.96,
     width: '100%',
     position: 'absolute',
   },
diff --git a/src/constants/constants.ts b/src/constants/constants.ts
index b96d9438..0346c45f 100644
--- a/src/constants/constants.ts
+++ b/src/constants/constants.ts
@@ -1,13 +1,15 @@
 import {ReactText} from 'react';
 import {BackgroundGradientType, ExploreSectionType} from './../types/';
-import {SCREEN_WIDTH, SCREEN_HEIGHT} from '../utils';
+import {SCREEN_WIDTH, SCREEN_HEIGHT, isIPhoneX} from '../utils';
 
 export const CHIN_HEIGHT = 34;
 
-export const PROFILE_CUTOUT_TOP_Y = SCREEN_HEIGHT / 2.3;
-export const PROFILE_CUTOUT_BOTTOM_Y = SCREEN_HEIGHT / 1.76;
-export const PROFILE_CUTOUT_CORNER_X = SCREEN_WIDTH / 2.9;
-export const PROFILE_CUTOUT_CORNER_Y = SCREEN_HEIGHT / 1.95;
+export const PROFILE_CUTOUT_TOP_Y = SCREEN_HEIGHT * 0.435;
+export const PROFILE_CUTOUT_BOTTOM_Y = isIPhoneX()
+  ? SCREEN_HEIGHT * 0.54
+  : SCREEN_HEIGHT * 0.58;
+export const PROFILE_CUTOUT_CORNER_X = SCREEN_WIDTH * 0.344;
+export const PROFILE_CUTOUT_CORNER_Y = SCREEN_HEIGHT * 0.513;
 
 export const IMAGE_WIDTH = SCREEN_WIDTH;
 export const IMAGE_HEIGHT = SCREEN_WIDTH;
diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx
index 9f98b4d7..5072e13a 100644
--- a/src/screens/search/SearchScreen.tsx
+++ b/src/screens/search/SearchScreen.tsx
@@ -2,6 +2,7 @@ import AsyncStorage from '@react-native-community/async-storage';
 import {useFocusEffect} from '@react-navigation/native';
 import React, {useCallback, useEffect, useState} from 'react';
 import {
+  Dimensions,
   Keyboard,
   RefreshControl,
   ScrollView,
@@ -24,7 +25,12 @@ import {SEARCH_ENDPOINT, TAGG_TEXT_LIGHT_BLUE} from '../../constants';
 import {loadRecentlySearched, resetScreenType} from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
 import {ProfilePreviewType, ScreenType, UserType} from '../../types';
-import {SCREEN_HEIGHT, SCREEN_WIDTH, StatusBarHeight} from '../../utils';
+import {
+  isIPhoneX,
+  SCREEN_HEIGHT,
+  SCREEN_WIDTH,
+  StatusBarHeight,
+} from '../../utils';
 const NO_USER: UserType = {
   userId: '',
   username: '',
diff --git a/src/utils/statusBarHeight.ts b/src/utils/statusBarHeight.ts
index b8eb7b33..c5509376 100644
--- a/src/utils/statusBarHeight.ts
+++ b/src/utils/statusBarHeight.ts
@@ -1,15 +1,14 @@
 import {Platform, StatusBar} from 'react-native';
 import {SCREEN_HEIGHT, SCREEN_WIDTH} from './screenDimensions';
 
-const X_WIDTH = 375;
-const X_HEIGHT = 812;
-const XSMAX_WIDTH = 414;
-const XSMAX_HEIGHT = 896;
-
+/**
+ * Working as of Q1 2021, latest iPhone is 12
+ * iPhone 8/SE has a logical screen ratio of about 1.77
+ * Rest has a logical screen ratio of about 2.16
+ */
 export const isIPhoneX = () =>
   Platform.OS === 'ios' && !Platform.isPad && !Platform.isTVOS
-    ? (SCREEN_WIDTH === X_WIDTH && SCREEN_HEIGHT === X_HEIGHT) ||
-      (SCREEN_WIDTH === XSMAX_WIDTH && SCREEN_HEIGHT === XSMAX_HEIGHT)
+    ? SCREEN_HEIGHT / SCREEN_WIDTH > 2
     : false;
 
 // Taken from: https://github.com/react-navigation/react-navigation/issues/283