[chore] Create back button component

src/app/(tabs)/_layout.tsx

@@ -34,6 +34,7 @@ function TabNav() {
 
   return (
     <Tabs
+      backBehavior="history"
       screenOptions={{
         tabBarLabelStyle: { fontSize: 14 },
         tabBarHideOnKeyboard: true,

src/app/(tabs)/author/index.tsx

@@ -1,3 +1,4 @@
+import * as cheerio from 'cheerio';
 import { useLocalSearchParams, router } from 'expo-router';
 import { decode } from 'html-entities';
 import { useEffect, useState } from 'react';
@@ -14,7 +15,6 @@ import {
 } from '../../../queries/authors';
 import { Author, StoryPreview } from '../../../queries/types';
 import globalStyles from '../../../styles/globalStyles';
-import * as cheerio from 'cheerio';
 
 function AuthorScreen() {
   const [authorInfo, setAuthorInfo] = useState<Author>();
@@ -52,14 +52,14 @@ function AuthorScreen() {
 
   return (
     <SafeAreaView
-      style={[globalStyles.tabBarContainer, { marginHorizontal: -8 }]}
+      style={[globalStyles.tabBarContainer, { paddingHorizontal: 22 }]}
     >
       {isLoading ? (
         <ActivityIndicator />
       ) : (
         <ScrollView
           showsVerticalScrollIndicator={false}
-          bounces={true}
+          bounces
           contentContainerStyle={{ paddingHorizontal: 8 }}
         >
           <BackButton pressFunction={() => router.back()} />
@@ -139,7 +139,7 @@ function AuthorScreen() {
           ))}
 
           {/* View so there's space between the tab bar and the stories */}
-          <View style={{ paddingBottom: 10 }}></View>
+          <View style={{ paddingBottom: 10 }} />
         </ScrollView>
       )}
     </SafeAreaView>

src/app/(tabs)/author/styles.tsx

@@ -4,7 +4,6 @@ import colors from '../../../styles/colors';
 
 const styles = StyleSheet.create({
   authorCardContainer: {
-    marginTop: 16,
     marginBottom: 8,
     flexDirection: 'row',
     justifyContent: 'flex-start',

src/app/(tabs)/genre/index.tsx

@@ -14,11 +14,11 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 
 import styles from './styles';
 import BackButton from '../../../components/BackButton/BackButton';
+import PreviewCard from '../../../components/PreviewCard/PreviewCard';
 import { fetchGenreStoryById } from '../../../queries/genres';
 import { fetchStoryPreviewByIds } from '../../../queries/stories';
 import { StoryPreview, GenreStories } from '../../../queries/types';
 import globalStyles from '../../../styles/globalStyles';
-import PreviewCard from '../../../components/PreviewCard/PreviewCard';
 
 function GenreScreen() {
   const [genreStoryData, setGenreStoryData] = useState<GenreStories[]>();
@@ -47,13 +47,13 @@ function GenreScreen() {
 
   useEffect(() => {
     const checkTopic = (preview: StoryPreview): boolean => {
-      if (preview == null || preview.topic == null) return false;
+      if (preview?.topic == null) return false;
       if (selectedTopicsForFiltering.length == 0) return true;
       else
         return selectedTopicsForFiltering.every(t => preview.topic.includes(t));
     };
     const checkTone = (preview: StoryPreview): boolean => {
-      if (preview == null || preview.tone == null) return false;
+      if (preview?.tone == null) return false;
       if (selectedTonesForFiltering.length == 0) return true;
       else
         return selectedTonesForFiltering.every(t => preview.tone.includes(t));
@@ -202,7 +202,7 @@ function GenreScreen() {
   const renderGenreHeading = () => {
     return (
       <View>
-        <Text style={[globalStyles.h1, { marginTop: 15 }]}>
+        <Text style={globalStyles.h1}>
           {selectedSubgenre === 'All' ? mainGenre : selectedSubgenre}
         </Text>
         {/* <Text style={[globalStyles.subHeading1]}> */}
@@ -297,13 +297,7 @@ function GenreScreen() {
     >
       <View style={styles.container}>
         <View style={styles.headerContainer}>
-          <BackButton
-            pressFunction={() =>
-              router.push({
-                pathname: '/search',
-              })
-            }
-          />
+          <BackButton pressFunction={() => router.back()} />
 
           {useMemo(renderGenreHeading, [selectedSubgenre, mainGenre])}
           {useMemo(renderGenreScrollSelector, [subgenres, selectedSubgenre])}

src/app/(tabs)/genre/styles.tsx

@@ -10,7 +10,6 @@ const styles = StyleSheet.create({
   container: {
     paddingHorizontal: 24,
     width: '100%',
-    marginTop: 24,
     flex: 1,
   },
 

src/app/(tabs)/settings/index.tsx

@@ -8,19 +8,20 @@ import {
   Pressable,
   Appearance,
 } from 'react-native';
+import { Icon } from 'react-native-elements';
 import { ScrollView } from 'react-native-gesture-handler';
+import DateTimePickerModal from 'react-native-modal-datetime-picker';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import { Icon } from 'react-native-elements';
 
 import styles from './styles';
-import colors from '../../../styles/colors';
 import AccountDataDisplay from '../../../components/AccountDataDisplay/AccountDataDisplay';
+import BackButton from '../../../components/BackButton/BackButton';
 import StyledButton from '../../../components/StyledButton/StyledButton';
 import UserSelectorInput from '../../../components/UserSelectorInput/UserSelectorInput';
+import colors from '../../../styles/colors';
 import globalStyles from '../../../styles/globalStyles';
 import { useSession } from '../../../utils/AuthContext';
 import supabase from '../../../utils/supabase';
-import DateTimePickerModal from 'react-native-modal-datetime-picker';
 
 function SettingsScreen() {
   const { session, signOut } = useSession();
@@ -180,16 +181,12 @@ function SettingsScreen() {
       edges={['right', 'left', 'top', 'bottom']}
     >
       <ScrollView
-        bounces={true}
+        bounces
         contentContainerStyle={styles.main}
         showsVerticalScrollIndicator={false}
       >
         <View>
-          <Link href="/home" style={styles.back}>
-            <Text style={[globalStyles.subtext, styles.backText]}>
-              {'<Back'}
-            </Text>
-          </Link>
+          <BackButton pressFunction={() => router.back()} />
           <View>
             <DateTimePickerModal
               isVisible={showDatePicker}
@@ -229,7 +226,7 @@ function SettingsScreen() {
                           type="material"
                           color={colors.darkGrey}
                           style={styles.icon}
-                        ></Icon>
+                        />
                       </View>
                     </Pressable>
                   </View>

src/app/(tabs)/settings/styles.tsx

@@ -1,4 +1,5 @@
 import { StyleSheet } from 'react-native';
+
 import colors from '../../../styles/colors';
 
 export default StyleSheet.create({
@@ -27,16 +28,6 @@ export default StyleSheet.create({
   heading: {
     paddingBottom: 20,
   },
-  back: {
-    paddingTop: 30,
-    paddingBottom: 16,
-    color: '#797979',
-    fontSize: 12,
-    fontWeight: '400',
-  },
-  backText: {
-    color: colors.darkGrey,
-  },
   staticData: {
     flexDirection: 'row',
     flexWrap: 'wrap',

src/app/(tabs)/story/index.tsx

@@ -16,6 +16,7 @@ import { RenderHTML } from 'react-native-render-html';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
 import styles from './styles';
+import BackButton from '../../../components/BackButton/BackButton';
 import { fetchStory } from '../../../queries/stories';
 import { Story } from '../../../queries/types';
 import colors from '../../../styles/colors';
@@ -74,6 +75,8 @@ function StoryScreen() {
           ref={scrollRef}
           showsVerticalScrollIndicator={false}
         >
+          <BackButton pressFunction={() => router.back()} />
+
           <Text style={[globalStyles.h1, styles.title]}>{story?.title}</Text>
 
           <TouchableOpacity

src/app/(tabs)/story/styles.ts

@@ -1,11 +1,11 @@
 import { StyleSheet } from 'react-native';
+
 import colors from '../../../styles/colors';
 
 const styles = StyleSheet.create({
   container: {
     paddingLeft: 24,
     paddingRight: 24,
-    paddingTop: 48,
   },
   authorImage: {
     backgroundColor: '#D9D9D9',

src/app/auth/forgotPassword/index.tsx

@@ -1,17 +1,19 @@
 import { router, Link } from 'expo-router';
 import { useState, useRef, useEffect } from 'react';
 import { Alert, Text, View } from 'react-native';
-import validator from 'validator';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { useDebounce } from 'use-debounce';
+import validator from 'validator';
 
 import styles from './styles';
-import globalStyles from '../../../styles/globalStyles';
-import { useSession } from '../../../utils/AuthContext';
-import UserStringInput from '../../../components/UserStringInput/UserStringInput';
+import BackButton from '../../../components/BackButton/BackButton';
 import StyledButton from '../../../components/StyledButton/StyledButton';
-import { isEmailTaken } from '../../../queries/profiles';
+import UserStringInput from '../../../components/UserStringInput/UserStringInput';
 import { queryEmailByUsername } from '../../../queries/auth';
+import { isEmailTaken } from '../../../queries/profiles';
 import colors from '../../../styles/colors';
+import globalStyles from '../../../styles/globalStyles';
+import { useSession } from '../../../utils/AuthContext';
 
 function ForgotPasswordScreen() {
   const { resetPassword } = useSession();
@@ -71,10 +73,8 @@ function ForgotPasswordScreen() {
   };
 
   return (
-    <View style={styles.container}>
-      <Link href="/auth/login" style={styles.back}>
-        <Text style={[globalStyles.subtext, styles.backText]}>{'<Back'}</Text>
-      </Link>
+    <SafeAreaView style={styles.container}>
+      <BackButton pressFunction={() => router.back()} />
       <View style={styles.body}>
         <View>
           <Text style={[globalStyles.h1, styles.heading]}>
@@ -106,7 +106,7 @@ function ForgotPasswordScreen() {
           />
         </View>
       </View>
-    </View>
+    </SafeAreaView>
   );
 }
 

src/app/auth/forgotPassword/styles.tsx

@@ -1,20 +1,18 @@
 import { StyleSheet } from 'react-native';
+
 import colors from '../../../styles/colors';
 
 export default StyleSheet.create({
   container: {
     flex: 1,
-    paddingVertical: 32,
-    paddingLeft: 30,
-    paddingRight: 30,
+    marginHorizontal: 42,
   },
   heading: {
     paddingBottom: 8,
   },
   body: {
     flex: 1,
     justifyContent: 'space-between',
-    paddingHorizontal: 12,
   },
   button: {
     paddingBottom: 40,
@@ -23,14 +21,4 @@ export default StyleSheet.create({
     paddingVertical: 18,
     color: colors.darkGrey,
   },
-  back: {
-    paddingTop: 30,
-    paddingBottom: 16,
-    color: colors.darkGrey,
-    fontSize: 12,
-    fontWeight: '400',
-  },
-  backText: {
-    color: colors.darkGrey,
-  },
 });