refactor: add HeaderBackButton component and integrate it into IterableInboxMessageDisplay

Author: lposen

src/inbox/components/HeaderBackButton.tsx

@@ -0,0 +1,39 @@
+import {
+  StyleSheet,
+  Text,
+  TouchableWithoutFeedback,
+  View,
+  type TouchableWithoutFeedbackProps,
+} from 'react-native';
+import { Icon } from 'react-native-vector-icons/Icon';
+import { ITERABLE_INBOX_COLORS } from '../constants/colors';
+
+const styles = StyleSheet.create({
+
+  returnButton: {
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+
+  returnButtonIcon: {
+    color: ITERABLE_INBOX_COLORS.BUTTON_PRIMARY_TEXT,
+    fontSize: 40,
+    paddingLeft: 0,
+  },
+
+  returnButtonText: {
+    color: ITERABLE_INBOX_COLORS.BUTTON_PRIMARY_TEXT,
+    fontSize: 20,
+  },
+});
+
+export const HeaderBackButton = (props: TouchableWithoutFeedbackProps) => {
+  return (
+    <TouchableWithoutFeedback {...props}>
+      <View style={styles.returnButton}>
+        <Icon name="chevron-back-outline" style={styles.returnButtonIcon} />
+        <Text style={styles.returnButtonText}>Inbox</Text>
+      </View>
+    </TouchableWithoutFeedback>
+  );
+};

src/inbox/components/IterableInboxMessageDisplay.tsx

@@ -23,9 +23,9 @@ import {
   IterableInAppCloseSource,
   IterableInAppLocation,
 } from '../../inApp';
-
 import { ITERABLE_INBOX_COLORS } from '../constants';
 import { type IterableInboxRowViewModel } from '../types';
+import { HeaderBackButton } from './HeaderBackButton';
 
 /**
  * Props for the IterableInboxMessageDisplay component.
@@ -222,6 +222,16 @@ export const IterableInboxMessageDisplay = ({
     <View style={styles.messageDisplayContainer}>
       <View style={styles.header}>
         <View style={styles.returnButtonContainer}>
+          <HeaderBackButton
+            onPress={() => {
+              returnToInbox();
+              Iterable.trackInAppClose(
+                rowViewModel.inAppMessage,
+                IterableInAppLocation.inbox,
+                IterableInAppCloseSource.back
+              );
+            }}
+          />
           <TouchableWithoutFeedback
             onPress={() => {
               returnToInbox();