run lingui script

src/components/Lightbox/Lightbox.web.tsx

@@ -1,9 +1,7 @@
 import {useCallback, useEffect, useRef, useState} from 'react'
 import {Pressable, StyleSheet, View} from 'react-native'
 import {Image} from 'expo-image'
-import {msg} from '@lingui/core/macro'
-import {useLingui} from '@lingui/react'
-import {Trans} from '@lingui/react/macro'
+import {Trans, useLingui} from '@lingui/react/macro'
 import {FocusGuards, FocusScope} from 'radix-ui/internal'
 import {RemoveScrollBar} from 'react-remove-scroll-bar'
 
@@ -67,12 +65,12 @@ function LightboxContainer({
   children: React.ReactNode
   handleBackgroundPress: () => void
 }) {
-  const {_} = useLingui()
+  const {t: l} = useLingui()
   FocusGuards.useFocusGuards()
   return (
     <Pressable
       accessibilityHint={undefined}
-      accessibilityLabel={_(msg`Close image viewer`)}
+      accessibilityLabel={l`Close image viewer`}
       onPress={handleBackgroundPress}
       style={[a.fixed, a.inset_0, a.z_10]}>
       <Backdrop />
@@ -81,7 +79,7 @@ function LightboxContainer({
         <div
           role="dialog"
           aria-modal="true"
-          aria-label={_(msg`Image viewer`)}
+          aria-label={l`Image viewer`}
           style={{position: 'absolute', inset: 0}}>
           {children}
         </div>
@@ -100,7 +98,7 @@ function LightboxGallery({
   onClose: () => void
 }) {
   const t = useTheme()
-  const {_} = useLingui()
+  const {t: l} = useLingui()
   const {reduceMotionEnabled} = useA11y()
   const [index, setIndex] = useState(initialIndex)
   const [hasAnyLoaded, setAnyHasLoaded] = useState(false)
@@ -196,7 +194,7 @@ function LightboxGallery({
             ]}
             hoverStyle={styles.blurredBackdropHover}
             color="secondary"
-            label={_(msg`Previous image`)}
+            label={l`Previous image`}
             shape="round"
             size={gtPhone ? 'large' : 'small'}>
             <ChevronLeftIcon
@@ -217,7 +215,7 @@ function LightboxGallery({
             ]}
             hoverStyle={styles.blurredBackdropHover}
             color="secondary"
-            label={_(msg`Next image`)}
+            label={l`Next image`}
             shape="round"
             size={gtPhone ? 'large' : 'small'}>
             <ChevronRightIcon
@@ -236,10 +234,8 @@ function LightboxGallery({
             delayedFadeInAnim,
           ]}>
           <Pressable
-            accessibilityLabel={_(msg`Expand alt text`)}
-            accessibilityHint={_(
-              msg`If alt text is long, toggles alt text expanded state`,
-            )}
+            accessibilityLabel={l`Expand alt text`}
+            accessibilityHint={l`If alt text is long, toggles alt text expanded state`}
             onPress={() => {
               setAltExpanded(!isAltExpanded)
             }}>
@@ -254,11 +250,11 @@ function LightboxGallery({
       ) : null}
       {imgs.length > 1 && (
         <div aria-live="polite" aria-atomic="true" style={a.sr_only}>
-          <Text>{_(msg`Image ${index + 1} of ${imgs.length}`)}</Text>
+          <Text>{l`Image ${index + 1} of ${imgs.length}`}</Text>
         </div>
       )}
       <Menu.Root>
-        <Menu.Trigger label={_(msg`Image options`)}>
+        <Menu.Trigger label={l`Image options`}>
           {({props}) => (
             <View style={[a.absolute, styles.menuBtn, delayedFadeInAnim]}>
               <CircleChromeButton
@@ -266,7 +262,7 @@ function LightboxGallery({
                 accessible={false}
                 icon={EllipsisIcon}
                 iconStyle={{transform: [{rotate: '90deg'}]}}
-                label={_(msg`Image options`)}
+                label={l`Image options`}
               />
             </View>
           )}
@@ -274,7 +270,7 @@ function LightboxGallery({
         <Menu.Outer>
           <Menu.Group>
             <Menu.Item
-              label={_(msg`Share image`)}
+              label={l`Share image`}
               onPress={async () => {
                 const url = img.uri
                 if (
@@ -293,9 +289,9 @@ function LightboxGallery({
                 ) {
                   try {
                     await navigator.clipboard.writeText(url)
-                    Toast.show(_(msg`Link copied to clipboard`))
+                    Toast.show(l`Link copied to clipboard`)
                   } catch {
-                    Toast.show(_(msg`Failed to copy link`), {type: 'error'})
+                    Toast.show(l`Failed to copy link`, {type: 'error'})
                   }
                 }
               }}>
@@ -305,14 +301,14 @@ function LightboxGallery({
               <Menu.ItemIcon icon={ShareIcon} position="right" />
             </Menu.Item>
             <Menu.Item
-              label={_(msg`Download image`)}
+              label={l`Download image`}
               onPress={() => {
                 saveImageToMediaLibrary({uri: img.uri}).then(
                   () => {
-                    Toast.show(_(msg`Image saved`))
+                    Toast.show(l`Image saved`)
                   },
                   () => {
-                    Toast.show(_(msg`Failed to save image`), {type: 'error'})
+                    Toast.show(l`Failed to save image`, {type: 'error'})
                   },
                 )
               }}>
@@ -327,7 +323,7 @@ function LightboxGallery({
       <View style={[a.absolute, styles.closeBtn, delayedFadeInAnim]}>
         <CircleChromeButton
           icon={XIcon}
-          label={_(msg`Close image viewer`)}
+          label={l`Close image viewer`}
           onPress={onClose}
         />
       </View>

src/components/Lightbox/chrome/Header.tsx

@@ -1,7 +1,6 @@
 import {View} from 'react-native'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
-import {msg} from '@lingui/core/macro'
-import {useLingui} from '@lingui/react'
+import {useLingui} from '@lingui/react/macro'
 
 import {atoms as a} from '#/alf'
 import {TimesLarge_Stroke2_Corner0_Rounded as CloseIcon} from '#/components/icons/Times'
@@ -24,7 +23,7 @@ export function Header({
   imageCount,
   activeIndex,
 }: Props) {
-  const {_} = useLingui()
+  const {t: l} = useLingui()
   const insets = useSafeAreaInsets()
 
   return (
@@ -45,7 +44,7 @@ export function Header({
       <PagerDots count={imageCount} activeIndex={activeIndex} />
       <CircleChromeButton
         icon={CloseIcon}
-        label={_(msg`Close image`)}
+        label={l`Close image`}
         onPress={onRequestClose}
       />
     </View>