Finish adding expo

src/view/com/composer/photos/PhotoCarouselPicker.tsx

@@ -18,9 +18,9 @@ import {compressIfNeeded} from 'lib/media/manip'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useStores} from 'state/index'
 import {
-  requestPhotoAccessIfNeeded,
-  requestCameraAccessIfNeeded,
-} from 'lib/permissions'
+  usePhotoLibraryPermission,
+  useCameraPermission,
+} from 'lib/hooks/usePermissions'
 import {
   POST_IMG_MAX_WIDTH,
   POST_IMG_MAX_HEIGHT,
@@ -38,6 +38,8 @@ export const PhotoCarouselPicker = ({
   const pal = usePalette('default')
   const store = useStores()
   const [isSetup, setIsSetup] = React.useState<boolean>(false)
+  const {requestCameraAccessIfNeeded} = useCameraPermission()
+  const {requestPhotoAccessIfNeeded} = usePhotoLibraryPermission()
 
   const localPhotos = React.useMemo<UserLocalPhotosModel>(
     () => new UserLocalPhotosModel(store),
@@ -68,7 +70,7 @@ export const PhotoCarouselPicker = ({
       // ignore
       store.log.warn('Error using camera', err)
     }
-  }, [store, selectedPhotos, onSelectPhotos])
+  }, [store, selectedPhotos, onSelectPhotos, requestCameraAccessIfNeeded])
 
   const handleSelectPhoto = useCallback(
     async (item: PhotoIdentifier) => {
@@ -116,7 +118,7 @@ export const PhotoCarouselPicker = ({
       )
     }
     onSelectPhotos([...selectedPhotos, ...result])
-  }, [track, store, selectedPhotos, onSelectPhotos])
+  }, [track, store, selectedPhotos, onSelectPhotos, requestPhotoAccessIfNeeded])
 
   return (
     <ScrollView

src/view/com/util/UserAvatar.tsx

@@ -11,9 +11,9 @@ import {
   PickedMedia,
 } from '../../../lib/media/picker'
 import {
-  requestPhotoAccessIfNeeded,
-  requestCameraAccessIfNeeded,
-} from 'lib/permissions'
+  usePhotoLibraryPermission,
+  useCameraPermission,
+} from 'lib/hooks/usePermissions'
 import {useStores} from 'state/index'
 import {colors, gradients} from 'lib/styles'
 import {DropdownButton} from './forms/DropdownButton'
@@ -36,6 +36,8 @@ export function UserAvatar({
   const store = useStores()
   const pal = usePalette('default')
   const initials = getInitials(displayName || handle)
+  const {requestCameraAccessIfNeeded} = useCameraPermission()
+  const {requestPhotoAccessIfNeeded} = usePhotoLibraryPermission()
 
   const renderSvg = (svgSize: number, svgInitials: string) => (
     <Svg width={svgSize} height={svgSize} viewBox="0 0 100 100">

src/view/com/util/UserBanner.tsx

@@ -13,9 +13,9 @@ import {
 } from '../../../lib/media/picker'
 import {useStores} from 'state/index'
 import {
-  requestPhotoAccessIfNeeded,
-  requestCameraAccessIfNeeded,
-} from 'lib/permissions'
+  usePhotoLibraryPermission,
+  useCameraPermission,
+} from 'lib/hooks/usePermissions'
 import {DropdownButton} from './forms/DropdownButton'
 import {usePalette} from 'lib/hooks/usePalette'
 import {isWeb} from 'platform/detection'
@@ -29,6 +29,9 @@ export function UserBanner({
 }) {
   const store = useStores()
   const pal = usePalette('default')
+  const {requestCameraAccessIfNeeded} = useCameraPermission()
+  const {requestPhotoAccessIfNeeded} = usePhotoLibraryPermission()
+
   const dropdownItems = [
     !isWeb && {
       label: 'Camera',