Expo 57 (#11334)

Co-authored-by: Tomek Zawadzki <tomekzawadzki98@gmail.com>
Co-authored-by: vineyardbovines <spencerfpope@gmail.com>

src/features/inviteFriends/InviteFriendsDialogInner.tsx

@@ -1,8 +1,11 @@
 import {Suspense, useRef} from 'react'
 import {Pressable, View} from 'react-native'
-import type ViewShot from 'react-native-view-shot'
+import {type ViewShotRef} from 'react-native-view-shot'
 import {setStringAsync} from 'expo-clipboard'
-import {requestPermissionsAsync, saveToLibraryAsync} from 'expo-media-library'
+import {
+  requestPermissionsAsync,
+  saveToLibraryAsync,
+} from 'expo-media-library/legacy'
 import {useLingui} from '@lingui/react/macro'
 import {useNavigation} from '@react-navigation/native'
 
@@ -41,7 +44,7 @@ export function InviteFriendsDialogInner({
   const {currentAccount} = useSession()
   const profileQuery = useProfileQuery({did: currentAccount?.did})
   const [themeKey, setThemeKey] = useInviteThemeKey()
-  const captureRef = useRef<ViewShot>(null)
+  const captureRef = useRef<ViewShotRef>(null)
 
   const theme = getInviteTheme(themeKey)
   const variant = t.name === 'light' ? theme.light : theme.dark

src/features/inviteFriends/InviteScannerScreen.tsx

@@ -1,5 +1,5 @@
 import {useCallback, useState} from 'react'
-import {Pressable, StyleSheet, useWindowDimensions, View} from 'react-native'
+import {Pressable, useWindowDimensions, View} from 'react-native'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import Svg, {Path} from 'react-native-svg'
 import {
@@ -125,7 +125,7 @@ export function InviteScannerScreen() {
       noInsetTop
       style={{backgroundColor: t.palette.black}}>
       <CameraView
-        style={StyleSheet.absoluteFill}
+        style={[a.absolute, a.inset_0]}
         facing="back"
         barcodeScannerSettings={{barcodeTypes: ['qr']}}
         onBarcodeScanned={scannerEnabled ? onBarcodeScanned : undefined}
@@ -254,7 +254,7 @@ function ScannerScrim() {
     `V${y + r} A${r} ${r} 0 0 1 ${x + r} ${y} Z`
   return (
     <Svg
-      style={StyleSheet.absoluteFill}
+      style={[a.absolute, a.inset_0]}
       width={width}
       height={height}
       pointerEvents="none">

src/features/inviteFriends/components/ThemedQrCard.tsx

@@ -2,7 +2,7 @@ import {lazy} from 'react'
 import {View} from 'react-native'
 // @ts-expect-error missing types
 import QRCode from 'react-native-qrcode-styled'
-import type ViewShot from 'react-native-view-shot'
+import {type ViewShotRef} from 'react-native-view-shot'
 import {Image} from 'expo-image'
 import {LinearGradient} from 'expo-linear-gradient'
 
@@ -12,10 +12,7 @@ import {hexToRgb, rgbToHex} from '#/alf/util/colorGeneration'
 import {Text} from '#/components/Typography'
 import {type InviteThemeVariant} from '../themes'
 
-const LazyViewShot = lazy(
-  // @ts-expect-error dynamic import
-  () => import('react-native-view-shot/src/index'),
-)
+const LazyViewShot = lazy(() => import('react-native-view-shot'))
 
 const CARD_WIDTH = 278
 const CARD_GRADIENT_PADDING = 12
@@ -37,7 +34,7 @@ export function ThemedQrCard({
   shareUrl: string
   handle: string
   avatarUri?: string
-  captureRef: React.Ref<ViewShot>
+  captureRef: React.Ref<ViewShotRef>
 }) {
   const t = useTheme()
   return (