Add desktop shell

src/screens/Home.tsx

@@ -1,20 +1,21 @@
 import React from 'react'
-import {Text, Button, View, SafeAreaView} from 'react-native'
-import type {PrimaryTabScreenProps} from '../routes/types'
+import {Text, Button, View} from 'react-native'
+import {Shell} from '../platform/shell'
+import type {RootTabsScreenProps} from '../routes/types'
 import {useStores} from '../state'
 
-export function Home({navigation}: PrimaryTabScreenProps<'Home'>) {
+export function Home({navigation}: RootTabsScreenProps<'Home'>) {
   const store = useStores()
   return (
-    <SafeAreaView style={{flex: 1}}>
-      <View style={{flex: 1}}>
-        <Text>Hello world</Text>
+    <Shell>
+      <View style={{alignItems: 'center'}}>
+        <Text style={{fontSize: 20, fontWeight: 'bold'}}>Home</Text>
         <Button
           title="Go to Jane's profile"
           onPress={() => navigation.navigate('Profile', {name: 'Jane'})}
         />
         <Button title="Logout" onPress={() => store.session.setAuthed(false)} />
       </View>
-    </SafeAreaView>
+    </Shell>
   )
 }

src/screens/Login.tsx

@@ -1,17 +1,18 @@
 import React from 'react'
-import {Text, Button, View, SafeAreaView} from 'react-native'
-import type {RootStackScreenProps} from '../routes/types'
+import {Text, Button, View} from 'react-native'
+import {Shell} from '../platform/shell'
+import type {RootTabsScreenProps} from '../routes/types'
 import {useStores} from '../state'
 
-export function Login({navigation}: RootStackScreenProps<'Login'>) {
+export function Login({navigation}: RootTabsScreenProps<'Login'>) {
   const store = useStores()
   return (
-    <SafeAreaView style={{flex: 1}}>
-      <View style={{flex: 1}}>
-        <Text>Welcome! Time to sign in</Text>
+    <Shell>
+      <View style={{justifyContent: 'center', alignItems: 'center'}}>
+        <Text style={{fontSize: 20, fontWeight: 'bold'}}>Sign In</Text>
         <Button title="Login" onPress={() => store.session.setAuthed(true)} />
         <Button title="Sign Up" onPress={() => navigation.navigate('Signup')} />
       </View>
-    </SafeAreaView>
+    </Shell>
   )
 }

src/screens/Menu.tsx

@@ -1,19 +1,16 @@
 import React from 'react'
-import {SafeAreaView, ScrollView, Text, Button, View} from 'react-native'
-import type {PrimaryTabScreenProps} from '../routes/types'
+import {Shell} from '../platform/shell'
+import {ScrollView, Text, View} from 'react-native'
+import type {RootTabsScreenProps} from '../routes/types'
 
-export const Menu = ({navigation}: PrimaryTabScreenProps<'Menu'>) => {
+export const Menu = (_props: RootTabsScreenProps<'Menu'>) => {
   return (
-    <SafeAreaView>
+    <Shell>
       <ScrollView contentInsetAdjustmentBehavior="automatic">
-        <View>
-          <Text>Hello world</Text>
-          <Button
-            title="Go to Jane's profile"
-            onPress={() => navigation.navigate('Profile', {name: 'Jane'})}
-          />
+        <View style={{justifyContent: 'center', alignItems: 'center'}}>
+          <Text style={{fontSize: 20, fontWeight: 'bold'}}>Menu</Text>
         </View>
       </ScrollView>
-    </SafeAreaView>
+    </Shell>
   )
 }

src/screens/NotFound.tsx

@@ -1,27 +1,15 @@
 import React from 'react'
-import {
-  SafeAreaView,
-  ScrollView,
-  StatusBar,
-  Text,
-  Button,
-  useColorScheme,
-  View,
-} from 'react-native'
-import type {RootStackScreenProps} from '../routes/types'
-
-export const NotFound = ({navigation}: RootStackScreenProps<'NotFound'>) => {
-  const isDarkMode = useColorScheme() === 'dark'
+import {Shell} from '../platform/shell'
+import {Text, Button, View} from 'react-native'
+import type {RootTabsScreenProps} from '../routes/types'
 
+export const NotFound = ({navigation}: RootTabsScreenProps<'NotFound'>) => {
   return (
-    <SafeAreaView>
-      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
-      <ScrollView contentInsetAdjustmentBehavior="automatic">
-        <View>
-          <Text>Page not found</Text>
-          <Button title="Home" onPress={() => navigation.navigate('Primary')} />
-        </View>
-      </ScrollView>
-    </SafeAreaView>
+    <Shell>
+      <View style={{justifyContent: 'center', alignItems: 'center'}}>
+        <Text style={{fontSize: 20, fontWeight: 'bold'}}>Page not found</Text>
+        <Button title="Home" onPress={() => navigation.navigate('Home')} />
+      </View>
+    </Shell>
   )
 }

src/screens/Notifications.tsx

@@ -1,21 +1,14 @@
 import React from 'react'
-import {SafeAreaView, ScrollView, Text, Button, View} from 'react-native'
-import type {PrimaryTabScreenProps} from '../routes/types'
+import {Shell} from '../platform/shell'
+import {Text, View} from 'react-native'
+import type {RootTabsScreenProps} from '../routes/types'
 
-export const Notifications = ({
-  navigation,
-}: PrimaryTabScreenProps<'Notifications'>) => {
+export const Notifications = (_props: RootTabsScreenProps<'Notifications'>) => {
   return (
-    <SafeAreaView>
-      <ScrollView contentInsetAdjustmentBehavior="automatic">
-        <View>
-          <Text>Hello world</Text>
-          <Button
-            title="Go to Jane's profile"
-            onPress={() => navigation.navigate('Profile', {name: 'Jane'})}
-          />
-        </View>
-      </ScrollView>
-    </SafeAreaView>
+    <Shell>
+      <View style={{justifyContent: 'center', alignItems: 'center'}}>
+        <Text style={{fontSize: 20, fontWeight: 'bold'}}>Notifications</Text>
+      </View>
+    </Shell>
   )
 }

src/screens/Profile.tsx

@@ -1,7 +1,16 @@
 import React from 'react'
-import {Text} from 'react-native'
-import type {RootStackScreenProps} from '../routes/types'
+import {Shell} from '../platform/shell'
+import {View, Text} from 'react-native'
+import type {RootTabsScreenProps} from '../routes/types'
 
-export const Profile = ({route}: RootStackScreenProps<'Profile'>) => {
-  return <Text>This is {route.params.name}'s profile</Text>
+export const Profile = ({route}: RootTabsScreenProps<'Profile'>) => {
+  return (
+    <Shell>
+      <View style={{justifyContent: 'center', alignItems: 'center'}}>
+        <Text style={{fontSize: 20, fontWeight: 'bold'}}>
+          {route.params?.name}'s profile
+        </Text>
+      </View>
+    </Shell>
+  )
 }

src/screens/Search.tsx

@@ -1,19 +1,14 @@
 import React from 'react'
-import {SafeAreaView, ScrollView, Text, Button, View} from 'react-native'
-import type {PrimaryTabScreenProps} from '../routes/types'
+import {Shell} from '../platform/shell'
+import {Text, View} from 'react-native'
+import type {RootTabsScreenProps} from '../routes/types'
 
-export const Search = ({navigation}: PrimaryTabScreenProps<'Search'>) => {
+export const Search = (_props: RootTabsScreenProps<'Search'>) => {
   return (
-    <SafeAreaView>
-      <ScrollView contentInsetAdjustmentBehavior="automatic">
-        <View>
-          <Text>Hello world</Text>
-          <Button
-            title="Go to Jane's profile"
-            onPress={() => navigation.navigate('Profile', {name: 'Jane'})}
-          />
-        </View>
-      </ScrollView>
-    </SafeAreaView>
+    <Shell>
+      <View style={{justifyContent: 'center', alignItems: 'center'}}>
+        <Text style={{fontSize: 20, fontWeight: 'bold'}}>Search</Text>
+      </View>
+    </Shell>
   )
 }

src/screens/Signup.tsx

@@ -1,14 +1,15 @@
 import React from 'react'
-import {Text, Button, View, SafeAreaView} from 'react-native'
-import type {RootStackScreenProps} from '../routes/types'
+import {Shell} from '../platform/shell'
+import {Text, Button, View} from 'react-native'
+import type {RootTabsScreenProps} from '../routes/types'
 import {useStores} from '../state'
 
-export function Signup({navigation}: RootStackScreenProps<'Signup'>) {
+export function Signup({navigation}: RootTabsScreenProps<'Signup'>) {
   const store = useStores()
   return (
-    <SafeAreaView style={{flex: 1}}>
-      <View style={{flex: 1}}>
-        <Text>Let's create your account</Text>
+    <Shell>
+      <View style={{justifyContent: 'center', alignItems: 'center'}}>
+        <Text style={{fontSize: 20, fontWeight: 'bold'}}>Create Account</Text>
         <Button
           title="Create new account"
           onPress={() => store.session.setAuthed(true)}
@@ -18,6 +19,6 @@ export function Signup({navigation}: RootStackScreenProps<'Signup'>) {
           onPress={() => navigation.navigate('Login')}
         />
       </View>
-    </SafeAreaView>
+    </Shell>
   )
 }