check availablility in settings screen

src/components/contacts/screens/ViewMatches.tsx

@@ -1,8 +1,20 @@
+import {View} from 'react-native'
+
+import {atoms as a} from '#/alf'
+import * as Layout from '#/components/Layout'
 import {type Action, type State} from '../state'
 
 export function ViewMatches({}: {
   state: Extract<State, {step: '4: view matches'}>
   dispatch: React.Dispatch<Action>
 }) {
-  return null
+  return (
+    <View style={[a.h_full]}>
+      <Layout.Header.Outer noBottomBorder>
+        <Layout.Header.BackButton />
+        <Layout.Header.Content />
+        <Layout.Header.Slot />
+      </Layout.Header.Outer>
+    </View>
+  )
 }

src/screens/Settings/SyncContactsSettings.tsx

@@ -1,5 +1,7 @@
+import * as Contacts from 'expo-contacts'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+import {useQuery} from '@tanstack/react-query'
 
 import {
   type AllNavigatorParams,
@@ -20,6 +22,11 @@ export function SyncContactsSettingsScreen({}: Props) {
   const t = useTheme()
   const {_} = useLingui()
 
+  const {data: isAvailable} = useQuery({
+    queryKey: ['contacts-available'],
+    queryFn: async () => await Contacts.isAvailableAsync(),
+  })
+
   return (
     <Layout.Screen>
       <Layout.Header.Outer>
@@ -59,18 +66,20 @@ export function SyncContactsSettingsScreen({}: Props) {
                 </Trans>
               </Text>
             </SettingsList.Item>
-            <SettingsList.Item>
-              <Link
-                to={{screen: 'SyncContactsFlow'}}
-                label={_(msg`Upload contacts`)}
-                size="large"
-                color="primary"
-                style={[a.flex_1, a.justify_center]}>
-                <ButtonText>
-                  <Trans>Upload contacts</Trans>
-                </ButtonText>
-              </Link>
-            </SettingsList.Item>
+            {isAvailable && (
+              <SettingsList.Item>
+                <Link
+                  to={{screen: 'SyncContactsFlow'}}
+                  label={_(msg`Upload contacts`)}
+                  size="large"
+                  color="primary"
+                  style={[a.flex_1, a.justify_center]}>
+                  <ButtonText>
+                    <Trans>Upload contacts</Trans>
+                  </ButtonText>
+                </Link>
+              </SettingsList.Item>
+            )}
           </SettingsList.Container>
         </Layout.Content>
       ) : (