[nav] Create style sheet and directory for every (tabs) screen (#33)

* non nested directory causes extra bottom tab * rebase
calblueprint · Nov 2, 2023 · 9f3299a · 9f3299a
1 parent ca425f5
commit 9f3299a
Show file tree

Hide file tree

Showing 10 changed files with 211 additions and 171 deletions.
diff --git a/src/app/(tabs)/_layout.tsx b/src/app/(tabs)/_layout.tsx
@@ -38,10 +38,17 @@ function TabNav() {
         }}
       />
       <Tabs.Screen
-        name="mycontent"
+        name="story"
         options={{
           headerShown: false,
-          tabBarLabel: 'My Content',
+          href: null,
+        }}
+      />
+      <Tabs.Screen
+        name="library"
+        options={{
+          headerShown: false,
+          tabBarLabel: 'Library',
           tabBarIcon: DocumentIcon,
         }}
       />

diff --git a/src/app/(tabs)/library/_layout.tsx b/src/app/(tabs)/library/_layout.tsx
@@ -0,0 +1,11 @@
+import { Stack } from 'expo-router';
+
+function StackLayout() {
+  return (
+    <Stack>
+      <Stack.Screen name="index" options={{ headerShown: false }} />
+    </Stack>
+  );
+}
+
+export default StackLayout;
diff --git a/src/app/(tabs)/mycontent.tsx → src/app/(tabs)/library/index.tsx b/src/app/(tabs)/mycontent.tsx → src/app/(tabs)/library/index.tsx
@@ -1,14 +1,14 @@
 import { Text } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
-import globalStyles from '../../styles/globalStyles';
+import globalStyles from '../../../styles/globalStyles';
 
-function MyContentScreen() {
+function LibraryScreen() {
   return (
     <SafeAreaView style={globalStyles.container}>
-      <Text style={globalStyles.h1}>My Content</Text>
+      <Text style={globalStyles.h1}>Library</Text>
     </SafeAreaView>
   );
 }
 
-export default MyContentScreen;
+export default LibraryScreen;
diff --git a/src/app/(tabs)/library/styles.ts b/src/app/(tabs)/library/styles.ts
@@ -0,0 +1,5 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({});
+
+export default styles;
diff --git a/src/app/(tabs)/search/_layout.tsx b/src/app/(tabs)/search/_layout.tsx
@@ -4,7 +4,6 @@ function StackLayout() {
   return (
     <Stack>
       <Stack.Screen name="index" options={{ headerShown: false }} />
-      <Stack.Screen name="story" options={{ headerShown: false }} />
     </Stack>
   );
 }

diff --git a/src/app/(tabs)/search/index.tsx b/src/app/(tabs)/search/index.tsx
@@ -1,9 +1,10 @@
 import { SearchBar } from '@rneui/themed';
 import { Link } from 'expo-router';
 import React, { useEffect, useState } from 'react';
-import { Button, FlatList, StyleSheet, Dimensions, View } from 'react-native';
+import { Button, FlatList, View } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
+import styles from './styles';
 import FilterModal from '../../../components/FilterModal/FilterModal';
 import SearchCard from '../../../components/SearchCard/SearchCard';
 import { fetchAllStoryPreviews } from '../../../queries/stories';
@@ -42,7 +43,6 @@ function SearchScreen() {
   return (
     <SafeAreaView style={styles.container}>
       <View style={[filterVisible ? styles.greyOverlay : styles.noOverlay]} />
-      {/* {filterVisible && <SafeAreaView style={[styles.greyOverlay]} />} */}
       <SearchBar
         platform="default"
         searchIcon={false}
@@ -59,7 +59,7 @@ function SearchScreen() {
         onChangeText={text => searchFunction(text)}
         value={search}
       />
-      <Link href="/search/story" asChild>
+      <Link href="/story" asChild>
         <Button title="Story" />
       </Link>
       <Button
@@ -91,48 +91,3 @@ function SearchScreen() {
 }
 
 export default SearchScreen;
-
-const { width, height } = Dimensions.get('window');
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: 'white',
-    justifyContent: 'flex-start',
-    paddingLeft: 24,
-    paddingRight: 24,
-    paddingTop: 20,
-    gap: 14,
-  },
-  searchContainer: {
-    backgroundColor: 'transparent',
-    borderRadius: 10,
-    borderColor: 'transparent',
-    padding: 0,
-    marginBottom: 16,
-  },
-  inputContainer: {
-    backgroundColor: '#D9D9D9',
-    margin: 0,
-    borderRadius: 10,
-  },
-  greyOverlay: {
-    flex: 1,
-    position: 'absolute',
-    left: 0,
-    top: 0,
-    opacity: 0.2,
-    backgroundColor: 'black',
-    width,
-    height,
-    zIndex: 1,
-  },
-  noOverlay: {
-    flex: 1,
-    position: 'absolute',
-    left: 0,
-    top: 0,
-    width,
-    height,
-  },
-});
diff --git a/src/app/(tabs)/search/styles.ts b/src/app/(tabs)/search/styles.ts
@@ -0,0 +1,48 @@
+import { Dimensions, StyleSheet } from 'react-native';
+
+const { width, height } = Dimensions.get('window');
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'white',
+    justifyContent: 'flex-start',
+    paddingLeft: 24,
+    paddingRight: 24,
+    paddingTop: 20,
+    gap: 14,
+  },
+  searchContainer: {
+    backgroundColor: 'transparent',
+    borderRadius: 10,
+    borderColor: 'transparent',
+    padding: 0,
+    marginBottom: 16,
+  },
+  inputContainer: {
+    backgroundColor: '#D9D9D9',
+    margin: 0,
+    borderRadius: 10,
+  },
+  greyOverlay: {
+    flex: 1,
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    opacity: 0.2,
+    backgroundColor: 'black',
+    width,
+    height,
+    zIndex: 1,
+  },
+  noOverlay: {
+    flex: 1,
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    width,
+    height,
+  },
+});
+
+export default styles;
diff --git a/src/app/(tabs)/story/_layout.tsx b/src/app/(tabs)/story/_layout.tsx
@@ -0,0 +1,11 @@
+import { Stack } from 'expo-router';
+
+function StackLayout() {
+  return (
+    <Stack>
+      <Stack.Screen name="index" options={{ headerShown: false }} />
+    </Stack>
+  );
+}
+
+export default StackLayout;
diff --git a/src/app/(tabs)/search/story.tsx → src/app/(tabs)/story/index.tsx b/src/app/(tabs)/search/story.tsx → src/app/(tabs)/story/index.tsx
@@ -7,12 +7,12 @@ import {
   Share,
   Text,
   View,
-  StyleSheet,
 } from 'react-native';
 import { Button } from 'react-native-paper';
 import { RenderHTML } from 'react-native-render-html';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
+import styles from './styles';
 import { storyObject } from '../../../utils/story';
 
 function StoryScreen() {
@@ -128,118 +128,3 @@ function StoryScreen() {
 }
 
 export default StoryScreen;
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: 'white',
-    alignItems: 'flex-start',
-    justifyContent: 'flex-start',
-    paddingLeft: 24,
-    paddingRight: 24,
-    paddingTop: 48,
-  },
-  image: {
-    width: '100%',
-    height: 153,
-    marginBottom: 16,
-  },
-  authorImage: {
-    backgroundColor: '#D9D9D9',
-    width: 21,
-    height: 21,
-    borderRadius: 100 / 2,
-  },
-  title: {
-    fontFamily: 'Avenir',
-    fontSize: 24,
-    fontWeight: '400',
-    textAlign: 'left',
-    color: 'black',
-    marginBottom: 16,
-  },
-  author: {
-    display: 'flex',
-    flexDirection: 'row',
-    gap: 10,
-    marginBottom: 16,
-  },
-  authorText: {
-    fontFamily: 'Avenir',
-    fontSize: 12,
-    fontWeight: '400',
-    textAlign: 'left',
-    color: 'black',
-  },
-  genres: {
-    display: 'flex',
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    borderRadius: 10,
-    marginBottom: 16,
-  },
-  genresBorder: {
-    backgroundColor: '#D9D9D9',
-    paddingTop: 5,
-    paddingBottom: 5,
-    paddingLeft: 10,
-    paddingRight: 10,
-    borderRadius: 10,
-    marginRight: 8,
-  },
-  genresText: {
-    fontFamily: 'Avenir',
-    fontSize: 12,
-    fontWeight: '400',
-    color: 'black',
-    backgroundColor: '#D9D9D9',
-  },
-  shareButtonText: {
-    fontFamily: 'Avenir',
-    fontSize: 12,
-    fontWeight: '400',
-    textAlign: 'left',
-    color: 'black',
-    textDecorationLine: 'underline',
-    backgroundColor: '#D9D9D9',
-  },
-  excerpt: {
-    fontFamily: 'Avenir',
-    fontSize: 16,
-    fontWeight: '400',
-    textAlign: 'left',
-    color: 'black',
-    paddingBottom: 12,
-  },
-  story: {
-    fontFamily: 'Avenir',
-    fontSize: 12,
-    fontWeight: '400',
-    textAlign: 'left',
-    color: 'black',
-    marginBottom: 16,
-  },
-  authorProcess: {
-    fontFamily: 'Avenir',
-    fontSize: 16,
-    fontWeight: '600',
-    textAlign: 'left',
-    color: 'black',
-    marginBottom: 16,
-  },
-  process: {
-    fontFamily: 'Avenir',
-    fontSize: 12,
-    fontWeight: '400',
-    textAlign: 'left',
-    color: 'black',
-    marginBottom: 16,
-  },
-  backToTopButtonText: {
-    fontFamily: 'Avenir',
-    fontSize: 12,
-    fontWeight: '800',
-    textAlign: 'left',
-    color: 'black',
-  },
-});