aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/moments/Moment.tsx9
-rw-r--r--src/components/profile/Content.tsx5
-rw-r--r--src/components/profile/FriendsCount.tsx5
-rw-r--r--src/components/profile/ProfileBody.tsx9
-rw-r--r--src/components/profile/ProfileHeader.tsx44
-rw-r--r--src/components/profile/ProfileMoreInfoDrawer.tsx1
-rw-r--r--src/components/profile/ProfilePreview.tsx33
-rw-r--r--src/components/profile/UniversityIcon.tsx12
-rw-r--r--src/components/search/Explore.tsx4
-rw-r--r--src/components/search/ExploreSection.tsx3
-rw-r--r--src/components/search/ExploreSectionUser.tsx6
-rw-r--r--src/components/taggs/Tagg.tsx3
-rw-r--r--src/constants/constants.ts14
-rw-r--r--src/screens/profile/EditProfile.tsx2
-rw-r--r--src/screens/profile/MomentCommentsScreen.tsx2
-rw-r--r--src/screens/search/SearchScreen.tsx1
-rw-r--r--src/utils/index.ts3
-rw-r--r--src/utils/layouts.ts48
-rw-r--r--src/utils/screenDimensions.ts6
-rw-r--r--src/utils/statusBarHeight.ts28
20 files changed, 118 insertions, 120 deletions
diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx
index c591d973..a6b553b1 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_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_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 eb60a005..a35a5820 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -43,6 +43,7 @@ import {
fetchUserX,
getUserAsProfilePreviewType,
moveCategory,
+ normalize,
SCREEN_HEIGHT,
userLogin,
} from '../../utils';
@@ -426,7 +427,7 @@ const styles = StyleSheet.create({
alignSelf: 'center',
},
createCategoryButtonLabel: {
- fontSize: 16,
+ fontSize: normalize(16),
fontWeight: '500',
color: 'white',
},
@@ -437,7 +438,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 a45e9e43..d10e2e15 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_LIGHT_BLUE,
@@ -160,16 +160,15 @@ const styles = StyleSheet.create({
},
username: {
fontWeight: '600',
- fontSize: 16.5,
+ fontSize: normalize(12),
marginBottom: '1%',
- marginTop: '-3%',
},
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 8d502d97..7dad2a68 100644
--- a/src/components/profile/ProfileHeader.tsx
+++ b/src/components/profile/ProfileHeader.tsx
@@ -2,10 +2,10 @@ import React, {useState} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import {useSelector} from 'react-redux';
import {UniversityIcon} from '.';
-import {NO_MOMENTS} from '../../store/initialStates';
+import {PROFILE_CUTOUT_TOP_Y} from '../../constants';
import {RootState} from '../../store/rootreducer';
import {ScreenType} from '../../types';
-import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {normalize} from '../../utils';
import Avatar from './Avatar';
import FriendsCount from './FriendsCount';
import ProfileMoreInfoDrawer from './ProfileMoreInfoDrawer';
@@ -31,7 +31,6 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
: useSelector((state: RootState) => state.user);
const [drawerVisible, setDrawerVisible] = useState(false);
const [firstName, lastName] = [...name.split(' ')];
-
return (
<View style={styles.container}>
<ProfileMoreInfoDrawer
@@ -59,13 +58,8 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
</View>
)}
<View style={styles.friendsAndUniversity}>
- <FriendsCount
- style={styles.friends}
- screenType={screenType}
- userXId={userXId}
- />
+ <FriendsCount screenType={screenType} userXId={userXId} />
<UniversityIcon
- style={styles.university}
university="brown"
university_class={university_class}
/>
@@ -78,7 +72,7 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
const styles = StyleSheet.create({
container: {
- top: SCREEN_HEIGHT / 2.4,
+ top: PROFILE_CUTOUT_TOP_Y * 1.02,
width: '100%',
position: 'absolute',
},
@@ -87,35 +81,27 @@ const styles = StyleSheet.create({
},
header: {
flexDirection: 'column',
- justifyContent: 'center',
+ justifyContent: 'space-evenly',
alignItems: 'center',
- marginTop: SCREEN_WIDTH / 18.2,
- marginLeft: SCREEN_WIDTH / 8,
- marginBottom: SCREEN_WIDTH / 50,
+ marginRight: '15%',
+ marginLeft: '5%',
+ flex: 1,
},
avatar: {
- bottom: SCREEN_WIDTH / 80,
- left: '10%',
+ marginLeft: '3%',
+ top: '-8%',
},
name: {
- marginLeft: SCREEN_WIDTH / 8,
- fontSize: 17,
+ fontSize: normalize(17),
fontWeight: '500',
alignSelf: 'center',
},
- friends: {
- alignSelf: 'flex-start',
- marginRight: SCREEN_WIDTH / 20,
- },
- university: {
- alignSelf: 'flex-end',
- bottom: 3,
- },
friendsAndUniversity: {
flexDirection: 'row',
- flex: 1,
- marginLeft: SCREEN_WIDTH / 10,
- marginTop: SCREEN_WIDTH / 40,
+ alignItems: 'center',
+ justifyContent: 'space-evenly',
+ width: '100%',
+ height: 50,
},
});
diff --git a/src/components/profile/ProfileMoreInfoDrawer.tsx b/src/components/profile/ProfileMoreInfoDrawer.tsx
index 9fe36ae1..daa83eb3 100644
--- a/src/components/profile/ProfileMoreInfoDrawer.tsx
+++ b/src/components/profile/ProfileMoreInfoDrawer.tsx
@@ -107,7 +107,6 @@ const styles = StyleSheet.create({
more: {
position: 'absolute',
right: '5%',
- marginTop: '4%',
zIndex: 1,
},
});
diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx
index b2c0a24d..389ca367 100644
--- a/src/components/profile/ProfilePreview.tsx
+++ b/src/components/profile/ProfilePreview.tsx
@@ -1,27 +1,26 @@
-import React, {useEffect, useState, useContext} from 'react';
-import {ProfilePreviewType, ScreenType} from '../../types';
+import AsyncStorage from '@react-native-community/async-storage';
+import {useNavigation} from '@react-navigation/native';
+import React, {useEffect, useState} from 'react';
import {
- View,
- Text,
+ Alert,
Image,
StyleSheet,
- ViewProps,
+ Text,
TouchableOpacity,
- Alert,
+ View,
+ ViewProps,
} from 'react-native';
-import {useNavigation} from '@react-navigation/native';
-import RNFetchBlob from 'rn-fetch-blob';
-import AsyncStorage from '@react-native-community/async-storage';
-import {PROFILE_PHOTO_THUMBNAIL_ENDPOINT} from '../../constants';
-import {UserType, PreviewType} from '../../types';
-import {isUserBlocked, loadAvatar} from '../../services';
-import {useSelector, useDispatch, useStore} from 'react-redux';
+import {useDispatch, useSelector, useStore} from 'react-redux';
+import {ERROR_UNABLE_TO_VIEW_PROFILE} from '../../constants/strings';
+import {loadAvatar} from '../../services';
import {RootState} from '../../store/rootreducer';
-import {logout} from '../../store/actions';
+import {
+ PreviewType,
+ ProfilePreviewType,
+ ScreenType,
+ UserType,
+} from '../../types';
import {checkIfUserIsBlocked, fetchUserX, userXInStore} from '../../utils';
-import {SearchResultsBackground} from '../search';
-import NavigationBar from 'src/routes/tabs';
-import {ERROR_UNABLE_TO_VIEW_PROFILE} from '../../constants/strings';
const NO_USER: UserType = {
userId: '',
diff --git a/src/components/profile/UniversityIcon.tsx b/src/components/profile/UniversityIcon.tsx
index 13586359..95aef8b9 100644
--- a/src/components/profile/UniversityIcon.tsx
+++ b/src/components/profile/UniversityIcon.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import {StyleSheet, ViewProps} from 'react-native';
import {Image, Text, View} from 'react-native-animatable';
-import {getUniversityClass} from '../../utils';
+import {getUniversityClass, normalize} from '../../utils';
export interface UniversityIconProps extends ViewProps {
university: string;
@@ -38,19 +38,19 @@ const UniversityIcon: React.FC<UniversityIconProps> = ({
const styles = StyleSheet.create({
container: {
- flex: 1,
flexDirection: 'column',
flexWrap: 'wrap',
justifyContent: 'center',
+ alignItems: 'center',
+ height: '100%',
},
univClass: {
- fontSize: 13,
+ fontSize: normalize(14),
fontWeight: '500',
},
icon: {
- alignSelf: 'center',
- width: 17,
- height: 19,
+ width: normalize(17),
+ height: normalize(19),
},
});
diff --git a/src/components/search/Explore.tsx b/src/components/search/Explore.tsx
index c07c66b8..4a71249b 100644
--- a/src/components/search/Explore.tsx
+++ b/src/components/search/Explore.tsx
@@ -4,6 +4,7 @@ import {useSelector} from 'react-redux';
import {EXPLORE_SECTION_TITLES} from '../../constants';
import {RootState} from '../../store/rootReducer';
import {ExploreSectionType} from '../../types';
+import {normalize} from '../../utils';
import ExploreSection from './ExploreSection';
const Explore: React.FC = () => {
@@ -21,11 +22,10 @@ const Explore: React.FC = () => {
const styles = StyleSheet.create({
container: {
zIndex: 0,
- // margin: '5%',
},
header: {
fontWeight: '700',
- fontSize: 22,
+ fontSize: normalize(22),
color: '#fff',
marginBottom: '2%',
margin: '5%',
diff --git a/src/components/search/ExploreSection.tsx b/src/components/search/ExploreSection.tsx
index 8e8b4988..17079e77 100644
--- a/src/components/search/ExploreSection.tsx
+++ b/src/components/search/ExploreSection.tsx
@@ -1,6 +1,7 @@
import React, {Fragment} from 'react';
import {ScrollView, StyleSheet, Text, View} from 'react-native';
import {ProfilePreviewType} from '../../types';
+import {normalize} from '../../utils';
import ExploreSectionUser from './ExploreSectionUser';
/**
@@ -34,7 +35,7 @@ const styles = StyleSheet.create({
},
header: {
fontWeight: '600',
- fontSize: 20,
+ fontSize: normalize(18),
color: '#fff',
marginLeft: '5%',
marginBottom: '5%',
diff --git a/src/components/search/ExploreSectionUser.tsx b/src/components/search/ExploreSectionUser.tsx
index 0bf68a20..68e077e3 100644
--- a/src/components/search/ExploreSectionUser.tsx
+++ b/src/components/search/ExploreSectionUser.tsx
@@ -12,7 +12,7 @@ import {useDispatch, useSelector, useStore} from 'react-redux';
import {loadAvatar} from '../../services';
import {RootState} from '../../store/rootReducer';
import {ProfilePreviewType, ScreenType} from '../../types';
-import {fetchUserX, userXInStore} from '../../utils';
+import {fetchUserX, normalize, userXInStore} from '../../utils';
/**
* Search Screen for user recommendations and a search
@@ -110,13 +110,13 @@ const styles = StyleSheet.create({
name: {
fontWeight: '600',
flexWrap: 'wrap',
- fontSize: 16,
+ fontSize: normalize(16),
color: '#fff',
textAlign: 'center',
},
username: {
fontWeight: '400',
- fontSize: 14,
+ fontSize: normalize(14),
color: '#fff',
},
});
diff --git a/src/components/taggs/Tagg.tsx b/src/components/taggs/Tagg.tsx
index 82ac07df..5fa8b395 100644
--- a/src/components/taggs/Tagg.tsx
+++ b/src/components/taggs/Tagg.tsx
@@ -22,6 +22,7 @@ import {
ERROR_UNABLE_TO_FIND_PROFILE,
SUCCESS_LINK,
} from '../../constants/strings';
+import {normalize} from '../../utils';
interface TaggProps {
social: string;
@@ -165,7 +166,7 @@ const styles = StyleSheet.create({
justifyContent: 'space-between',
alignItems: 'center',
marginHorizontal: 15,
- height: 90,
+ height: normalize(90),
},
iconTap: {
justifyContent: 'center',
diff --git a/src/constants/constants.ts b/src/constants/constants.ts
index 37b6e038..ad43c337 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, normalize} 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.55
+ : 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;
@@ -17,7 +19,7 @@ export const AVATAR_DIM = 44;
export const AVATAR_GRADIENT_DIM = 50;
export const TAGG_ICON_DIM = 58;
-export const TAGG_RING_DIM = 65;
+export const TAGG_RING_DIM = normalize(60);
export const INTEGRATED_SOCIAL_LIST: string[] = [
'Instagram',
diff --git a/src/screens/profile/EditProfile.tsx b/src/screens/profile/EditProfile.tsx
index 36de2bfa..7d3ca581 100644
--- a/src/screens/profile/EditProfile.tsx
+++ b/src/screens/profile/EditProfile.tsx
@@ -313,7 +313,7 @@ const EditProfile: React.FC<EditProfileProps> = ({route, navigation}) => {
if (form.bio) {
if (form.isValidBio) {
- request.append('biography', form.bio);
+ request.append('biography', form.bio.trim());
} else {
setForm({...form, attemptedSubmit: false});
setTimeout(() => setForm({...form, attemptedSubmit: true}));
diff --git a/src/screens/profile/MomentCommentsScreen.tsx b/src/screens/profile/MomentCommentsScreen.tsx
index 6434477e..2bceafc9 100644
--- a/src/screens/profile/MomentCommentsScreen.tsx
+++ b/src/screens/profile/MomentCommentsScreen.tsx
@@ -15,7 +15,7 @@ import {CommentTile, TabsGradient} from '../../components';
import {AddComment} from '../../components/';
import {ProfileStackParams} from '../../routes/main';
import {CommentType} from '../../types';
-import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils/screenDimensions';
+import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
/**
* Comments Screen for an image uploaded
diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx
index f231cb78..059bd968 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,
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..e2f1f0b1
--- /dev/null
+++ b/src/utils/layouts.ts
@@ -0,0 +1,48 @@
+import {PixelRatio, Platform, StatusBar} from 'react-native';
+import {Dimensions} from 'react-native';
+
+export const {width: SCREEN_WIDTH, height: SCREEN_HEIGHT} = Dimensions.get(
+ 'window',
+);
+
+export const SCREEN_RATIO = SCREEN_HEIGHT / SCREEN_WIDTH;
+
+/**
+ * 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_RATIO > 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;
+
+/**
+ * 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;
+};
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 b8eb7b33..00000000
--- a/src/utils/statusBarHeight.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-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;
-
-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)
- : 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;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 17:23:12 +0000