5 files changed, 39 insertions, 11 deletions
diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index 56011f05..3b195a2b 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -115,7 +115,6 @@ const AddComment: React.FC<AddCommentProps> = ({
             placeholderTextColor="grey"
             onChangeText={setComment}
             value={comment}
-            autoCorrect={false}
             multiline={true}
             ref={ref}
           />
diff --git a/src/components/common/GradientBorderButton.tsx b/src/components/common/GradientBorderButton.tsx
index 00f46a96..32ac5c52 100644
--- a/src/components/common/GradientBorderButton.tsx
+++ b/src/components/common/GradientBorderButton.tsx
@@ -46,11 +46,12 @@ const styles = StyleSheet.create({
   },
   gradientContainer: {
     width: SCREEN_WIDTH / 2 - 40,
-    height: 40,
+    height: 43,
   },
   label: {
     fontWeight: '500',
     fontSize: normalize(14),
+    textAlign: 'center',
   },
   maskBorder: {
     borderRadius: 20,
@@ -58,7 +59,7 @@ const styles = StyleSheet.create({
   textContainer: {
     position: 'absolute',
     width: SCREEN_WIDTH / 2 - 40,
-    height: 40,
+    height: 43,
     justifyContent: 'center',
     alignItems: 'center',
   },
diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index 95d45d32..35c306e5 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -264,11 +264,21 @@ export const headerBarOptions: (
       height={normalize(18)}
       width={normalize(18)}
       color={color}
-      style={styles.backButton}
+      style={[
+        styles.backButton,
+        color === 'white' ? styles.backButtonShadow : {},
+      ]}
     />
   ),
   headerTitle: () => (
-    <Text style={[styles.headerTitle, {color: color}]}>{title}</Text>
+    <Text
+      style={[
+        styles.headerTitle,
+        {color: color},
+        {fontSize: title.length > 18 ? normalize(14) : normalize(16)},
+      ]}>
+      {title}
+    </Text>
   ),
 });
 
@@ -290,8 +300,13 @@ const styles = StyleSheet.create({
   backButton: {
     marginLeft: 30,
   },
+  backButtonShadow: {
+    shadowColor: 'black',
+    shadowRadius: 3,
+    shadowOpacity: 0.7,
+    shadowOffset: {width: 0, height: 0},
+  },
   headerTitle: {
-    fontSize: normalize(16),
     letterSpacing: normalize(1.3),
     fontWeight: '700',
   },
diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
index 61adc171..4094b0a3 100644
--- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
+++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
@@ -8,7 +8,6 @@ import {
   ViewToken,
 } from 'react-native';
 
-import Animated from 'react-native-reanimated';
 import {useDispatch, useSelector, useStore} from 'react-redux';
 import {TabsGradient, TaggLoadingIndicator, Background} from '../../components';
 import {SP_PAGE_SIZE} from '../../constants';
@@ -39,7 +38,6 @@ import SPBody from './SPBody';
  */
 
 const SuggestedPeopleScreen: React.FC = () => {
-  const y = Animated.useValue(0);
   const navigation = useNavigation();
   const state: RootState = useStore().getState();
   const dispatch = useDispatch();
@@ -65,6 +63,13 @@ const SuggestedPeopleScreen: React.FC = () => {
     people.length ? setLoading(false) : setLoading(true);
   }, [people]);
 
+  /*
+   * The randomly-generated seed used by the API to order the suggested people.
+   */
+  const [randomizationSeed, setRandomizationSeed] = useState<number>(
+    Math.random(),
+  );
+
   const stausBarRef = useRef(hideStatusBar);
 
   // loads data and append it to users based on current page
@@ -106,6 +111,7 @@ const SuggestedPeopleScreen: React.FC = () => {
       await getSuggestedPeople(
         SP_PAGE_SIZE,
         shouldResetData ? 0 : page * SP_PAGE_SIZE,
+        randomizationSeed,
       );
 
     loadNextPage().then((newUsers) => {
@@ -131,15 +137,18 @@ const SuggestedPeopleScreen: React.FC = () => {
     await Promise.all(users.map((user) => loadUserData(user)));
   };
 
+  // TODO: only reload data, don't reset screen type, which causes the entire
+  // screen to re-render and makes for bad UX
   const onRefresh = () => {
     const reset = async () => {
-      await dispatch(resetScreenType(screenType));
+      dispatch(resetScreenType(screenType));
       setShouldResetData(true);
     };
     setRefreshing(true);
     reset().then(() => {
       setRefreshing(false);
     });
+    setRandomizationSeed(Math.random());
   };
 
   useFocusEffect(
diff --git a/src/services/SuggestedPeopleService.ts b/src/services/SuggestedPeopleService.ts
index e51914b0..4f56feb9 100644
--- a/src/services/SuggestedPeopleService.ts
+++ b/src/services/SuggestedPeopleService.ts
@@ -63,10 +63,14 @@ export const sendSuggestedPeoplePhoto = async (photoUri: string) => {
   }
 };
 
-export const getSuggestedPeople = async (limit: number, offset: number) => {
+export const getSuggestedPeople = async (
+  limit: number,
+  offset: number,
+  seed: number,
+) => {
   try {
     const token = await AsyncStorage.getItem('token');
-    const url = `${SP_USERS_ENDPOINT}?limit=${limit}&offset=${offset}`;
+    const url = `${SP_USERS_ENDPOINT}?limit=${limit}&offset=${offset}&seed=${seed}`;
     const response = await fetch(url, {
       method: 'GET',
       headers: {