initial commit

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

@@ -72,11 +72,6 @@ function HomeScreen() {
           <Text style={globalStyles.h2}>
             {username ? `Welcome, ${username}` : 'Welcome!'}
           </Text>
-          <Pressable onPress={() => router.push('/settings')}>
-            <View>
-              <Icon type="settings_gear" />
-            </View>
-          </Pressable>
         </View>
         {featuredStories.length > 0 && (
           <View>

src/app/(tabs)/library/_layout.tsx

@@ -4,6 +4,8 @@ function StackLayout() {
   return (
     <Stack>
       <Stack.Screen name="index" options={{ headerShown: false }} />
+      <Stack.Screen name="favoritesList" options={{ headerShown: false }} />
+      <Stack.Screen name="readingList" options={{ headerShown: false }} />
     </Stack>
   );
 }

src/app/(tabs)/library/favoritesList/_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)/library/favoritesList/styles.ts

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

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

@@ -1,12 +1,15 @@
-import { Text } from 'react-native';
+import { Text, View } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
 import globalStyles from '../../../styles/globalStyles';
+import LibraryHeader from '../../../components/LibraryHeader/LibraryHeader';
 
 function LibraryScreen() {
   return (
     <SafeAreaView style={globalStyles.container}>
-      <Text style={globalStyles.h1}>Library</Text>
+      <View style={{ flex: 1 }}>
+        <LibraryHeader />
+      </View>
     </SafeAreaView>
   );
 }

src/app/(tabs)/library/readingList/_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)/library/readingList/styles.ts

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

src/components/LibraryHeader/LibraryHeader.tsx

@@ -0,0 +1,47 @@
+import { View, Text, Image, Pressable } from 'react-native';
+import { router } from 'expo-router';
+import { useEffect, useState } from 'react';
+import Icon from '../../../assets/icons';
+
+import styles from './styles';
+import globalStyles from '../../styles/globalStyles';
+import colors from '../../styles/colors';
+import { useSession } from '../../utils/AuthContext';
+
+export default function LibraryHeader() {
+  const { user } = useSession();
+  const [username, setUsername] = useState('');
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.horizontal}>
+        <View style={styles.textContainer}>
+          <Image
+            style={styles.image}
+            source={require('../../../assets/logo.png')}
+          />
+          <View style={styles.username}>
+            <Text style={globalStyles.h1}>
+              {' '}
+              {user?.user_metadata.username}{' '}
+            </Text>
+          </View>
+        </View>
+
+        <View>
+          <Pressable onPress={() => router.push('/settings')}>
+            <View>
+              <Icon type="settings_gear" />
+            </View>
+          </Pressable>
+        </View>
+      </View>
+
+      <View style={{ flex: 1 }}>
+        <Pressable>
+          <Text>favorites</Text>
+        </Pressable>
+      </View>
+    </View>
+  );
+}

src/components/LibraryHeader/styles.ts

@@ -0,0 +1,31 @@
+import { StyleSheet } from 'react-native';
+import colors from '../../styles/colors';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'column',
+    marginLeft: 0,
+    paddingRight: 0,
+  },
+  image: {
+    height: 51,
+    width: 51,
+    borderRadius: 4,
+    marginBottom: 12,
+  },
+  textContainer: {
+    flexDirection: 'row',
+  },
+  username: {
+    paddingLeft: 12,
+  },
+  horizontal: {
+    flex: 1,
+    flexGrow: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+});
+
+export default styles;