fixed (tabs) routing and added styles sheets

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,
         }}
       />

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;

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;

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

@@ -0,0 +1,5 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({});
+
+export default styles;

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>
   );
 }

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';
@@ -90,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,
-  },
-});

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;

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

@@ -8,11 +8,11 @@ import {
   Share,
   Text,
   View,
-  StyleSheet,
 } from 'react-native';
 import { Button } from 'react-native-paper';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
+import styles from './styles';
 import jsonStory from '../../../utils/story.json';
 
 function htmlParser(htmlString: string) {
@@ -108,7 +108,7 @@ function StoryScreen() {
   }, []);
 
   return (
-    <SafeAreaView style={tempStyles.container}>
+    <SafeAreaView style={styles.container}>
       {isLoading ? (
         <ActivityIndicator />
       ) : (
@@ -117,23 +117,23 @@ function StoryScreen() {
           ref={scrollRef}
           showsVerticalScrollIndicator={false}
         >
-          <Image style={tempStyles.image} source={{ uri: image }} />
+          <Image style={styles.image} source={{ uri: image }} />
 
-          <Text style={tempStyles.title}>{title}</Text>
+          <Text style={styles.title}>{title}</Text>
 
-          <View style={tempStyles.author}>
-            <Image style={tempStyles.authorImage} source={{ uri: '' }} />
-            <Text style={tempStyles.authorText}>By {author}</Text>
+          <View style={styles.author}>
+            <Image style={styles.authorImage} source={{ uri: '' }} />
+            <Text style={styles.authorText}>By {author}</Text>
           </View>
 
           <View>
             <FlatList
-              style={tempStyles.genres}
+              style={styles.genres}
               horizontal
               data={genres}
               renderItem={({ item }) => (
-                <View style={tempStyles.genresBorder}>
-                  <Text style={tempStyles.genresText}>{item}</Text>
+                <View style={styles.genresBorder}>
+                  <Text style={styles.genresText}>{item}</Text>
                 </View>
               )}
             />
@@ -145,13 +145,13 @@ function StoryScreen() {
               onPress={onShare}
               style={{ width: 125, marginBottom: 16, borderRadius: 10 }}
             >
-              <Text style={tempStyles.shareButtonText}>Share Story</Text>
+              <Text style={styles.shareButtonText}>Share Story</Text>
             </Button>
           </View>
 
-          <Text style={tempStyles.heading}>{heading}</Text>
+          <Text style={styles.heading}>{heading}</Text>
 
-          <Text style={tempStyles.story}>{story}</Text>
+          <Text style={styles.story}>{story}</Text>
 
           <Button
             textColor="black"
@@ -160,16 +160,16 @@ function StoryScreen() {
             onPress={onShare}
             style={{ width: 125, marginBottom: 16, borderRadius: 10 }}
           >
-            <Text style={tempStyles.shareButtonText}>Share Story</Text>
+            <Text style={styles.shareButtonText}>Share Story</Text>
           </Button>
 
-          <Text style={tempStyles.authorProcess}>Author's Process</Text>
+          <Text style={styles.authorProcess}>Author's Process</Text>
 
-          <Text style={tempStyles.process}>{process}</Text>
+          <Text style={styles.process}>{process}</Text>
 
-          <View style={tempStyles.author}>
-            <Image style={tempStyles.authorImage} source={{ uri: '' }} />
-            <Text style={tempStyles.authorText}>By {author}</Text>
+          <View style={styles.author}>
+            <Image style={styles.authorImage} source={{ uri: '' }} />
+            <Text style={styles.authorText}>By {author}</Text>
           </View>
 
           <Button
@@ -178,7 +178,7 @@ function StoryScreen() {
             onPress={scrollUp}
             style={{ width: 125, marginBottom: 16, borderRadius: 10 }}
           >
-            <Text style={tempStyles.backToTopButtonText}>Back To Top</Text>
+            <Text style={styles.backToTopButtonText}>Back To Top</Text>
           </Button>
         </ScrollView>
       )}
@@ -187,118 +187,3 @@ function StoryScreen() {
 }
 
 export default StoryScreen;
-
-const tempStyles = 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',
-  },
-  heading: {
-    fontFamily: 'Avenir',
-    fontSize: 16,
-    fontWeight: '400',
-    textAlign: 'left',
-    color: 'black',
-    paddingBottom: 34,
-  },
-  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',
-  },
-});