Add consistent view headers

src/view/screens/Home.tsx

@@ -1,6 +1,7 @@
 import React, {useState, useEffect, useMemo} from 'react'
 import {View} from 'react-native'
 import {observer} from 'mobx-react-lite'
+import {ViewHeader} from '../com/util/ViewHeader'
 import {Feed} from '../com/posts/Feed'
 import {FAB} from '../com/util/FloatingActionButton'
 import {useStores} from '../../state'
@@ -53,6 +54,7 @@ export const Home = observer(function Home({
 
   return (
     <View style={s.flex1}>
+      <ViewHeader title="Bluesky" subtitle="Private Beta" />
       <Feed key="default" feed={defaultFeedView} scrollElRef={scrollElRef} />
       <FAB icon="pen-nib" onPress={onComposePress} />
     </View>

src/view/screens/Notifications.tsx

@@ -1,7 +1,7 @@
 import React, {useState, useEffect} from 'react'
-import {StyleSheet, Text, View} from 'react-native'
+import {View} from 'react-native'
+import {ViewHeader} from '../com/util/ViewHeader'
 import {Feed} from '../com/notifications/Feed'
-import {colors} from '../lib/styles'
 import {useStores} from '../../state'
 import {NotificationsViewModel} from '../../state/models/notifications-view'
 import {ScreenParams} from '../routes'
@@ -38,22 +38,8 @@ export const Notifications = ({visible}: ScreenParams) => {
 
   return (
     <View>
-      <View style={styles.header}>
-        <Text style={styles.title}>Notifications</Text>
-      </View>
+      <ViewHeader title="Notifications" />
       {notesView && <Feed view={notesView} />}
     </View>
   )
 }
-
-const styles = StyleSheet.create({
-  header: {
-    backgroundColor: colors.white,
-  },
-  title: {
-    fontSize: 30,
-    fontWeight: 'bold',
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-  },
-})

src/view/screens/PostLikedBy.tsx

@@ -1,8 +1,10 @@
 import React, {useEffect} from 'react'
-import {makeRecordUri} from '../lib/strings'
+import {View} from 'react-native'
+import {ViewHeader} from '../com/util/ViewHeader'
 import {PostLikedBy as PostLikedByComponent} from '../com/post-thread/PostLikedBy'
 import {ScreenParams} from '../routes'
 import {useStores} from '../../state'
+import {makeRecordUri} from '../lib/strings'
 
 export const PostLikedBy = ({visible, params}: ScreenParams) => {
   const store = useStores()
@@ -15,5 +17,10 @@ export const PostLikedBy = ({visible, params}: ScreenParams) => {
     }
   }, [store, visible])
 
-  return <PostLikedByComponent uri={uri} />
+  return (
+    <View>
+      <ViewHeader title="Liked by" />
+      <PostLikedByComponent uri={uri} />
+    </View>
+  )
 }

src/view/screens/PostRepostedBy.tsx

@@ -1,8 +1,10 @@
 import React, {useEffect} from 'react'
-import {makeRecordUri} from '../lib/strings'
+import {View} from 'react-native'
+import {ViewHeader} from '../com/util/ViewHeader'
 import {PostRepostedBy as PostRepostedByComponent} from '../com/post-thread/PostRepostedBy'
 import {ScreenParams} from '../routes'
 import {useStores} from '../../state'
+import {makeRecordUri} from '../lib/strings'
 
 export const PostRepostedBy = ({visible, params}: ScreenParams) => {
   const store = useStores()
@@ -15,5 +17,10 @@ export const PostRepostedBy = ({visible, params}: ScreenParams) => {
     }
   }, [store, visible])
 
-  return <PostRepostedByComponent uri={uri} />
+  return (
+    <View>
+      <ViewHeader title="Reposted by" />
+      <PostRepostedByComponent uri={uri} />
+    </View>
+  )
 }

src/view/screens/PostThread.tsx

@@ -1,5 +1,7 @@
 import React, {useEffect} from 'react'
+import {View} from 'react-native'
 import {makeRecordUri} from '../lib/strings'
+import {ViewHeader} from '../com/util/ViewHeader'
 import {PostThread as PostThreadComponent} from '../com/post-thread/PostThread'
 import {ScreenParams} from '../routes'
 import {useStores} from '../../state'
@@ -15,5 +17,10 @@ export const PostThread = ({visible, params}: ScreenParams) => {
     }
   }, [visible, store.nav, name])
 
-  return <PostThreadComponent uri={uri} />
+  return (
+    <View>
+      <ViewHeader title="Post" subtitle={`by ${name}`} />
+      <PostThreadComponent uri={uri} />
+    </View>
+  )
 }

src/view/screens/ProfileFollowers.tsx

@@ -1,5 +1,6 @@
 import React, {useEffect} from 'react'
-import {StyleSheet, Text, View} from 'react-native'
+import {View} from 'react-native'
+import {ViewHeader} from '../com/util/ViewHeader'
 import {ProfileFollowers as ProfileFollowersComponent} from '../com/profile/ProfileFollowers'
 import {ScreenParams} from '../routes'
 import {useStores} from '../../state'
@@ -16,16 +17,8 @@ export const ProfileFollowers = ({visible, params}: ScreenParams) => {
 
   return (
     <View>
-      <Text style={styles.title}>Followers of {name}</Text>
+      <ViewHeader title="Followers" subtitle={`of ${name}`} />
       <ProfileFollowersComponent name={name} />
     </View>
   )
 }
-
-const styles = StyleSheet.create({
-  title: {
-    fontSize: 21,
-    fontWeight: 'bold',
-    padding: 10,
-  },
-})

src/view/screens/ProfileFollows.tsx

@@ -1,5 +1,6 @@
 import React, {useEffect} from 'react'
-import {StyleSheet, Text, View} from 'react-native'
+import {View} from 'react-native'
+import {ViewHeader} from '../com/util/ViewHeader'
 import {ProfileFollows as ProfileFollowsComponent} from '../com/profile/ProfileFollows'
 import {ScreenParams} from '../routes'
 import {useStores} from '../../state'
@@ -16,16 +17,8 @@ export const ProfileFollows = ({visible, params}: ScreenParams) => {
 
   return (
     <View>
-      <Text style={styles.title}>Followed by {name}</Text>
+      <ViewHeader title="Followed" subtitle={`by ${name}`} />
       <ProfileFollowsComponent name={name} />
     </View>
   )
 }
-
-const styles = StyleSheet.create({
-  title: {
-    fontSize: 21,
-    fontWeight: 'bold',
-    padding: 10,
-  },
-})

src/view/screens/Settings.tsx

@@ -1,9 +1,10 @@
 import React, {useEffect} from 'react'
-import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native'
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
 import {observer} from 'mobx-react-lite'
 import {useStores} from '../../state'
 import {ScreenParams} from '../routes'
 import {s, colors} from '../lib/styles'
+import {ViewHeader} from '../com/util/ViewHeader'
 import {Link} from '../com/util/Link'
 import {UserAvatar} from '../com/util/UserAvatar'
 
@@ -22,28 +23,30 @@ export const Settings = observer(function Settings({visible}: ScreenParams) {
   }
 
   return (
-    <View style={[s.flex1, s.pl10, s.pr10]}>
-      <Text style={styles.title}>Settings</Text>
-      <View style={[s.flexRow]}>
-        <Text>Signed in as</Text>
-        <View style={s.flex1} />
-        <TouchableOpacity onPress={onPressSignout}>
-          <Text style={[s.blue3, s.bold]}>Sign out</Text>
-        </TouchableOpacity>
-      </View>
-      <Link href={`/profile/${store.me.name}`} title="Your profile">
-        <View style={styles.profile}>
-          <UserAvatar
-            size={40}
-            displayName={store.me.displayName}
-            name={store.me.name || ''}
-          />
-          <View style={[s.ml10]}>
-            <Text style={[s.f18]}>{store.me.displayName}</Text>
-            <Text style={[s.gray5]}>@{store.me.name}</Text>
-          </View>
+    <View style={[s.flex1]}>
+      <ViewHeader title="Settings" />
+      <View style={[s.mt10, s.pl10, s.pr10]}>
+        <View style={[s.flexRow]}>
+          <Text>Signed in as</Text>
+          <View style={s.flex1} />
+          <TouchableOpacity onPress={onPressSignout}>
+            <Text style={[s.blue3, s.bold]}>Sign out</Text>
+          </TouchableOpacity>
         </View>
-      </Link>
+        <Link href={`/profile/${store.me.name}`} title="Your profile">
+          <View style={styles.profile}>
+            <UserAvatar
+              size={40}
+              displayName={store.me.displayName}
+              name={store.me.name || ''}
+            />
+            <View style={[s.ml10]}>
+              <Text style={[s.f18]}>{store.me.displayName}</Text>
+              <Text style={[s.gray5]}>@{store.me.name}</Text>
+            </View>
+          </View>
+        </Link>
+      </View>
     </View>
   )
 })