Add header to PostThread view; update navigation to include stacking so that each tab maintains its own browsing history

1 files changed, 17 insertions, 2 deletions

diff --git a/src/view/screens/content/PostThread.tsx b/src/view/screens/content/PostThread.tsx
index 5b8fa951c..e990bcc1b 100644
--- a/src/view/screens/content/PostThread.tsx
+++ b/src/view/screens/content/PostThread.tsx
@@ -1,4 +1,6 @@
-import React from 'react'
+import React, {useLayoutEffect} from 'react'
+import {TouchableOpacity} from 'react-native'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {AdxUri} from '@adxp/mock-api'
 import {Shell} from '../../shell'
 import type {RootTabsScreenProps} from '../../routes/types'
@@ -16,8 +18,21 @@ export const PostThread = ({
   urip.recordKey = recordKey
   const uri = urip.toString()
 
+  useLayoutEffect(() => {
+    navigation.setOptions({
+      headerShown: true,
+      headerTitle: 'Thread',
+      headerLeft: () => (
+        <TouchableOpacity onPress={() => navigation.goBack()}>
+          <FontAwesomeIcon icon="arrow-left" />
+        </TouchableOpacity>
+      ),
+    })
+  }, [navigation])
+
   const onNavigateContent = (screen: string, props: Record<string, string>) => {
-    navigation.navigate(screen, props)
+    // @ts-ignore it's up to the callers to supply correct params -prf
+    navigation.push(screen, props)
   }
   return (
     <Shell>