Notifications Page Implementation

components/organisms/Sections/NotificationSection.js

@@ -1,18 +1,42 @@
-import { StyleSheet, Text, View } from 'react-native'
+import { SafeAreaView, StyleSheet, Text, View } from 'react-native'
 import React from 'react'
+import NotificationCard from '../Cards/NotificationCard'
+import { getDate } from '../../../utils/Constants/functions'
+import fonts from '../../../theme/fonts'
+import colors from '../../../theme/colors'
+import images from '../../../assets/images/images'
+
+const NotificationSection = ({ navigation }) => {
+
+  return (
+    <View >
+      <Text style={styles.timestampText}>{getDate("2023-06-16T11:57:52.458032Z")}</Text>
+      <View style={{paddingHorizontal: 8,gap: 8}}>
+        <NotificationCard
+          image={images.imageCard}
+          profileImage={images.horizontalCard}
+          headline={"semi has posted new politics news"}
+          tagline={"semi has posted new  politics news"}
+          timestamp={"2023-04-16T11:57:52.458032Z"}
+         />
+        <NotificationCard />
+        <NotificationCard />
+        <NotificationCard />
+      </View>
 
-const NotificationSection = props => {
-    const {
-        navigation
-    } = props
-  
-    return (
-    <View>
-      <Text>NotificationSection</Text>
     </View>
   )
 }
 
 export default NotificationSection
 
-const styles = StyleSheet.create({})
+const styles = StyleSheet.create({
+   timestampText:{
+    padding: 8,
+    fontFamily: fonts.type.light,
+    color: colors.grayShade_100
+   },
+   notificationContainer:{
+
+   }
+})

screens/NotificationsPage.js

@@ -1,9 +1,11 @@
-import { StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native'
+import { ScrollView, 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'
+import NotificationSection from '../components/organisms/Sections/NotificationSection'
+import { SafeAreaView } from 'react-native-safe-area-context'
 
 const NotificationsPage = props => {
     const {
@@ -11,14 +13,19 @@ const NotificationsPage = props => {
     } = props
     
     return (
-        <View>
+        <SafeAreaView>
             <NewscoutCenteredTitleHeader title={"Notifications"} backButtonShown onBackClick={() => navigation.goBack()}>
                 
                 <TouchableWithoutFeedback onPress={() => navigation.toggleDrawer()}>
                     <MaterialIcon name='list' color={colors.topColor} size={30} />
                 </TouchableWithoutFeedback>
             </NewscoutCenteredTitleHeader>
-        </View>
+            <ScrollView showsVerticalScrollIndicator>
+                <NotificationSection/>
+                <NotificationSection/>
+            </ScrollView>
+           
+        </SafeAreaView>
     )
 }