From 260ec92ab5795bca5c79c216364c79e02325aae4 Mon Sep 17 00:00:00 2001
From: dhruv <dhruv.agarwal2173@gmail.com>
Date: Sat, 5 Oct 2024 23:57:12 +0530
Subject: [PATCH 1/2] Added conditional to consider the case where both Icon
 and Text are provided, also added a css preset for the same

---
 app/components/Header.tsx | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/app/components/Header.tsx b/app/components/Header.tsx
index b018ebc..d2ca6d9 100644
--- a/app/components/Header.tsx
+++ b/app/components/Header.tsx
@@ -233,6 +233,27 @@ function HeaderAction(props: HeaderActionProps) {
 
   if (ActionComponent) return ActionComponent
 
+  if (content && icon) {
+    return (
+      <TouchableOpacity
+        style={[$actionContainer, { backgroundColor }]}
+        onPress={onPress}
+        disabled={!onPress}
+        activeOpacity={0.8}
+      >
+        <Icon
+          size={24}
+          icon={icon}
+          color={iconColor}
+          onPress={onPress}
+          containerStyle={[$actionIconContainer, { backgroundColor }]}
+          style={isRTL ? { transform: [{ rotate: "180deg" }] } : {}}
+        />
+        <Text weight="medium" size="md" text={content} style={$actionText} />
+      </TouchableOpacity>
+    )
+  }
+
   if (content) {
     return (
       <TouchableOpacity
@@ -277,6 +298,16 @@ const $title: TextStyle = {
   textAlign: "center",
 }
 
+const $actionContainer: ViewStyle = {
+  flexGrow: 0,
+  flexDirection: "row",
+  alignItems: "center",
+  justifyContent: "center",
+  height: "100%",
+  paddingHorizontal: spacing.md,
+  zIndex: 2,
+}
+
 const $actionTextContainer: ViewStyle = {
   flexGrow: 0,
   alignItems: "center",

From 7f29dd144f8a3e279f2c9326afa96971a4a536e8 Mon Sep 17 00:00:00 2001
From: dhruv <dhruv.agarwal2173@gmail.com>
Date: Sun, 6 Oct 2024 00:01:12 +0530
Subject: [PATCH 2/2] Uncommented the text prop for the action

---
 app/screens/ContentViewScreen.tsx | 2 +-
 app/screens/VideoPlayerScreen.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/screens/ContentViewScreen.tsx b/app/screens/ContentViewScreen.tsx
index 4025c9f..9614916 100644
--- a/app/screens/ContentViewScreen.tsx
+++ b/app/screens/ContentViewScreen.tsx
@@ -33,7 +33,7 @@ export const ContentViewScreen: FC<ContentViewScreenProps> = observer(function C
     <Screen style={$root} contentContainerStyle={$styles.flex1}>
       <Header
         onLeftPress={navigation.goBack}
-        // leftText="Back" // TODO: Check why is it not visible with the icon and the component has onPress handler already
+        leftText="Back"
         backgroundColor={colors.background.primary}
         leftIcon="caretLeft"
         leftIconColor={colors.content.secondary}
diff --git a/app/screens/VideoPlayerScreen.tsx b/app/screens/VideoPlayerScreen.tsx
index 4ee770b..ef8ac9d 100644
--- a/app/screens/VideoPlayerScreen.tsx
+++ b/app/screens/VideoPlayerScreen.tsx
@@ -35,7 +35,7 @@ export const VideoPlayerScreen: FC<VideoPlayerScreenProps> = observer(function V
     <Screen style={$root} contentContainerStyle={$styles.flex1}>
       <Header
         onLeftPress={goBack}
-        // leftText="Back" // TODO: Check why is it not visible with the icon and the component has onPress handler already
+        leftText="Back"
         backgroundColor={colors.background.primary}
         leftIcon="caretLeft"
         leftIconColor={colors.content.secondary}