feat: Added a Notification head bar to present current notifications number

packages/legacy/core/App/components/views/HomeFooterView.tsx

@@ -37,7 +37,7 @@ const HomeFooterView: React.FC<HomeFooterViewProps> = ({ children }) => {
 
     imageContainer: {
       alignItems: 'center',
-      marginTop: 100,
+      marginTop: 60,
     },
   })
 

packages/legacy/core/App/components/views/HomeHeaderView.tsx

@@ -1,12 +1,44 @@
+import { useTheme } from '../../contexts/theme'
+import { useTranslation } from 'react-i18next'
 import React from 'react'
-import { View } from 'react-native'
+import { View, Text, StyleSheet } from 'react-native'
+import { NotificationReturnType } from '../../hooks/notifications'
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
 
-interface HomeHeaderViewProps {
+export interface HomeHeaderViewProps {
+  notifications: NotificationReturnType
+  showNotifications: boolean
   children?: any
 }
 
-const HomeHeaderView: React.FC<HomeHeaderViewProps> = ({ children }) => {
-  return <View>{children}</View>
+const HomeHeaderView: React.FC<HomeHeaderViewProps> = ({ notifications, showNotifications, children }: HomeHeaderViewProps) => {
+  const { t } = useTranslation()
+  const { ColorPallet, TextTheme } = useTheme()
+
+  const styles = StyleSheet.create({
+    noNotificationContainer: {
+      flex: 1,
+      flexDirection: "row",
+      alignContent: "space-between",
+      paddingHorizontal: 20,
+      paddingTop: 20,
+      paddingBottom: 0,
+      backgroundColor: ColorPallet.brand.secondaryBackground,
+    }
+  })
+  return notifications?.length > 0 ? (
+    <View style={styles.noNotificationContainer}>
+      <Text style={[TextTheme.label, { fontSize: 20, marginBottom: 6, textAlign: 'left' }]}>
+        {t('Home.Notifications')} ({notifications?.length})
+      </Text>
+      <Text style={{ position: 'absolute', right: 20, top: 20}}>
+        <Icon name={showNotifications ? 'chevron-up' : 'chevron-down'} size={30} />
+      </Text>
+      {children}
+    </View>
+  ) : (
+    <></>
+  )
 }
 
 export default HomeHeaderView

packages/legacy/core/App/container-api.ts

@@ -22,6 +22,7 @@ import { PINExplainerProps } from './screens/PINExplainer'
 import { CredentialListFooterProps } from './types/credential-list-footer'
 import { ContactListItemProps } from './components/listItems/ContactListItem'
 import { ContactCredentialListItemProps } from './components/listItems/ContactCredentialListItem'
+import { HomeHeaderViewProps } from './components/views/HomeHeaderView'
 import { InlineErrorConfig } from './types/error'
 
 export type FN_ONBOARDING_DONE = (
@@ -181,7 +182,7 @@ export type TokenMapping = {
   [TOKENS.COMPONENT_CRED_LIST_HEADER_RIGHT]: React.FC
   [TOKENS.COMPONENT_CRED_LIST_OPTIONS]: React.FC
   [TOKENS.COMPONENT_CRED_LIST_FOOTER]: React.FC<CredentialListFooterProps>
-  [TOKENS.COMPONENT_HOME_HEADER]: React.FC
+  [TOKENS.COMPONENT_HOME_HEADER]: React.FC<HomeHeaderViewProps>
   [TOKENS.COMPONENT_HOME_NOTIFICATIONS_EMPTY_LIST]: React.FC
   [TOKENS.COMPONENT_HOME_FOOTER]: React.FC
   [TOKENS.COMPONENT_CRED_EMPTY_LIST]: React.FC

packages/legacy/core/App/screens/Home.tsx

@@ -37,12 +37,13 @@ const Home: React.FC<HomeProps> = () => {
   const { ColorPallet } = useTheme()
   const [store, dispatch] = useStore()
   const { start } = useTour()
+  const [showNotifications] = useState(true)
   const [showTourPopup, setShowTourPopup] = useState(false)
   const screenIsFocused = useIsFocused()
 
   const styles = StyleSheet.create({
     flatlist: {
-      marginBottom: 35,
+      marginBottom: 20,
     },
   })
 
@@ -130,7 +131,15 @@ const Home: React.FC<HomeProps> = () => {
         scrollEnabled={notifications?.length > 0 ? true : false}
         decelerationRate="fast"
         ListEmptyComponent={NoNewUpdates}
-        ListHeaderComponent={() => <HomeHeaderView />}
+        ListHeaderComponent={() => {
+          const homeHeaderViewProps = {
+            notifications: notifications,
+            showNotifications: showNotifications,
+          }
+          return (
+            <HomeHeaderView {...homeHeaderViewProps} />
+          )
+        }}
         ListFooterComponent={() => <HomeFooterView />}
         data={notifications}
         keyExtractor={(_, i) => i.toString()}
@@ -139,11 +148,11 @@ const Home: React.FC<HomeProps> = () => {
             style={{
               paddingHorizontal: 20,
               paddingTop: index === 0 ? 20 : 0,
-              paddingBottom: index === notifications.length - 1 ? 20 : 10,
+              paddingBottom: !showNotifications ? 0 : index === notifications.length - 1 ? 20 : 10,
               backgroundColor: ColorPallet.brand.secondaryBackground,
             }}
           >
-            {DisplayListItemType(item)}
+            { showNotifications && DisplayListItemType(item) }
           </View>
         )}
       />

packages/legacy/core/__tests__/components/HomeHeaderView.test.tsx

@@ -5,7 +5,7 @@ import HomeHeaderView from '../../App/components/views/HomeHeaderView'
 
 describe('HomeHeaderView Component', () => {
   test('Renders correctly', async () => {
-    const tree = render(<HomeHeaderView />)
+    const tree = render(<HomeHeaderView {...{ notifications: [], showNotifications: true}} />)
 
     expect(tree).toMatchSnapshot()
   })

packages/legacy/core/__tests__/components/__snapshots__/HomeFooterView.test.tsx.snap

@@ -14,7 +14,7 @@ exports[`HomeFooterView Component Renders correctly with no notifications 1`] =
       style={
         Object {
           "alignItems": "center",
-          "marginTop": 100,
+          "marginTop": 60,
         }
       }
     >
@@ -108,7 +108,7 @@ exports[`HomeFooterView Component Renders correctly with notifications 1`] = `
       style={
         Object {
           "alignItems": "center",
-          "marginTop": 100,
+          "marginTop": 60,
         }
       }
     >

packages/legacy/core/__tests__/components/__snapshots__/HomeHeaderView.test.tsx.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`HomeHeaderView Component Renders correctly 1`] = `<View />`;
+exports[`HomeHeaderView Component Renders correctly 1`] = `null`;