diff --git a/src/app/(tabs)/home/index.tsx b/src/app/(tabs)/home/index.tsx
index 4c26eed3..863470c9 100644
--- a/src/app/(tabs)/home/index.tsx
+++ b/src/app/(tabs)/home/index.tsx
@@ -72,11 +72,6 @@ function HomeScreen() {
{username ? `Welcome, ${username}` : 'Welcome!'}
- router.push('/settings')}>
-
-
-
-
{featuredStories.length > 0 && (
diff --git a/src/app/(tabs)/library/_layout.tsx b/src/app/(tabs)/library/_layout.tsx
index d021a461..27df290b 100644
--- a/src/app/(tabs)/library/_layout.tsx
+++ b/src/app/(tabs)/library/_layout.tsx
@@ -4,6 +4,8 @@ function StackLayout() {
return (
+
+
);
}
diff --git a/src/app/(tabs)/library/favoritesList/_layout.tsx b/src/app/(tabs)/library/favoritesList/_layout.tsx
new file mode 100644
index 00000000..d021a461
--- /dev/null
+++ b/src/app/(tabs)/library/favoritesList/_layout.tsx
@@ -0,0 +1,11 @@
+import { Stack } from 'expo-router';
+
+function StackLayout() {
+ return (
+
+
+
+ );
+}
+
+export default StackLayout;
diff --git a/src/app/(tabs)/library/favoritesList/index.tsx b/src/app/(tabs)/library/favoritesList/index.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/(tabs)/library/favoritesList/styles.ts b/src/app/(tabs)/library/favoritesList/styles.ts
new file mode 100644
index 00000000..ebaf5c77
--- /dev/null
+++ b/src/app/(tabs)/library/favoritesList/styles.ts
@@ -0,0 +1,5 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({});
+
+export default styles;
diff --git a/src/app/(tabs)/library/index.tsx b/src/app/(tabs)/library/index.tsx
index 8a05bef0..fc39cb2b 100644
--- a/src/app/(tabs)/library/index.tsx
+++ b/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 (
- Library
+
+
+
);
}
diff --git a/src/app/(tabs)/library/readingList/_layout.tsx b/src/app/(tabs)/library/readingList/_layout.tsx
new file mode 100644
index 00000000..d021a461
--- /dev/null
+++ b/src/app/(tabs)/library/readingList/_layout.tsx
@@ -0,0 +1,11 @@
+import { Stack } from 'expo-router';
+
+function StackLayout() {
+ return (
+
+
+
+ );
+}
+
+export default StackLayout;
diff --git a/src/app/(tabs)/library/readingList/index.tsx b/src/app/(tabs)/library/readingList/index.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/(tabs)/library/readingList/styles.ts b/src/app/(tabs)/library/readingList/styles.ts
new file mode 100644
index 00000000..ebaf5c77
--- /dev/null
+++ b/src/app/(tabs)/library/readingList/styles.ts
@@ -0,0 +1,5 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({});
+
+export default styles;
diff --git a/src/components/LibraryHeader/LibraryHeader.tsx b/src/components/LibraryHeader/LibraryHeader.tsx
new file mode 100644
index 00000000..66589e38
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+ {' '}
+ {user?.user_metadata.username}{' '}
+
+
+
+
+
+ router.push('/settings')}>
+
+
+
+
+
+
+
+
+
+ favorites
+
+
+
+ );
+}
diff --git a/src/components/LibraryHeader/styles.ts b/src/components/LibraryHeader/styles.ts
new file mode 100644
index 00000000..75c1321b
--- /dev/null
+++ b/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;