From 704c6c6bada682ec7e9008a775f4719fd1d0bd00 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 21 Jan 2021 15:00:39 -0500 Subject: fixed isIPhoneX and adjusted spacing --- src/utils/statusBarHeight.ts | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) (limited to 'src/utils') 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 -- cgit v1.2.3-70-g09d2 From 7f5a1a224a235da7c38c3f38c41bbdca71d14471 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 21 Jan 2021 16:17:40 -0500 Subject: merged utils to just layouts --- src/utils/index.ts | 3 +-- src/utils/layouts.ts | 31 +++++++++++++++++++++++++++++++ src/utils/screenDimensions.ts | 6 ------ src/utils/statusBarHeight.ts | 27 --------------------------- 4 files changed, 32 insertions(+), 35 deletions(-) create mode 100644 src/utils/layouts.ts delete mode 100644 src/utils/screenDimensions.ts delete mode 100644 src/utils/statusBarHeight.ts (limited to 'src/utils') diff --git a/src/utils/index.ts b/src/utils/index.ts index f5352af1..629a0091 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -1,5 +1,4 @@ -export * from './screenDimensions'; -export * from './statusBarHeight'; +export * from './layouts'; export * from './moments'; export * from './common'; export * from './users'; diff --git a/src/utils/layouts.ts b/src/utils/layouts.ts new file mode 100644 index 00000000..fbe32189 --- /dev/null +++ b/src/utils/layouts.ts @@ -0,0 +1,31 @@ +import {Platform, StatusBar} from 'react-native'; +import {Dimensions} from 'react-native'; + +export const {width: SCREEN_WIDTH, height: SCREEN_HEIGHT} = Dimensions.get( + 'window', +); + +/** + * 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_HEIGHT / SCREEN_WIDTH > 2 + : false; + +// Taken from: https://github.com/react-navigation/react-navigation/issues/283 +export const HeaderHeight = Platform.select({ + ios: 44, + android: 56, + default: 64, +}); + +export const StatusBarHeight = Platform.select({ + ios: isIPhoneX() ? 44 : 20, + android: StatusBar.currentHeight, + default: 0, +}); + +export const AvatarHeaderHeight = (HeaderHeight + StatusBarHeight) * 1.3; diff --git a/src/utils/screenDimensions.ts b/src/utils/screenDimensions.ts deleted file mode 100644 index 56277ddc..00000000 --- a/src/utils/screenDimensions.ts +++ /dev/null @@ -1,6 +0,0 @@ -import {Dimensions} from 'react-native'; - -const {width, height} = Dimensions.get('window'); - -export const SCREEN_WIDTH = width; -export const SCREEN_HEIGHT = height; diff --git a/src/utils/statusBarHeight.ts b/src/utils/statusBarHeight.ts deleted file mode 100644 index c5509376..00000000 --- a/src/utils/statusBarHeight.ts +++ /dev/null @@ -1,27 +0,0 @@ -import {Platform, StatusBar} from 'react-native'; -import {SCREEN_HEIGHT, SCREEN_WIDTH} from './screenDimensions'; - -/** - * 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_HEIGHT / SCREEN_WIDTH > 2 - : false; - -// Taken from: https://github.com/react-navigation/react-navigation/issues/283 -export const HeaderHeight = Platform.select({ - ios: 44, - android: 56, - default: 64, -}); - -export const StatusBarHeight = Platform.select({ - ios: isIPhoneX() ? 44 : 20, - android: StatusBar.currentHeight, - default: 0, -}); - -export const AvatarHeaderHeight = (HeaderHeight + StatusBarHeight) * 1.3; -- cgit v1.2.3-70-g09d2 From d6714bec669becb4132035ffdf7b9b87e9c6ce7b Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 21 Jan 2021 16:59:30 -0500 Subject: normalize function and normalized all fonts on profile page --- src/components/moments/Moment.tsx | 9 ++------- src/components/profile/Content.tsx | 5 +++-- src/components/profile/FriendsCount.tsx | 5 +++-- src/components/profile/ProfileBody.tsx | 8 ++++---- src/components/profile/ProfileHeader.tsx | 16 ++++------------ src/components/profile/UniversityIcon.tsx | 11 ++++------- src/constants/constants.ts | 2 +- src/utils/layouts.ts | 21 +++++++++++++++++++-- 8 files changed, 40 insertions(+), 37 deletions(-) (limited to 'src/utils') diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx index 7905e8a9..b08eb574 100644 --- a/src/components/moments/Moment.tsx +++ b/src/components/moments/Moment.tsx @@ -13,7 +13,7 @@ import BigPlusIcon from '../../assets/icons/plus_icon-02.svg'; import UpIcon from '../../assets/icons/up_icon.svg'; import {TAGG_TEXT_LIGHT_BLUE} from '../../constants'; import {ERROR_UPLOAD_MOMENT_SHORT} from '../../constants/strings'; -import {SCREEN_WIDTH} from '../../utils'; +import {normalize, SCREEN_WIDTH} from '../../utils'; import MomentTile from './MomentTile'; interface MomentProps { @@ -171,15 +171,10 @@ const styles = StyleSheet.create({ alignItems: 'center', }, titleText: { - fontSize: 16, + fontSize: normalize(16), fontWeight: 'bold', color: TAGG_TEXT_LIGHT_BLUE, }, - // titleContainer: { - // flex: 1, - // flexDirection: 'row', - // justifyContent: 'flex-end', - // }, flexer: { flex: 1, }, diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx index a2bd3cf3..140c911c 100644 --- a/src/components/profile/Content.tsx +++ b/src/components/profile/Content.tsx @@ -16,6 +16,7 @@ import { fetchUserX, getUserAsProfilePreviewType, moveCategory, + normalize, SCREEN_HEIGHT, userLogin, } from '../../utils'; @@ -424,7 +425,7 @@ const styles = StyleSheet.create({ alignSelf: 'center', }, createCategoryButtonLabel: { - fontSize: 16, + fontSize: normalize(16), fontWeight: '500', color: 'white', }, @@ -435,7 +436,7 @@ const styles = StyleSheet.create({ marginVertical: '10%', }, noMomentsText: { - fontSize: 14, + fontSize: normalize(14), fontWeight: 'bold', color: 'gray', marginVertical: '8%', diff --git a/src/components/profile/FriendsCount.tsx b/src/components/profile/FriendsCount.tsx index 23a24787..9647710e 100644 --- a/src/components/profile/FriendsCount.tsx +++ b/src/components/profile/FriendsCount.tsx @@ -5,6 +5,7 @@ import {useNavigation} from '@react-navigation/native'; import {RootState} from '../../store/rootReducer'; import {useSelector} from 'react-redux'; import {ScreenType} from '../../types'; +import {normalize} from '../../utils'; interface FriendsCountProps extends ViewProps { userXId: string | undefined; @@ -55,11 +56,11 @@ const styles = StyleSheet.create({ }, count: { fontWeight: '700', - fontSize: 13, + fontSize: normalize(14), }, label: { fontWeight: '500', - fontSize: 13, + fontSize: normalize(14), }, }); diff --git a/src/components/profile/ProfileBody.tsx b/src/components/profile/ProfileBody.tsx index 0b00481b..7bc927c1 100644 --- a/src/components/profile/ProfileBody.tsx +++ b/src/components/profile/ProfileBody.tsx @@ -1,6 +1,6 @@ import React from 'react'; import {StyleSheet, View, Text, LayoutChangeEvent, Linking} from 'react-native'; -import {Button} from 'react-native-elements'; +import {Button, normalize} from 'react-native-elements'; import { TAGG_DARK_BLUE, TAGG_TEXT_LIGHT_BLUE, @@ -160,15 +160,15 @@ const styles = StyleSheet.create({ }, username: { fontWeight: '600', - fontSize: 16.5, + fontSize: normalize(12), marginBottom: '1%', }, biography: { - fontSize: 16, + fontSize: normalize(12), marginBottom: '1.5%', }, website: { - fontSize: 16, + fontSize: normalize(12), color: TAGG_DARK_BLUE, marginBottom: '1%', }, diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx index 26bbbc90..7fc90257 100644 --- a/src/components/profile/ProfileHeader.tsx +++ b/src/components/profile/ProfileHeader.tsx @@ -5,6 +5,7 @@ import {UniversityIcon} from '.'; import {PROFILE_CUTOUT_TOP_Y} from '../../constants'; import {RootState} from '../../store/rootreducer'; import {ScreenType} from '../../types'; +import {normalize} from '../../utils'; import Avatar from './Avatar'; import FriendsCount from './FriendsCount'; import ProfileMoreInfoDrawer from './ProfileMoreInfoDrawer'; @@ -30,7 +31,6 @@ const ProfileHeader: React.FC = ({ : useSelector((state: RootState) => state.user); const [drawerVisible, setDrawerVisible] = useState(false); const [firstName, lastName] = [...name.split(' ')]; - return ( Platform.OS === 'ios' && !Platform.isPad && !Platform.isTVOS - ? SCREEN_HEIGHT / SCREEN_WIDTH > 2 + ? SCREEN_RATIO > 2 : false; // Taken from: https://github.com/react-navigation/react-navigation/issues/283 @@ -29,3 +31,18 @@ export const StatusBarHeight = Platform.select({ }); export const AvatarHeaderHeight = (HeaderHeight + StatusBarHeight) * 1.3; + +/** + * This is a function for normalizing the font size for different devices, based on iphone 8. + * + * E.g. font size 13 on an iphone 8 is 13, but on an iPhone 11 is + * 14.5 + */ +export const normalize = (fontSize: number) => { + // based on iphone 8 logical screen width + const scale = SCREEN_WIDTH / 375; + let newSize = fontSize * scale; + // round to the nearest 0.5 + newSize = Math.round(PixelRatio.roundToNearestPixel(newSize) * 2) / 2; + return newSize; +}; -- cgit v1.2.3-70-g09d2