Main Screen Navigator Setup

App.js

@@ -7,7 +7,7 @@
 
 import { NavigationContainer } from '@react-navigation/native';
 import React from 'react';
-
+import 'react-native-gesture-handler'
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import {
   SafeAreaView,
@@ -25,25 +25,27 @@ const AppStack = createNativeStackNavigator();
 
 const App = () => {
   return (
+
+
     <NavigationContainer>
       <AppStack.Navigator
         iniialRouteName="Home"
         headerShown={true}
       >
-        <AppStack.Screen 
+        <AppStack.Screen
           name='Login'
           component={LoginPage}
           options={{
-            headerShown:false
+            headerShown: false
           }}
         />
         <AppStack.Screen
           name='Home'
           component={HomePageNavigator}
-          options={{headerShown:false}}
+          options={{ headerShown: false }}
         />
 
-        
+
       </AppStack.Navigator>
       {/* <View style={styles.appContainer}>
         <Text>App</Text>

babel.config.js

@@ -1,3 +1,4 @@
 module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
+  plugins: ['react-native-reanimated/plugin']
 };

components/organisms/Headers/NewscoutHomeHeader.js

@@ -1,4 +1,4 @@
-import { StyleSheet, Text, View } from 'react-native'
+import { StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native'
 import React from 'react'
 import NewscoutLogo from '../../molecules/NewscoutLogo'
 import fonts from '../../../theme/fonts'
@@ -6,11 +6,13 @@ import MaterialIcon from "react-native-vector-icons/dist/MaterialIcons"
 import colors from '../../../theme/colors'
 import Header from '../../atoms/Header'
 
-const NewscoutHomeHeader = () => {
+const NewscoutHomeHeader = ({onPress}) => {
   return (
     <Header >
       <NewscoutLogo style={styles.headerLogo}/>
-      <MaterialIcon name='notifications-none' color={colors.tertiaryColor} size={30}/>
+      <TouchableWithoutFeedback onPress={onPress}>
+        <MaterialIcon name='notifications-none' color={colors.tertiaryColor} size={30}/>
+      </TouchableWithoutFeedback>
     </Header>
   )
 }

components/organisms/Sections/RecentPostsSection.js

@@ -12,7 +12,7 @@ const RecentPostsSection = () => {
       <SectionHeader label={"Recents Posts"}/>
       <View style={styles.recentPostsContainer}>
         <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-            {posts.map((item) => <VerticalNewsCard/>)}
+            {posts.map((item) => <VerticalNewsCard id={posts.indexOf(item)}/>)}
         </ScrollView>
       </View>  
     </View>

navigation/BookmarkNavigator.js

@@ -0,0 +1,36 @@
+import { View, Text , TouchableWithoutFeedback} from 'react-native'
+import React from 'react'
+import BookmarkPage from '../screens/BookmarkPage';
+import SidebarPage from '../screens/SidebarPage';
+import { createNativeStackNavigator } from "@react-navigation/native-stack"
+import NewscoutTitleHeader from '../components/organisms/Headers/NewscoutTitleHeader';
+import OctiIcon from 'react-native-vector-icons/Octicons'
+import colors from '../theme/colors';
+
+const Stack = createNativeStackNavigator();
+
+const BookmarkNavigator = ({ route, navigation }) => {
+    return (
+        <Stack.Navigator
+            initialRouteName="BookmarkLanding"
+
+        >
+            <Stack.Screen
+                name="BookmarkLanding"
+                options={(navigation) => ({
+                    header: () => <NewscoutTitleHeader title={"My Bookmarks"}>
+                        <TouchableWithoutFeedback onPress={() => {}}>
+                            <OctiIcon name='three-bars' size={24} color={colors.topColor} />
+                        </TouchableWithoutFeedback>
+                    </NewscoutTitleHeader>
+                })}
+                component={BookmarkPage} />
+            <Stack.Screen name="Sidebar" component={SidebarPage} />
+            {/* <Stack.Screen name="Notifications" component={Notifications} />
+        <Stack.Screen name="Profile" component={Profile} />
+        <Stack.Screen name="Settings" component={Settings} /> */}
+        </Stack.Navigator>
+    )
+}
+
+export default BookmarkNavigator

navigation/HomePageNavigator.js

@@ -1,18 +1,17 @@
 import React from 'react'
-import LandingPage from '../screens/LandingPage';
 import SearchPage from '../screens/SearchPage';
 import BookmarkPage from '../screens/BookmarkPage';
 import SettingsPage from '../screens/SettingsPage';
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"
-import OctiIcon from 'react-native-vector-icons/dist/Octicons';
 import IonIcon from 'react-native-vector-icons/dist/Ionicons';
-
 import colors from '../theme/colors';
 import fonts from '../theme/fonts';
 import NewscoutHomeHeader from '../components/organisms/Headers/NewscoutHomeHeader';
-import Header from '../components/atoms/Header';
 import NewscoutTitleHeader from '../components/organisms/Headers/NewscoutTitleHeader';
-import { TouchableOpacity, View, Text } from 'react-native';
+import BookmarkNavigator from './BookmarkNavigator';
+import LandingPageNavigator from './LandingPageNavigator';
+
+
 
 const Tab = createBottomTabNavigator();
 
@@ -55,10 +54,10 @@ const HomePageNavigator = ({ route, navigation }) => {
         >
             <Tab.Screen
                 name="Landing"
-                component={LandingPage}
-                options={({ navigation }) => ({
-                    header: () => <NewscoutHomeHeader />
-                })} />
+                component={LandingPageNavigator}
+                options={(navigation) => ({
+                    headerShown: false
+                })}/>
             <Tab.Screen
                 name="Search"
                 component={SearchPage}
@@ -67,11 +66,9 @@ const HomePageNavigator = ({ route, navigation }) => {
                 })} />
             <Tab.Screen
                 name="Bookmark"
-                component={BookmarkPage}
+                component={BookmarkNavigator}
                 options={(navigation) => ({
-                    header: () => <NewscoutTitleHeader title={"My Bookmarks"}>
-                        <OctiIcon name='three-bars' size={24} color={colors.topColor} />
-                    </NewscoutTitleHeader>
+                    headerShown: false
                 })}
             />
             <Tab.Screen

navigation/LandingPageNavigator.js

@@ -0,0 +1,41 @@
+import { View, Text } from 'react-native'
+import React from 'react'
+import { createDrawerNavigator } from '@react-navigation/drawer'
+import LandingPage from '../screens/LandingPage'
+import NewscoutHomeHeader from '../components/organisms/Headers/NewscoutHomeHeader'
+import metrics from '../theme/metrics'
+
+const Drawer = createDrawerNavigator()
+
+const SidebarContent = (props) => {
+    return (
+        <View><Text>SidebarContent</Text></View>
+    );
+}
+
+const LandingPageNavigator = () => {
+
+    const isLargeScreen = metrics.screenWidth >= 768;
+
+    return (
+        <Drawer.Navigator
+            initialRouteName='LandingPage'
+            screenOptions={{
+                drawerType: 'front',
+                drawerStyle: isLargeScreen ? null : { width: '100%' },
+                
+            }}
+            drawerContent={() => <SidebarContent/>}
+        >
+            <Drawer.Screen
+                name="LandingPage"
+                component={LandingPage}
+                options={({ navigation }) => ({
+                    headerShown: true,
+                header: () => <NewscoutHomeHeader onPress={() => navigation.toggleDrawer()} />
+                })} />
+        </Drawer.Navigator>
+    )
+}
+
+export default LandingPageNavigator

navigation/SearchPageNavigator.js

@@ -0,0 +1,13 @@
+import { StyleSheet, Text, View } from 'react-native'
+import React from 'react'
+
+const SearchPageNavigator = () => {
+  return (
+    <View>
+      <Text>SearchPageNavigator</Text>
+    </View>
+  )
+}
+
+export default SearchPageNavigator
+

package.json

@@ -11,12 +11,16 @@
   },
   "dependencies": {
     "@react-navigation/bottom-tabs": "^6.5.7",
+    "@react-navigation/drawer": "^6.6.3",
     "@react-navigation/native": "^6.1.6",
     "@react-navigation/native-stack": "^6.9.12",
     "react": "18.2.0",
-    "react-native": "0.71.10",
+    "react-native": "^0.72.1",
+    "react-native-gesture-handler": "^2.12.0",
+    "react-native-gradle-plugin": "^0.71.19",
     "react-native-linear-gradient": "^2.6.2",
     "react-native-paper": "^5.8.0",
+    "react-native-reanimated": "^3.3.0",
     "react-native-safe-area-context": "^4.5.3",
     "react-native-screens": "^3.20.0",
     "react-native-vector-icons": "^9.2.0"

screens/RecentPosts.js

@@ -0,0 +1,14 @@
+import { StyleSheet, Text, View } from 'react-native'
+import React from 'react'
+
+const RecentPosts = () => {
+  return (
+    <View>
+      <Text>RecentPosts</Text>
+    </View>
+  )
+}
+
+export default RecentPosts
+
+const styles = StyleSheet.create({})

screens/SidebarPage.js

@@ -0,0 +1,25 @@
+import { StyleSheet, Text, View } from 'react-native'
+import React from 'react'
+import { createDrawerNavigator } from '@react-navigation/drawer';
+
+const Drawer = createDrawerNavigator();
+
+const SidebarContent = (props) => {
+    return (
+        <View><Text>SidebarContent</Text></View>
+    )
+} 
+
+const SidebarPage = () => {
+    return (
+        <Drawer.Navigator
+            drawerContent={(props) => <SidebarContent {...props} />}
+        >
+           
+        </Drawer.Navigator>
+    )
+}
+
+export default SidebarPage
+
+const styles = StyleSheet.create({})