Temp fix for spacing for tab bar

calblueprint · Apr 7, 2024 · ea44cc5 · ea44cc5
1 parent 6a685a1
commit ea44cc5
Show file tree

Hide file tree

Showing 12 changed files with 23 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,