Resolve all remaining lint issues (#88)

* Rework 'navIdx' variables from number arrays to strings to avoid equality-check failures in react hooks

* Resolve all remaining lint issues

* Fix tests

* Use node v18 in gh action test

src/view/screens/Contacts.tsx

@@ -17,7 +17,7 @@ export const Contacts = ({navIdx, visible}: ScreenParams) => {
     if (visible) {
       store.nav.setTitle(navIdx, 'Contacts')
     }
-  }, [store, visible])
+  }, [store, visible, navIdx])
 
   const [searchText, onChangeSearchText] = useState('')
   const inputRef = useRef<TextInput | null>(null)

src/view/screens/Debug.tsx

@@ -4,6 +4,7 @@ import {ViewHeader} from '../com/util/ViewHeader'
 import {ThemeProvider} from '../lib/ThemeContext'
 import {PaletteColorName} from '../lib/ThemeContext'
 import {usePalette} from '../lib/hooks/usePalette'
+import {s} from '../lib/styles'
 
 import {Text} from '../com/util/text/Text'
 import {ViewSelector} from '../com/util/ViewSelector'
@@ -48,7 +49,7 @@ function DebugInner({
   const renderItem = item => {
     return (
       <View>
-        <View style={{paddingTop: 10, paddingHorizontal: 10}}>
+        <View style={[s.pt10, s.pl10, s.pr10]}>
           <ToggleButton
             type="default-light"
             onPress={onToggleColorScheme}
@@ -70,7 +71,7 @@ function DebugInner({
   const items = [{currentView}]
 
   return (
-    <View style={[{flex: 1}, pal.view]}>
+    <View style={[s.h100pct, pal.view]}>
       <ViewHeader title="Debug panel" />
       <ViewSelector
         swipeEnabled
@@ -86,7 +87,7 @@ function DebugInner({
 function Heading({label}: {label: string}) {
   const pal = usePalette('default')
   return (
-    <View style={{paddingTop: 10, paddingBottom: 5}}>
+    <View style={[s.pt10, s.pb5]}>
       <Text type="title-lg" style={pal.text}>
         {label}
       </Text>
@@ -96,7 +97,7 @@ function Heading({label}: {label: string}) {
 
 function BaseView() {
   return (
-    <View style={{paddingHorizontal: 10}}>
+    <View style={[s.pl10, s.pr10]}>
       <Heading label="Typography" />
       <TypographyView />
       <Heading label="Palettes" />
@@ -109,14 +110,14 @@ function BaseView() {
       <EmptyStateView />
       <Heading label="Loading placeholders" />
       <LoadingPlaceholderView />
-      <View style={{height: 200}} />
+      <View style={s.footerSpacer} />
     </View>
   )
 }
 
 function ControlsView() {
   return (
-    <ScrollView style={{paddingHorizontal: 10}}>
+    <ScrollView style={[s.pl10, s.pr10]}>
       <Heading label="Buttons" />
       <ButtonsView />
       <Heading label="Dropdown Buttons" />
@@ -125,15 +126,15 @@ function ControlsView() {
       <ToggleButtonsView />
       <Heading label="Radio Buttons" />
       <RadioButtonsView />
-      <View style={{height: 200}} />
+      <View style={s.footerSpacer} />
     </ScrollView>
   )
 }
 
 function ErrorView() {
   return (
-    <View style={{padding: 10}}>
-      <View style={{marginBottom: 5}}>
+    <View style={s.p10}>
+      <View style={s.mb5}>
         <ErrorScreen
           title="Error screen"
           message="A major error occurred that led the entire screen to fail"
@@ -141,22 +142,22 @@ function ErrorView() {
           onPressTryAgain={() => {}}
         />
       </View>
-      <View style={{marginBottom: 5}}>
+      <View style={s.mb5}>
         <ErrorMessage message="This is an error that occurred while things were being done" />
       </View>
-      <View style={{marginBottom: 5}}>
+      <View style={s.mb5}>
         <ErrorMessage
           message="This is an error that occurred while things were being done"
           numberOfLines={1}
         />
       </View>
-      <View style={{marginBottom: 5}}>
+      <View style={s.mb5}>
         <ErrorMessage
           message="This is an error that occurred while things were being done"
           onPressTryAgain={() => {}}
         />
       </View>
-      <View style={{marginBottom: 5}}>
+      <View style={s.mb5}>
         <ErrorMessage
           message="This is an error that occurred while things were being done"
           onPressTryAgain={() => {}}
@@ -171,16 +172,7 @@ function PaletteView({palette}: {palette: PaletteColorName}) {
   const defaultPal = usePalette('default')
   const pal = usePalette(palette)
   return (
-    <View
-      style={[
-        pal.view,
-        pal.border,
-        {
-          borderWidth: 1,
-          padding: 10,
-          marginBottom: 5,
-        },
-      ]}>
+    <View style={[pal.view, pal.border, s.p10, s.mb5, s.border1]}>
       <Text style={[pal.text]}>{palette} colors</Text>
       <Text style={[pal.textLight]}>Light text</Text>
       <Text style={[pal.link]}>Link text</Text>
@@ -197,21 +189,6 @@ function TypographyView() {
   const pal = usePalette('default')
   return (
     <View style={[pal.view]}>
-      <Text type="xxl-thin" style={[pal.text]}>
-        'xxl-thin' lorem ipsum dolor
-      </Text>
-      <Text type="xxl" style={[pal.text]}>
-        'xxl' lorem ipsum dolor
-      </Text>
-      <Text type="xxl-medium" style={[pal.text]}>
-        'xxl-medium' lorem ipsum dolor
-      </Text>
-      <Text type="xxl-bold" style={[pal.text]}>
-        'xxl-bold' lorem ipsum dolor
-      </Text>
-      <Text type="xxl-heavy" style={[pal.text]}>
-        'xxl-heavy' lorem ipsum dolor
-      </Text>
       <Text type="xl-thin" style={[pal.text]}>
         'xl-thin' lorem ipsum dolor
       </Text>
@@ -300,9 +277,6 @@ function TypographyView() {
       <Text type="button" style={[pal.text]}>
         Button
       </Text>
-      <Text type="overline" style={[pal.text]}>
-        Overline
-      </Text>
     </View>
   )
 }
@@ -325,16 +299,12 @@ function ButtonsView() {
   const buttonStyles = {marginRight: 5}
   return (
     <View style={[defaultPal.view]}>
-      <View
-        style={{
-          flexDirection: 'row',
-          marginBottom: 5,
-        }}>
+      <View style={[s.flexRow, s.mb5]}>
         <Button type="primary" label="Primary solid" style={buttonStyles} />
         <Button type="secondary" label="Secondary solid" style={buttonStyles} />
         <Button type="inverted" label="Inverted solid" style={buttonStyles} />
       </View>
-      <View style={{flexDirection: 'row'}}>
+      <View style={s.flexRow}>
         <Button
           type="primary-outline"
           label="Primary outline"
@@ -346,7 +316,7 @@ function ButtonsView() {
           style={buttonStyles}
         />
       </View>
-      <View style={{flexDirection: 'row'}}>
+      <View style={s.flexRow}>
         <Button
           type="primary-light"
           label="Primary light"
@@ -358,7 +328,7 @@ function ButtonsView() {
           style={buttonStyles}
         />
       </View>
-      <View style={{flexDirection: 'row'}}>
+      <View style={s.flexRow}>
         <Button
           type="default-light"
           label="Default light"
@@ -390,10 +360,7 @@ function DropdownButtonsView() {
   const defaultPal = usePalette('default')
   return (
     <View style={[defaultPal.view]}>
-      <View
-        style={{
-          marginBottom: 5,
-        }}>
+      <View style={s.mb5}>
         <DropdownButton
           type="primary"
           items={DROPDOWN_ITEMS}
@@ -401,10 +368,7 @@ function DropdownButtonsView() {
           label="Primary button"
         />
       </View>
-      <View
-        style={{
-          marginBottom: 5,
-        }}>
+      <View style={s.mb5}>
         <DropdownButton type="bare" items={DROPDOWN_ITEMS} menuWidth={200}>
           <Text>Bare</Text>
         </DropdownButton>
@@ -415,7 +379,7 @@ function DropdownButtonsView() {
 
 function ToggleButtonsView() {
   const defaultPal = usePalette('default')
-  const buttonStyles = {marginBottom: 5}
+  const buttonStyles = s.mb5
   const [isSelected, setIsSelected] = React.useState(false)
   const onToggle = () => setIsSelected(!isSelected)
   return (

src/view/screens/Home.tsx

@@ -83,14 +83,14 @@ export const Home = observer(function Home({
   }
 
   return (
-    <View style={s.flex1}>
+    <View style={s.h100pct}>
       <ViewHeader title="Bluesky" subtitle="Private Beta" canGoBack={false} />
       <Feed
         testID="homeFeed"
         key="default"
         feed={store.me.mainFeed}
         scrollElRef={scrollElRef}
-        style={{flex: 1}}
+        style={s.h100pct}
         onPressCompose={onPressCompose}
         onPressTryAgain={onPressTryAgain}
         onScroll={onMainScroll}
@@ -99,9 +99,9 @@ export const Home = observer(function Home({
         <TouchableOpacity
           style={[
             styles.loadLatest,
-            store.shell.minimalShellMode
-              ? {bottom: 35}
-              : {bottom: 60 + clamp(safeAreaInsets.bottom, 15, 30)},
+            !store.shell.minimalShellMode && {
+              bottom: 60 + clamp(safeAreaInsets.bottom, 15, 30),
+            },
           ]}
           onPress={onPressLoadLatest}
           hitSlop={HITSLOP}>
@@ -125,6 +125,7 @@ const styles = StyleSheet.create({
   loadLatest: {
     position: 'absolute',
     left: 20,
+    bottom: 35,
     shadowColor: '#000',
     shadowOpacity: 0.3,
     shadowOffset: {width: 0, height: 1},

src/view/screens/Log.tsx

@@ -21,7 +21,7 @@ export const Log = observer(function Log({navIdx, visible}: ScreenParams) {
     }
     store.shell.setMinimalShellMode(false)
     store.nav.setTitle(navIdx, 'Log')
-  }, [visible, store])
+  }, [visible, store, navIdx])
 
   const toggler = (id: string) => () => {
     if (expanded.includes(id)) {
@@ -52,7 +52,7 @@ export const Log = observer(function Log({navIdx, visible}: ScreenParams) {
                   <Text type="sm" style={[styles.summary, pal.text]}>
                     {entry.summary}
                   </Text>
-                  {!!entry.details ? (
+                  {entry.details ? (
                     <FontAwesomeIcon
                       icon={
                         expanded.includes(entry.id) ? 'angle-up' : 'angle-down'

src/view/screens/Login.tsx

@@ -18,9 +18,9 @@ import {s, colors} from '../lib/styles'
 import {usePalette} from '../lib/hooks/usePalette'
 
 enum ScreenState {
-  SigninOrCreateAccount,
-  Signin,
-  CreateAccount,
+  S_SigninOrCreateAccount,
+  S_Signin,
+  S_CreateAccount,
 }
 
 const SigninOrCreateAccount = ({
@@ -78,58 +78,56 @@ const SigninOrCreateAccount = ({
   )
 }
 
-export const Login = observer(
-  (/*{navigation}: RootTabsScreenProps<'Login'>*/) => {
-    const pal = usePalette('default')
-    const [screenState, setScreenState] = useState<ScreenState>(
-      ScreenState.SigninOrCreateAccount,
-    )
-
-    if (screenState === ScreenState.SigninOrCreateAccount) {
-      return (
-        <LinearGradient
-          colors={['#007CFF', '#00BCFF']}
-          start={{x: 0, y: 0.8}}
-          end={{x: 0, y: 1}}
-          style={styles.container}>
-          <SafeAreaView testID="noSessionView" style={styles.container}>
-            <ErrorBoundary>
-              <SigninOrCreateAccount
-                onPressSignin={() => setScreenState(ScreenState.Signin)}
-                onPressCreateAccount={() =>
-                  setScreenState(ScreenState.CreateAccount)
-                }
-              />
-            </ErrorBoundary>
-          </SafeAreaView>
-        </LinearGradient>
-      )
-    }
+export const Login = observer(() => {
+  const pal = usePalette('default')
+  const [screenState, setScreenState] = useState<ScreenState>(
+    ScreenState.S_SigninOrCreateAccount,
+  )
 
+  if (screenState === ScreenState.S_SigninOrCreateAccount) {
     return (
-      <View style={[styles.container, pal.view]}>
+      <LinearGradient
+        colors={['#007CFF', '#00BCFF']}
+        start={{x: 0, y: 0.8}}
+        end={{x: 0, y: 1}}
+        style={styles.container}>
         <SafeAreaView testID="noSessionView" style={styles.container}>
           <ErrorBoundary>
-            {screenState === ScreenState.Signin ? (
-              <Signin
-                onPressBack={() =>
-                  setScreenState(ScreenState.SigninOrCreateAccount)
-                }
-              />
-            ) : undefined}
-            {screenState === ScreenState.CreateAccount ? (
-              <CreateAccount
-                onPressBack={() =>
-                  setScreenState(ScreenState.SigninOrCreateAccount)
-                }
-              />
-            ) : undefined}
+            <SigninOrCreateAccount
+              onPressSignin={() => setScreenState(ScreenState.S_Signin)}
+              onPressCreateAccount={() =>
+                setScreenState(ScreenState.S_CreateAccount)
+              }
+            />
           </ErrorBoundary>
         </SafeAreaView>
-      </View>
+      </LinearGradient>
     )
-  },
-)
+  }
+
+  return (
+    <View style={[styles.container, pal.view]}>
+      <SafeAreaView testID="noSessionView" style={styles.container}>
+        <ErrorBoundary>
+          {screenState === ScreenState.S_Signin ? (
+            <Signin
+              onPressBack={() =>
+                setScreenState(ScreenState.S_SigninOrCreateAccount)
+              }
+            />
+          ) : undefined}
+          {screenState === ScreenState.S_CreateAccount ? (
+            <CreateAccount
+              onPressBack={() =>
+                setScreenState(ScreenState.S_SigninOrCreateAccount)
+              }
+            />
+          ) : undefined}
+        </ErrorBoundary>
+      </SafeAreaView>
+    </View>
+  )
+})
 
 const styles = StyleSheet.create({
   container: {

src/view/screens/NotFound.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {Button, View} from 'react-native'
+import {Button, StyleSheet, View} from 'react-native'
 import {ViewHeader} from '../com/util/ViewHeader'
 import {Text} from '../com/util/text/Text'
 import {useStores} from '../../state'
@@ -9,13 +9,8 @@ export const NotFound = () => {
   return (
     <View testID="notFoundView">
       <ViewHeader title="Page not found" />
-      <View
-        style={{
-          justifyContent: 'center',
-          alignItems: 'center',
-          paddingTop: 100,
-        }}>
-        <Text style={{fontSize: 40, fontWeight: 'bold'}}>Page not found</Text>
+      <View style={styles.container}>
+        <Text style={styles.title}>Page not found</Text>
         <Button
           testID="navigateHomeButton"
           title="Home"
@@ -25,3 +20,15 @@ export const NotFound = () => {
     </View>
   )
 }
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingTop: 100,
+  },
+  title: {
+    fontSize: 40,
+    fontWeight: 'bold',
+  },
+})

src/view/screens/Notifications.tsx

@@ -5,6 +5,7 @@ import {Feed} from '../com/notifications/Feed'
 import {useStores} from '../../state'
 import {ScreenParams} from '../routes'
 import {useOnMainScroll} from '../lib/hooks/useOnMainScroll'
+import {s} from '../lib/styles'
 
 export const Notifications = ({navIdx, visible}: ScreenParams) => {
   const store = useStores()
@@ -24,14 +25,14 @@ export const Notifications = ({navIdx, visible}: ScreenParams) => {
         store.me.notifications.updateReadState()
       })
     store.nav.setTitle(navIdx, 'Notifications')
-  }, [visible, store])
+  }, [visible, store, navIdx])
 
   const onPressTryAgain = () => {
     store.me.notifications.refresh()
   }
 
   return (
-    <View style={{flex: 1}}>
+    <View style={s.h100pct}>
       <ViewHeader title="Notifications" canGoBack={false} />
       <Feed
         view={store.me.notifications}

src/view/screens/Onboard.tsx

@@ -1,5 +1,5 @@
 import React, {useEffect} from 'react'
-import {View} from 'react-native'
+import {StyleSheet, View} from 'react-native'
 import {observer} from 'mobx-react-lite'
 import {FeatureExplainer} from '../com/onboard/FeatureExplainer'
 import {Follows} from '../com/onboard/Follows'
@@ -14,7 +14,7 @@ export const Onboard = observer(() => {
     if (!OnboardStageOrder.includes(store.onboard.stage)) {
       store.onboard.stop()
     }
-  }, [store.onboard.stage])
+  }, [store.onboard])
 
   let Com
   if (store.onboard.stage === OnboardStage.Explainers) {
@@ -26,8 +26,15 @@ export const Onboard = observer(() => {
   }
 
   return (
-    <View style={{flex: 1, backgroundColor: '#fff'}}>
+    <View style={styles.container}>
       <Com />
     </View>
   )
 })
+
+const styles = StyleSheet.create({
+  container: {
+    height: '100%',
+    backgroundColor: '#fff',
+  },
+})

src/view/screens/PostDownvotedBy.tsx

@@ -16,7 +16,7 @@ export const PostDownvotedBy = ({navIdx, visible, params}: ScreenParams) => {
       store.nav.setTitle(navIdx, 'Downvoted by')
       store.shell.setMinimalShellMode(false)
     }
-  }, [store, visible])
+  }, [store, visible, navIdx])
 
   return (
     <View>

src/view/screens/PostRepostedBy.tsx

@@ -16,7 +16,7 @@ export const PostRepostedBy = ({navIdx, visible, params}: ScreenParams) => {
       store.nav.setTitle(navIdx, 'Reposted by')
       store.shell.setMinimalShellMode(false)
     }
-  }, [store, visible])
+  }, [store, visible, navIdx])
 
   return (
     <View>

src/view/screens/PostThread.tsx

@@ -6,6 +6,7 @@ import {PostThread as PostThreadComponent} from '../com/post-thread/PostThread'
 import {PostThreadViewModel} from '../../state/models/post-thread-view'
 import {ScreenParams} from '../routes'
 import {useStores} from '../../state'
+import {s} from '../lib/styles'
 
 export const PostThread = ({navIdx, visible, params}: ScreenParams) => {
   const store = useStores()
@@ -14,18 +15,18 @@ export const PostThread = ({navIdx, visible, params}: ScreenParams) => {
   const uri = makeRecordUri(name, 'app.bsky.feed.post', rkey)
   const view = useMemo<PostThreadViewModel>(
     () => new PostThreadViewModel(store, {uri}),
-    [uri],
+    [store, uri],
   )
 
-  const setTitle = () => {
-    const author = view.thread?.author
-    const niceName = author?.handle || name
-    setViewSubtitle(`by ${niceName}`)
-    store.nav.setTitle(navIdx, `Post by ${niceName}`)
-  }
   useEffect(() => {
     let aborted = false
     const threadCleanup = view.registerListeners()
+    const setTitle = () => {
+      const author = view.thread?.post.author
+      const niceName = author?.handle || name
+      setViewSubtitle(`by ${niceName}`)
+      store.nav.setTitle(navIdx, `Post by ${niceName}`)
+    }
     if (!visible) {
       return threadCleanup
     }
@@ -47,12 +48,12 @@ export const PostThread = ({navIdx, visible, params}: ScreenParams) => {
       aborted = true
       threadCleanup()
     }
-  }, [visible, store.nav, store.log, name])
+  }, [visible, store.nav, store.log, store.shell, name, navIdx, view])
 
   return (
-    <View style={{flex: 1}}>
+    <View style={s.h100pct}>
       <ViewHeader title="Post" subtitle={viewSubtitle} />
-      <View style={{flex: 1}}>
+      <View style={s.h100pct}>
         <PostThreadComponent uri={uri} view={view} />
       </View>
     </View>

src/view/screens/PostUpvotedBy.tsx

@@ -15,7 +15,7 @@ export const PostUpvotedBy = ({navIdx, visible, params}: ScreenParams) => {
     if (visible) {
       store.nav.setTitle(navIdx, 'Liked by')
     }
-  }, [store, visible])
+  }, [store, visible, navIdx])
 
   return (
     <View>

src/view/screens/Profile.tsx

@@ -26,9 +26,13 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => {
   const [hasSetup, setHasSetup] = useState<boolean>(false)
   const uiState = React.useMemo(
     () => new ProfileUiModel(store, {user: params.name}),
-    [params.user],
+    [params.name, store],
   )
 
+  useEffect(() => {
+    store.nav.setTitle(navIdx, params.name)
+  }, [store, navIdx, params.name])
+
   useEffect(() => {
     let aborted = false
     const feedCleanup = uiState.feed.registerListeners()
@@ -38,7 +42,6 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => {
     if (hasSetup) {
       uiState.update()
     } else {
-      store.nav.setTitle(navIdx, params.name)
       uiState.setup().then(() => {
         if (aborted) {
           return
@@ -50,7 +53,7 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => {
       aborted = true
       feedCleanup()
     }
-  }, [visible, params.name, store])
+  }, [visible, store, hasSetup, uiState])
 
   // events
   // =
@@ -139,7 +142,7 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => {
             <EmptyState
               icon={['far', 'message']}
               message="No posts yet!"
-              style={{paddingVertical: 40}}
+              style={styles.emptyState}
             />
           )
         }
@@ -187,7 +190,7 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => {
 
 function LoadingMoreFooter() {
   return (
-    <View style={{paddingVertical: 20}}>
+    <View style={styles.loadingMoreFooter}>
       <ActivityIndicator />
     </View>
   )
@@ -202,6 +205,12 @@ const styles = StyleSheet.create({
     paddingVertical: 10,
     paddingHorizontal: 14,
   },
+  emptyState: {
+    paddingVertical: 40,
+  },
+  loadingMoreFooter: {
+    paddingVertical: 20,
+  },
   endItem: {
     paddingTop: 20,
     paddingBottom: 30,

src/view/screens/ProfileFollowers.tsx

@@ -14,7 +14,7 @@ export const ProfileFollowers = ({navIdx, visible, params}: ScreenParams) => {
       store.nav.setTitle(navIdx, `Followers of ${name}`)
       store.shell.setMinimalShellMode(false)
     }
-  }, [store, visible, name])
+  }, [store, visible, name, navIdx])
 
   return (
     <View>

src/view/screens/ProfileFollows.tsx

@@ -14,7 +14,7 @@ export const ProfileFollows = ({navIdx, visible, params}: ScreenParams) => {
       store.nav.setTitle(navIdx, `Followed by ${name}`)
       store.shell.setMinimalShellMode(false)
     }
-  }, [store, visible, name])
+  }, [store, visible, name, navIdx])
 
   return (
     <View>

src/view/screens/Search.tsx

@@ -25,7 +25,7 @@ export const Search = ({navIdx, visible, params}: ScreenParams) => {
   const [query, setQuery] = useState<string>('')
   const autocompleteView = useMemo<UserAutocompleteViewModel>(
     () => new UserAutocompleteViewModel(store),
-    [],
+    [store],
   )
   const {name} = params
 
@@ -35,7 +35,7 @@ export const Search = ({navIdx, visible, params}: ScreenParams) => {
       autocompleteView.setup()
       store.nav.setTitle(navIdx, 'Search')
     }
-  }, [store, visible, name])
+  }, [store, visible, name, navIdx, autocompleteView])
 
   const onChangeQuery = (text: string) => {
     setQuery(text)

src/view/screens/Settings.tsx

@@ -33,7 +33,7 @@ export const Settings = observer(function Settings({
     }
     store.shell.setMinimalShellMode(false)
     store.nav.setTitle(navIdx, 'Settings')
-  }, [visible, store])
+  }, [visible, store, navIdx])
 
   const onPressSwitchAccount = async (acct: AccountData) => {
     setIsSwitching(true)
@@ -130,8 +130,8 @@ export const Settings = observer(function Settings({
           style={[
             pal.view,
             styles.profile,
+            styles.alignCenter,
             s.mb2,
-            {alignItems: 'center'},
             isSwitching && styles.dimmed,
           ]}
           onPress={isSwitching ? undefined : onPressAddAccount}>
@@ -142,7 +142,7 @@ export const Settings = observer(function Settings({
             </Text>
           </View>
         </TouchableOpacity>
-        <View style={{height: 50}} />
+        <View style={styles.spacer} />
         <Text type="sm-medium" style={[s.mb5]}>
           Developer tools
         </Text>
@@ -168,6 +168,12 @@ const styles = StyleSheet.create({
   dimmed: {
     opacity: 0.5,
   },
+  spacer: {
+    height: 50,
+  },
+  alignCenter: {
+    alignItems: 'center',
+  },
   title: {
     fontSize: 32,
     fontWeight: 'bold',