2 files changed, 35 insertions, 0 deletions
diff --git a/src/lib/hooks/useSetTitle.ts b/src/lib/hooks/useSetTitle.ts
new file mode 100644
index 000000000..85ba44d29
--- /dev/null
+++ b/src/lib/hooks/useSetTitle.ts
@@ -0,0 +1,16 @@
+import {useEffect} from 'react'
+import {useNavigation} from '@react-navigation/native'
+
+import {NavigationProp} from 'lib/routes/types'
+import {bskyTitle} from 'lib/strings/headings'
+import {useUnreadCountLabel} from './useUnreadCountLabel'
+
+export function useSetTitle(title?: string) {
+  const navigation = useNavigation<NavigationProp>()
+  const unreadCountLabel = useUnreadCountLabel()
+  useEffect(() => {
+    if (title) {
+      navigation.setOptions({title: bskyTitle(title, unreadCountLabel)})
+    }
+  }, [title, navigation, unreadCountLabel])
+}
diff --git a/src/lib/hooks/useUnreadCountLabel.ts b/src/lib/hooks/useUnreadCountLabel.ts
new file mode 100644
index 000000000..e2bf77885
--- /dev/null
+++ b/src/lib/hooks/useUnreadCountLabel.ts
@@ -0,0 +1,19 @@
+import {useEffect, useReducer} from 'react'
+import {DeviceEventEmitter} from 'react-native'
+import {useStores} from 'state/index'
+
+export function useUnreadCountLabel() {
+  // HACK: We don't have anything like Redux selectors,
+  // and we don't want to use <RootStoreContext.Consumer />
+  // to react to the whole store
+  const [, forceUpdate] = useReducer(x => x + 1, 0)
+  useEffect(() => {
+    const subscription = DeviceEventEmitter.addListener(
+      'unread-notifications',
+      forceUpdate,
+    )
+    return () => subscription?.remove()
+  }, [forceUpdate])
+
+  return useStores().me.notifications.unreadCountLabel
+}