Notification Page Initialization

navigation/LandingPageNavigator.js

@@ -9,6 +9,7 @@ import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
 import MaterialIcon from "react-native-vector-icons/dist/MaterialIcons";
 import colors from '../theme/colors';
 import NewsDetailPage from '../screens/NewsDetailPage';
+import NotificationsPage from '../screens/NotificationsPage';
 
 
 const Drawer = createDrawerNavigator();
@@ -38,7 +39,7 @@ const LandingPageNavigator = () => {
                     header: () => (
                         <NewscoutHomeHeader>
                             <View style={{alignItems:'center',flexDirection: 'row',gap: 16}}>
-                                <TouchableWithoutFeedback onPress={null}>
+                                <TouchableWithoutFeedback onPress={() => navigation.navigate('Notifications')}>
                                     <MaterialIcon name='notifications-none' color={colors.tertiaryColor} size={30} />
                                 </TouchableWithoutFeedback>
                                 <TouchableWithoutFeedback onPress={() => navigation.toggleDrawer()}>
@@ -56,6 +57,13 @@ const LandingPageNavigator = () => {
                     headerShown: false
                 })}
             />
+            <Drawer.Screen
+                name="Notifications"
+                component={NotificationsPage}
+                options={() =>({
+                    headerShown: false
+                })}
+            />
         </Drawer.Navigator>
     );
 };

screens/NotificationsPage.js

@@ -0,0 +1,33 @@
+import { StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native'
+import React from 'react'
+import NewscoutCenteredTitleHeader from '../components/organisms/Headers/NewscoutCenteredTitleHeader'
+import MaterialIcon from 'react-native-vector-icons/MaterialIcons'
+import colors from '../theme/colors'
+import fonts from '../theme/fonts'
+
+const NotificationsPage = props => {
+    const {
+        navigation
+    } = props
+    
+    return (
+        <View>
+            <NewscoutCenteredTitleHeader title={"Notifications"} backButtonShown onBackClick={() => navigation.goBack()}>
+                
+                <TouchableWithoutFeedback onPress={() => navigation.toggleDrawer()}>
+                    <MaterialIcon name='list' color={colors.topColor} size={30} />
+                </TouchableWithoutFeedback>
+            </NewscoutCenteredTitleHeader>
+        </View>
+    )
+}
+
+export default NotificationsPage
+
+const styles = StyleSheet.create({
+    headerTitle: {
+        fontFamily: fonts.type.semibold,
+        fontSize: fonts.getSize(16),
+        color: colors.black,
+    },
+})