feat: upgrade expo sdk

.nvmrc

@@ -1 +1 @@
-v18.16.0
+v20

App.tsx

@@ -5,22 +5,22 @@ import * as SplashScreen from 'expo-splash-screen'
 import { StatusBar } from 'expo-status-bar'
 import { Provider, useAtom, useAtomValue } from 'jotai'
 import { waitForAll } from 'jotai/utils'
+import { noop } from 'lodash-es'
 import { ReactElement, ReactNode, Suspense } from 'react'
 import { LogBox } from 'react-native'
+import { Platform, UIManager } from 'react-native'
 import 'react-native-gesture-handler'
 import { SafeAreaProvider } from 'react-native-safe-area-context'
 import { useDeviceContext } from 'twrnc'
 
 import { AsyncStoragePersist } from './components/AsyncStoragePersist'
-import StyledImageViewer from './components/StyledImageViewer'
 import StyledToast from './components/StyledToast'
 import { baseUrlAtom } from './jotai/baseUrlAtom'
 import { deviceTypeAtom } from './jotai/deviceTypeAtom'
 import { enabledAutoCheckinAtom } from './jotai/enabledAutoCheckinAtom'
 import { enabledMsgPushAtom } from './jotai/enabledMsgPushAtom'
 import { enabledParseContentAtom } from './jotai/enabledParseContent'
 import { enabledWebviewAtom } from './jotai/enabledWebviewAtom'
-import { imageViewerAtom } from './jotai/imageViewerAtom'
 import { imgurConfigAtom } from './jotai/imgurConfigAtom'
 import { profileAtom } from './jotai/profileAtom'
 import { searchHistoryAtom } from './jotai/searchHistoryAtom'
@@ -35,6 +35,8 @@ import './utils/dayjsPlugins'
 import { queryClient } from './utils/query'
 import tw from './utils/tw'
 
+console.log('setLayoutAnimationEnabledExperimental', UIManager)
+
 SplashScreen.preventAutoHideAsync()
 
 LogBox.ignoreLogs([
@@ -55,7 +57,6 @@ export default function App() {
                 <AppInitializer>
                   <Navigation />
                   <StatusBar />
-                  <GlobalImageViewer />
                   <StyledToast />
                 </AppInitializer>
               </AsyncStoragePersist>
@@ -100,15 +101,3 @@ function AppInitializer({ children }: { children: ReactNode }) {
 
   return children as ReactElement
 }
-
-function GlobalImageViewer() {
-  const [imageViewer, setImageViewer] = useAtom(imageViewerAtom)
-  return (
-    <StyledImageViewer
-      {...imageViewer}
-      onClose={() =>
-        setImageViewer({ visible: false, index: 0, imageUrls: [] })
-      }
-    />
-  )
-}

app.json

@@ -7,6 +7,7 @@
     "jsEngine": "jsc",
     "icon": "./assets/icon.png",
     "userInterfaceStyle": "automatic",
+    "newArchEnabled": true,
     "splash": {
       "image": "./assets/splash.png",
       "resizeMode": "contain",
@@ -79,11 +80,7 @@
       [
         "expo-build-properties",
         {
-          // "ios": {
-          //   "newArchEnabled": true
-          // },
           "android": {
-            // "newArchEnabled": true,
             // https://www.reddit.com/r/expo/comments/1abfxrq/sdk50_unusually_large_apk_size/
             "useLegacyPackaging": true,
             "enableProguardInReleaseBuilds": true,

components/Html/ImageRenderer.tsx

@@ -33,20 +33,13 @@ const ImageRenderer: CustomBlockRenderer = ({ tnode, style }) => {
     )
 
   return (
-    <Pressable
-      onPress={ev => {
-        ev.stopPropagation()
-        if (url) onPreview(url)
-      }}
-    >
-      <StyledImage
-        style={style as any}
-        source={url}
-        containerWidth={containerWidth}
-        priority="low"
-        autoplay={false}
-      />
-    </Pressable>
+    <StyledImage
+      style={style as any}
+      source={url}
+      containerWidth={containerWidth}
+      priority="low"
+      autoplay={false}
+    />
   )
 }
 

components/Html/index.tsx

@@ -87,6 +87,7 @@ function Html({
               return
             }
 
+            console.log('index', findIndex(imageUrls, { url }))
             setImageViewer({
               index: findIndex(imageUrls, { url }),
               visible: true,
@@ -103,21 +104,12 @@ function Html({
                     )
                       return false
 
-                    let localUrl: string | null
-
-                    if (Platform.OS === 'ios' || Platform.OS === 'macos') {
-                      localUrl = await Image.getCachePathAsync(resolvedURI)
-
-                      if (localUrl) {
-                        localUrl = RNImage.resolveAssetSource({
-                          uri: localUrl,
-                        }).uri
-                      }
-                    }
+                    // let localUrl: string | null
+                    // localUrl = await Image.getCachePathAsync(resolvedURI)
 
                     return {
                       ...pick(imageResult, ['width', 'height']),
-                      url: localUrl! || resolvedURI,
+                      url: resolvedURI,
                     }
                   })
                 )

components/Profile.tsx

@@ -8,7 +8,7 @@ import { useAtom, useAtomValue } from 'jotai'
 import { compact, omit, pick } from 'lodash-es'
 import { memo } from 'react'
 import { ScrollView, Text, TouchableOpacity, View } from 'react-native'
-import { SafeAreaView } from 'react-native-safe-area-context'
+import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context'
 
 import Money from '@/components/Money'
 import StyledImage from '@/components/StyledImage'
@@ -40,6 +40,8 @@ function Profile() {
 
   const { colors, fontSize } = useAtomValue(uiAtom)
 
+  const safeAreaInsets = useSafeAreaInsets()
+
   const listOptions = compact([
     isLogin && {
       label: '节点收藏',
@@ -207,9 +209,10 @@ function Profile() {
   ]) as (ListItemProps & { value: string })[]
 
   return (
-    <SafeAreaView
-      edges={['top']}
-      style={tw.style(`flex-1 bg-[${colors.base100}]`)}
+    <View
+      style={tw.style(
+        `pt-[${safeAreaInsets.top}px] flex-1 bg-[${colors.base100}]`
+      )}
       key={fontScale}
     >
       {isLogin ? (
@@ -295,6 +298,6 @@ function Profile() {
 
         <SafeAreaView edges={['bottom']} />
       </ScrollView>
-    </SafeAreaView>
+    </View>
   )
 }

components/StyledImage/AnimatedImageOverlay.tsx

@@ -11,19 +11,13 @@ let animatingImage = ''
 
 const animatedListeners = new Set<() => void>()
 export const isAnimatingImage = (uri: string) => uri === animatingImage
-const setAnimatingImage = (nextAnimatedImage: string) => {
+export const setAnimatingImage = (nextAnimatedImage: string) => {
   if (!isAnimatingImage(nextAnimatedImage)) {
     animatingImage = nextAnimatedImage
     animatedListeners.forEach(l => l())
   }
 }
 
-store.sub(imageViewerAtom, () => {
-  if (store.get(imageViewerAtom)?.visible) {
-    setAnimatingImage('')
-  }
-})
-
 export default function AnimatedImageOverlay({
   update,
   isAnimating,

components/StyledImage/BaseImage.tsx

@@ -1,16 +1,27 @@
 import { parseToRgba } from 'color2k'
 import { Image, ImageBackground, ImageProps, ImageSource } from 'expo-image'
+import * as Sharing from 'expo-sharing'
 import { useAtomValue } from 'jotai'
 import { isEqual, isObject, memoize, pick } from 'lodash-es'
-import { View, ViewStyle } from 'react-native'
+import {
+  StyleProp,
+  View,
+  ViewProps,
+  ViewStyle,
+  useWindowDimensions,
+} from 'react-native'
+import ImageModal from 'react-native-image-modal'
 
 import { uiAtom } from '@/jotai/uiAtom'
 import { hasSize } from '@/utils/hasSize'
 import tw from '@/utils/tw'
 import { genBMPUri } from '@/utils/url'
 import useUpdate from '@/utils/useUpdate'
 
-import AnimatedImageOverlay, { isAnimatingImage } from './AnimatedImageOverlay'
+import AnimatedImageOverlay, {
+  isAnimatingImage,
+  setAnimatingImage,
+} from './AnimatedImageOverlay'
 import BrokenImage from './BrokenImage'
 import { imageResults } from './helper'
 import { computeOptimalDispalySize } from './helper'
@@ -19,10 +30,10 @@ export interface BaseImageProps extends ImageProps {
   containerWidth?: number
 }
 
-const genPlaceholder = memoize((color: string) => {
-  const [r, g, b, a = 1] = parseToRgba(color)
-  return genBMPUri(1, [b, g, r, parseInt(String(a * 255), 10)])
-})
+// const genPlaceholder = memoize((color: string) => {
+//   const [r, g, b, a = 1] = parseToRgba(color)
+//   return genBMPUri(1, [b, g, r, parseInt(String(a * 255), 10)])
+// })
 
 export function BaseImage({
   style,
@@ -62,16 +73,16 @@ export function BaseImage({
       }
       onError?.(err)
     },
-    placeholder: genPlaceholder(colors.neutral),
-    placeholderContentFit: 'cover',
+    // placeholderContentFit: 'cover',
     style: tw.style(
       // Compute image size if style has no size
       !hasPassedSize && computeOptimalDispalySize(containerWidth, result),
       style as ViewStyle
     ),
   }
+  const layout = useWindowDimensions()
 
-  if (!uri) return <View style={style} {...props} />
+  if (!uri) return <View style={style as StyleProp<ViewStyle>} {...props} />
 
   if (result === 'error') {
     return (
@@ -80,7 +91,7 @@ export function BaseImage({
           imageResults.set(uri, 'refetching')
           update()
         }}
-        style={style}
+        style={style as StyleProp<ViewStyle>}
       />
     )
   }
@@ -89,25 +100,44 @@ export function BaseImage({
     const isAnimating = isAnimatingImage(uri)
     const isMiniImage =
       isObject(result) && result.width < 50 && result.height < 50
+    const disabled = !result || result === 'refetching' || isMiniImage
 
     return (
-      <ImageBackground
-        {...imageProps}
-        autoplay={isAnimating}
-        allowDownscaling={props.allowDownscaling ?? !isAnimating}
-        // contentFit="none"
-      >
-        {isObject(result) &&
-          !isMiniImage &&
-          !!result?.isAnimated &&
-          result?.mediaType === 'image/gif' && (
-            <AnimatedImageOverlay
-              isAnimating={isAnimating}
-              update={update}
-              uri={uri}
-            />
-          )}
-      </ImageBackground>
+      <ImageModal
+        disabled={disabled}
+        imageBackgroundColor={!isObject(result) ? colors.neutral : undefined}
+        style={imageProps.style}
+        source={source}
+        isTranslucent
+        hideCloseButton
+        onClose={() => {
+          setAnimatingImage('')
+        }}
+        onLongPress={() => {
+          if (!disabled) {
+            Sharing.shareAsync(uri)
+          }
+        }}
+        renderImageComponent={({ source, resizeMode, style, isModalOpen }) => (
+          <ImageBackground
+            {...(imageProps as ViewProps)}
+            autoplay={isAnimating}
+            style={style as StyleProp<ViewStyle>}
+            source={source}
+            allowDownscaling={!isModalOpen}
+            resizeMode={resizeMode}
+            // contentFit="none"
+          >
+            {isObject(result) && !isMiniImage && !!result?.isAnimated && (
+              <AnimatedImageOverlay
+                isAnimating={isAnimating}
+                update={update}
+                uri={uri}
+              />
+            )}
+          </ImageBackground>
+        )}
+      />
     )
   }
 

components/StyledImage/helper.ts

@@ -64,13 +64,8 @@ export function computeOptimalDispalySize(
 
   // Display optimal size
   const actualWidth = Math.min(aspectRatio * MAX_IMAGE_HEIGHT, containerWidth)
-  return actualWidth === containerWidth
-    ? {
-        aspectRatio,
-        width: `100%`,
-      }
-    : {
-        width: actualWidth,
-        height: actualWidth / aspectRatio,
-      }
+  return {
+    width: actualWidth,
+    height: actualWidth / aspectRatio,
+  }
 }

components/StyledImage/index.tsx

@@ -1,3 +1,4 @@
+import { ImageSource } from 'expo-image'
 import { isArray, isObject, isString } from 'lodash-es'
 import { memo } from 'react'
 
@@ -13,7 +14,7 @@ export { StyledImageProps, imageResults }
 function StyledImage({ source, ...props }: StyledImageProps) {
   const URI = isString(source)
     ? source
-    : isObject(source) && !isArray(source) && isString(source.uri)
+    : isImageSource(source)
     ? source.uri
     : undefined
   const resolvedURI = URI ? resolveURL(URI) : undefined
@@ -33,4 +34,8 @@ function StyledImage({ source, ...props }: StyledImageProps) {
   )
 }
 
+function isImageSource(source: any): source is ImageSource {
+  return isObject(source) && !isArray(source) && isString((source as any).uri)
+}
+
 export default memo(StyledImage)