From ea44cc5170b90bf3bfc5c4063059ceba224be2bf Mon Sep 17 00:00:00 2001
From: Aditya Pawar <apawar@berkeley.edu>
Date: Sat, 6 Apr 2024 22:41:49 -0700
Subject: [PATCH] Temp fix for spacing for tab bar

---
 src/app/(tabs)/_layout.tsx         | 1 -
 src/app/(tabs)/author/index.tsx    | 7 +++++--
 src/app/(tabs)/genre/index.tsx     | 2 +-
 src/app/(tabs)/genre/styles.tsx    | 2 ++
 src/app/(tabs)/home/index.tsx      | 2 +-
 src/app/(tabs)/home/styles.ts      | 2 +-
 src/app/(tabs)/library/index.tsx   | 2 +-
 src/app/(tabs)/search/index.tsx    | 2 +-
 src/app/(tabs)/settings/styles.tsx | 1 +
 src/app/(tabs)/story/index.tsx     | 2 +-
 src/app/(tabs)/story/styles.ts     | 4 ----
 src/styles/globalStyles.ts         | 9 +++++++++
 12 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/src/app/(tabs)/_layout.tsx b/src/app/(tabs)/_layout.tsx
index 4046f11a..de7b449d 100644
--- a/src/app/(tabs)/_layout.tsx
+++ b/src/app/(tabs)/_layout.tsx
@@ -55,7 +55,6 @@ function TabNav() {
           headerShown: false,
           tabBarLabel: 'Home',
           tabBarIcon: ({ color }) => HomeIcon({ color }),
-          // tabBarLabelStyle: { borderTopWidth: 12, paddingTop: 12 },
         }}
       />
       <Tabs.Screen
diff --git a/src/app/(tabs)/author/index.tsx b/src/app/(tabs)/author/index.tsx
index 73c6c483..0eb091ed 100644
--- a/src/app/(tabs)/author/index.tsx
+++ b/src/app/(tabs)/author/index.tsx
@@ -46,13 +46,13 @@ function AuthorScreen() {
   }, [author]);
 
   return (
-    <SafeAreaView style={[globalStyles.container, { marginHorizontal: -8 }]}>
+    <SafeAreaView style={[globalStyles.tabBarContainer, { marginHorizontal: -8 }]}>
       {isLoading ? (
         <ActivityIndicator />
       ) : (
         <ScrollView
           showsVerticalScrollIndicator={false}
-          bounces={false}
+          bounces={true}
           contentContainerStyle={{ paddingHorizontal: 8 }}
         >
           <BackButton pressFunction={() => router.back()} />
@@ -127,6 +127,9 @@ function AuthorScreen() {
               }
             />
           ))}
+
+          {/* View so there's space between the tab bar and the stories */}
+          <View style={{ paddingBottom: 10 }}></View>
         </ScrollView>
       )}
     </SafeAreaView>
diff --git a/src/app/(tabs)/genre/index.tsx b/src/app/(tabs)/genre/index.tsx
index 2651f446..1b6a07ed 100644
--- a/src/app/(tabs)/genre/index.tsx
+++ b/src/app/(tabs)/genre/index.tsx
@@ -303,7 +303,7 @@ function GenreScreen() {
   };
 
   return (
-    <SafeAreaView style={[globalStyles.container, { paddingHorizontal: 0 }]}>
+    <SafeAreaView style={[globalStyles.tabBarContainer, { paddingHorizontal: 0 }]}>
       <View style={styles.container}>
         <View style={styles.headerContainer}>
           <BackButton
diff --git a/src/app/(tabs)/genre/styles.tsx b/src/app/(tabs)/genre/styles.tsx
index c37192de..679ae74a 100644
--- a/src/app/(tabs)/genre/styles.tsx
+++ b/src/app/(tabs)/genre/styles.tsx
@@ -22,6 +22,7 @@ const styles = StyleSheet.create({
     marginTop: 30,
     marginBottom: 15,
     width: '100%',
+    // paddingBottom: 60,
   },
   noStoriesText: {
     fontSize: 20,
@@ -31,6 +32,7 @@ const styles = StyleSheet.create({
     fontSize: 13,
   },
   renderStories: {
+    paddingBottom: 10,
     flex: 1,
   },
   headerContainer: {},
diff --git a/src/app/(tabs)/home/index.tsx b/src/app/(tabs)/home/index.tsx
index 871b0eed..66e7a2fb 100644
--- a/src/app/(tabs)/home/index.tsx
+++ b/src/app/(tabs)/home/index.tsx
@@ -56,7 +56,7 @@ function HomeScreen() {
 
   return (
     <SafeAreaView
-      style={[globalStyles.container, { marginLeft: -8, marginRight: -32 }]}
+      style={[globalStyles.tabBarContainer, { marginLeft: -8, marginRight: -32 }]}
     >
       {loading && (
         <View style={styles.loading}>
diff --git a/src/app/(tabs)/home/styles.ts b/src/app/(tabs)/home/styles.ts
index e24896bc..9f75b42d 100644
--- a/src/app/(tabs)/home/styles.ts
+++ b/src/app/(tabs)/home/styles.ts
@@ -25,7 +25,7 @@ const styles = StyleSheet.create({
     padding: 8,
   },
   scrollView2: {
-    paddingBottom: 80,
+    paddingBottom: 20,
     flexGrow: 0,
     padding: 8,
   },
diff --git a/src/app/(tabs)/library/index.tsx b/src/app/(tabs)/library/index.tsx
index 8a05bef0..c3ba5b57 100644
--- a/src/app/(tabs)/library/index.tsx
+++ b/src/app/(tabs)/library/index.tsx
@@ -5,7 +5,7 @@ import globalStyles from '../../../styles/globalStyles';
 
 function LibraryScreen() {
   return (
-    <SafeAreaView style={globalStyles.container}>
+    <SafeAreaView style={globalStyles.tabBarContainer}>
       <Text style={globalStyles.h1}>Library</Text>
     </SafeAreaView>
   );
diff --git a/src/app/(tabs)/search/index.tsx b/src/app/(tabs)/search/index.tsx
index 81ae0bd0..a5114727 100644
--- a/src/app/(tabs)/search/index.tsx
+++ b/src/app/(tabs)/search/index.tsx
@@ -183,7 +183,7 @@ function SearchScreen() {
   return (
     <SafeAreaView
       style={[
-        globalStyles.container,
+        globalStyles.tabBarContainer,
         showGenreCarousals
           ? { marginLeft: -8, marginRight: -32 }
           : { marginHorizontal: -8 },
diff --git a/src/app/(tabs)/settings/styles.tsx b/src/app/(tabs)/settings/styles.tsx
index a5eceadc..ecf2869f 100644
--- a/src/app/(tabs)/settings/styles.tsx
+++ b/src/app/(tabs)/settings/styles.tsx
@@ -10,6 +10,7 @@ export default StyleSheet.create({
     flex: 1,
     backgroundColor: 'white',
     paddingHorizontal: 24,
+    paddingBottom: 60
   },
   button: {
     marginBottom: 32,
diff --git a/src/app/(tabs)/story/index.tsx b/src/app/(tabs)/story/index.tsx
index 73cbdfef..2387f2f1 100644
--- a/src/app/(tabs)/story/index.tsx
+++ b/src/app/(tabs)/story/index.tsx
@@ -65,7 +65,7 @@ function StoryScreen() {
   };
 
   return (
-    <SafeAreaView style={styles.container}>
+    <SafeAreaView style={[globalStyles.tabBarContainer, styles.container]}>
       {isLoading ? (
         <ActivityIndicator />
       ) : (
diff --git a/src/app/(tabs)/story/styles.ts b/src/app/(tabs)/story/styles.ts
index 7e6e2c8c..66932cf5 100644
--- a/src/app/(tabs)/story/styles.ts
+++ b/src/app/(tabs)/story/styles.ts
@@ -3,10 +3,6 @@ import colors from '../../../styles/colors';
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
-    backgroundColor: 'white',
-    alignItems: 'flex-start',
-    justifyContent: 'flex-start',
     paddingLeft: 24,
     paddingRight: 24,
     paddingTop: 48,
diff --git a/src/styles/globalStyles.ts b/src/styles/globalStyles.ts
index 12e17283..6687047e 100644
--- a/src/styles/globalStyles.ts
+++ b/src/styles/globalStyles.ts
@@ -10,6 +10,15 @@ export default StyleSheet.create({
     justifyContent: 'flex-start',
     paddingHorizontal: 24,
   },
+
+  tabBarContainer: {
+    flex: 1,
+    backgroundColor: 'white',
+    alignItems: 'flex-start',
+    justifyContent: 'flex-start',
+    paddingHorizontal: 24,
+    paddingBottom: 60
+  },
   authContainer: {
     marginHorizontal: 38,
     flex: 1,