Initial try out dynamic following

src/components/Header/Center.tsx

@@ -3,27 +3,30 @@ import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
 
 export interface Props {
-  content: string
+  content: React.ReactNode | string
   inverted?: boolean
+  onPress?: () => void
 }
 
 // Used for Android mostly
-const HeaderCenter = React.memo(
-  ({ content, inverted = false }: Props) => {
-    const { colors } = useTheme()
+const HeaderCenter: React.FC<Props> = ({
+  content,
+  inverted = false,
+  onPress
+}) => {
+  const { colors } = useTheme()
 
-    return (
-      <CustomText
-        style={{
-          fontSize: 18,
-          color: inverted ? colors.primaryOverlay : colors.primaryDefault
-        }}
-        fontWeight='Bold'
-        children={content}
-      />
-    )
-  },
-  (prev, next) => prev.content === next.content
-)
+  return (
+    <CustomText
+      style={{
+        fontSize: 18,
+        color: inverted ? colors.primaryOverlay : colors.primaryDefault
+      }}
+      fontWeight='Bold'
+      children={content}
+      {...(onPress && { onPress })}
+    />
+  )
+}
 
 export default HeaderCenter