Factor lightbox out into hook/context (#1919)

1 files changed, 4 insertions, 3 deletions

diff --git a/src/view/com/profile/ProfileSubpageHeader.tsx b/src/view/com/profile/ProfileSubpageHeader.tsx
index e1b587beb..ef128e877 100644
--- a/src/view/com/profile/ProfileSubpageHeader.tsx
+++ b/src/view/com/profile/ProfileSubpageHeader.tsx
@@ -16,7 +16,7 @@ import {useStores} from 'state/index'
 import {NavigationProp} from 'lib/routes/types'
 import {BACK_HITSLOP} from 'lib/constants'
 import {isNative} from 'platform/detection'
-import {ImagesLightbox} from 'state/models/ui/shell'
+import {useLightboxControls, ImagesLightbox} from '#/state/lightbox'
 import {useLingui} from '@lingui/react'
 import {msg} from '@lingui/macro'
 import {useSetDrawerOpen} from '#/state/shell'
@@ -50,6 +50,7 @@ export const ProfileSubpageHeader = observer(function HeaderImpl({
   const navigation = useNavigation<NavigationProp>()
   const {_} = useLingui()
   const {isMobile} = useWebMediaQueries()
+  const {openLightbox} = useLightboxControls()
   const pal = usePalette('default')
   const canGoBack = navigation.canGoBack()
 
@@ -69,9 +70,9 @@ export const ProfileSubpageHeader = observer(function HeaderImpl({
     if (
       avatar // TODO && !(view.moderation.avatar.blur && view.moderation.avatar.noOverride)
     ) {
-      store.shell.openLightbox(new ImagesLightbox([{uri: avatar}], 0))
+      openLightbox(new ImagesLightbox([{uri: avatar}], 0))
     }
-  }, [store, avatar])
+  }, [openLightbox, avatar])
 
   return (
     <CenteredView style={pal.view}>