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

src/view/screens/Home.tsx

@@ -5,15 +5,18 @@ import {Feed} from '../com/feed/Feed'
 import type {RootTabsScreenProps} from '../routes/types'
 import {useStores} from '../../state'
 
-export function Home({navigation}: RootTabsScreenProps<'Home'>) {
+export function Home({navigation}: RootTabsScreenProps<'HomeTab'>) {
   const store = useStores()
   useEffect(() => {
     console.log('Fetching home feed')
     store.homeFeed.setup()
   }, [store.homeFeed])
+
   const onNavigateContent = (screen: string, props: Record<string, string>) => {
+    // @ts-ignore it's up to the callers to supply correct params -prf
     navigation.navigate(screen, props)
   }
+
   return (
     <Shell>
       <View>

src/view/screens/Menu.tsx

@@ -3,7 +3,7 @@ import {Shell} from '../shell'
 import {ScrollView, Text, View} from 'react-native'
 import type {RootTabsScreenProps} from '../routes/types'
 
-export const Menu = (_props: RootTabsScreenProps<'Menu'>) => {
+export const Menu = (_props: RootTabsScreenProps<'MenuTab'>) => {
   return (
     <Shell>
       <ScrollView contentInsetAdjustmentBehavior="automatic">

src/view/screens/NotFound.tsx

@@ -8,7 +8,7 @@ export const NotFound = ({navigation}: RootTabsScreenProps<'NotFound'>) => {
     <Shell>
       <View style={{justifyContent: 'center', alignItems: 'center'}}>
         <Text style={{fontSize: 20, fontWeight: 'bold'}}>Page not found</Text>
-        <Button title="Home" onPress={() => navigation.navigate('Home')} />
+        <Button title="Home" onPress={() => navigation.navigate('HomeTab')} />
       </View>
     </Shell>
   )

src/view/screens/Notifications.tsx

@@ -3,7 +3,9 @@ import {Shell} from '../shell'
 import {Text, View} from 'react-native'
 import type {RootTabsScreenProps} from '../routes/types'
 
-export const Notifications = (_props: RootTabsScreenProps<'Notifications'>) => {
+export const Notifications = (
+  _props: RootTabsScreenProps<'NotificationsTab'>,
+) => {
   return (
     <Shell>
       <View style={{justifyContent: 'center', alignItems: 'center'}}>

src/view/screens/Search.tsx

@@ -3,7 +3,7 @@ import {Shell} from '../shell'
 import {Text, View} from 'react-native'
 import type {RootTabsScreenProps} from '../routes/types'
 
-export const Search = (_props: RootTabsScreenProps<'Search'>) => {
+export const Search = (_props: RootTabsScreenProps<'SearchTab'>) => {
   return (
     <Shell>
       <View style={{justifyContent: 'center', alignItems: 'center'}}>

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>