Merge remote-tracking branch 'upstream/main'

app.config.js

@@ -99,6 +99,8 @@ module.exports = function (config) {
           dark: DARK_SPLASH_CONFIG,
         },
         entitlements: {
+          'com.apple.developer.kernel.increased-memory-limit': true,
+          'com.apple.developer.kernel.extended-virtual-addressing': true,
           'com.apple.security.application-groups': 'group.app.bsky',
         },
         privacyManifests: {

src/components/dms/ActionsWrapper.tsx

@@ -53,9 +53,11 @@ export function ActionsWrapper({
     .numberOfTaps(2)
     .hitSlop(HITSLOP_10)
     .onEnd(open)
+    .runOnJS(true)
 
   const pressAndHoldGesture = Gesture.LongPress()
     .onStart(() => {
+      'worklet'
       scale.value = withTiming(1.05, {duration: 200}, finished => {
         if (!finished) return
         runOnJS(open)()
@@ -65,7 +67,6 @@ export function ActionsWrapper({
     .onTouchesUp(shrink)
     .onTouchesMove(shrink)
     .cancelsTouchesInView(false)
-    .runOnJS(true)
 
   const composedGestures = Gesture.Exclusive(
     doubleTapGesture,

src/screens/Messages/Conversation.tsx

@@ -127,9 +127,7 @@ function Inner() {
             setHasScrolled={setHasScrolled}
           />
         ) : (
-          <>
-            <View style={[a.align_center, a.gap_sm, a.flex_1]} />
-          </>
+          <View style={[a.align_center, a.gap_sm, a.flex_1]} />
         )}
         {!readyToShow && (
           <View

src/screens/Messages/components/MessagesList.tsx

@@ -202,17 +202,17 @@ export function MessagesList({
       convoState.items.length,
       // these are stable
       flatListRef,
-      isAtTop.value,
-      isAtBottom.value,
-      layoutHeight.value,
+      isAtTop,
+      isAtBottom,
+      layoutHeight,
     ],
   )
 
   const onStartReached = useCallback(() => {
     if (hasScrolled && prevContentHeight.current > layoutHeight.value) {
       convoState.fetchMessageHistory()
     }
-  }, [convoState, hasScrolled, layoutHeight.value])
+  }, [convoState, hasScrolled, layoutHeight])
 
   const onScroll = React.useCallback(
     (e: ReanimatedScrollEvent) => {
@@ -374,7 +374,7 @@ export function MessagesList({
     },
     [
       flatListRef,
-      keyboardIsOpening.value,
+      keyboardIsOpening,
       layoutScrollWithoutAnimation,
       layoutHeight,
     ],

src/screens/Profile/Header/Shell.tsx

@@ -64,6 +64,7 @@ let ProfileHeaderShell = ({
               height: 1000,
               width: 1000,
             },
+            type: 'circle-avi',
           },
         ],
         index: 0,

src/view/com/lightbox/ImageViewing/@types/index.ts

@@ -21,4 +21,5 @@ export type ImageSource = {
   thumbUri: string
   alt?: string
   dimensions: Dimensions | null
+  type: 'image' | 'circle-avi' | 'rect-avi'
 }

src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx

@@ -1,6 +1,10 @@
 import React, {useState} from 'react'
-import {ActivityIndicator, StyleSheet, View} from 'react-native'
-import {Gesture, GestureDetector} from 'react-native-gesture-handler'
+import {ActivityIndicator, StyleProp, StyleSheet, View} from 'react-native'
+import {
+  Gesture,
+  GestureDetector,
+  PanGesture,
+} from 'react-native-gesture-handler'
 import Animated, {
   AnimatedRef,
   measure,
@@ -9,12 +13,10 @@ import Animated, {
   useAnimatedRef,
   useAnimatedStyle,
   useSharedValue,
-  withDecay,
   withSpring,
 } from 'react-native-reanimated'
-import {Image} from 'expo-image'
+import {Image, ImageStyle} from 'expo-image'
 
-import {useImageDimensions} from '#/lib/media/image-sizes'
 import type {Dimensions as ImageDimensions, ImageSource} from '../../@types'
 import {
   applyRounding,
@@ -26,6 +28,8 @@ import {
   TransformMatrix,
 } from '../../transforms'
 
+const AnimatedImage = Animated.createAnimatedComponent(Image)
+
 const MIN_SCREEN_ZOOM = 2
 const MAX_ORIGINAL_IMAGE_ZOOM = 2
 
@@ -39,26 +43,28 @@ type Props = {
   isScrollViewBeingDragged: boolean
   showControls: boolean
   safeAreaRef: AnimatedRef<View>
+  imageAspect: number | undefined
+  imageDimensions: ImageDimensions | undefined
+  imageStyle: StyleProp<ImageStyle>
+  dismissSwipePan: PanGesture
 }
 const ImageItem = ({
   imageSrc,
   onTap,
   onZoom,
-  onRequestClose,
   isScrollViewBeingDragged,
   safeAreaRef,
+  imageAspect,
+  imageDimensions,
+  imageStyle,
+  dismissSwipePan,
 }: Props) => {
   const [isScaled, setIsScaled] = useState(false)
-  const [imageAspect, imageDimensions] = useImageDimensions({
-    src: imageSrc.uri,
-    knownDimensions: imageSrc.dimensions,
-  })
   const committedTransform = useSharedValue(initialTransform)
   const panTranslation = useSharedValue({x: 0, y: 0})
   const pinchOrigin = useSharedValue({x: 0, y: 0})
   const pinchScale = useSharedValue(1)
   const pinchTranslation = useSharedValue({x: 0, y: 0})
-  const dismissSwipeTranslateY = useSharedValue(0)
   const containerRef = useAnimatedRef()
 
   // Keep track of when we're entering or leaving scaled rendering.
@@ -97,19 +103,8 @@ const ImageItem = ({
     prependPinch(t, pinchScale.value, pinchOrigin.value, pinchTranslation.value)
     prependTransform(t, committedTransform.value)
     const [translateX, translateY, scale] = readTransform(t)
-
-    const dismissDistance = dismissSwipeTranslateY.value
-    const screenSize = measure(safeAreaRef)
-    const dismissProgress = screenSize
-      ? Math.min(Math.abs(dismissDistance) / (screenSize.height / 2), 1)
-      : 0
     return {
-      opacity: 1 - dismissProgress,
-      transform: [
-        {translateX},
-        {translateY: translateY + dismissDistance},
-        {scale},
-      ],
+      transform: [{translateX}, {translateY: translateY}, {scale}],
     }
   })
 
@@ -307,27 +302,10 @@ const ImageItem = ({
       committedTransform.value = withClampedSpring(finalTransform)
     })
 
-  const dismissSwipePan = Gesture.Pan()
-    .enabled(!isScaled)
-    .activeOffsetY([-10, 10])
-    .failOffsetX([-10, 10])
-    .maxPointers(1)
-    .onUpdate(e => {
-      'worklet'
-      dismissSwipeTranslateY.value = e.translationY
-    })
-    .onEnd(e => {
-      'worklet'
-      if (Math.abs(e.velocityY) > 1000) {
-        dismissSwipeTranslateY.value = withDecay({velocity: e.velocityY})
-        runOnJS(onRequestClose)()
-      } else {
-        dismissSwipeTranslateY.value = withSpring(0, {
-          stiffness: 700,
-          damping: 50,
-        })
-      }
-    })
+  const innerStyle = useAnimatedStyle(() => ({
+    width: '100%',
+    aspectRatio: imageAspect,
+  }))
 
   const composedGesture = isScrollViewBeingDragged
     ? // If the parent is not at rest, provide a no-op gesture.
@@ -339,37 +317,40 @@ const ImageItem = ({
         singleTap,
       )
 
+  const type = imageSrc.type
+  const borderRadius =
+    type === 'circle-avi' ? 1e5 : type === 'rect-avi' ? 20 : 0
   return (
-    <Animated.View
-      ref={containerRef}
-      // Necessary to make opacity work for both children together.
-      renderToHardwareTextureAndroid
-      style={[styles.container, animatedStyle]}>
-      <ActivityIndicator size="small" color="#FFF" style={styles.loading} />
-      <GestureDetector gesture={composedGesture}>
-        <Image
-          contentFit="contain"
-          source={{uri: imageSrc.uri}}
-          placeholderContentFit="contain"
-          placeholder={{uri: imageSrc.thumbUri}}
-          style={styles.image}
-          accessibilityLabel={imageSrc.alt}
-          accessibilityHint=""
-          accessibilityIgnoresInvertColors
-          cachePolicy="memory"
-        />
-      </GestureDetector>
-    </Animated.View>
+    <GestureDetector gesture={composedGesture}>
+      <Animated.View style={imageStyle} renderToHardwareTextureAndroid>
+        <Animated.View
+          ref={containerRef}
+          // Necessary to make opacity work for both children together.
+          renderToHardwareTextureAndroid
+          style={[styles.container, animatedStyle]}>
+          <ActivityIndicator size="small" color="#FFF" style={styles.loading} />
+          <AnimatedImage
+            contentFit="contain"
+            source={{uri: imageSrc.uri}}
+            placeholderContentFit="contain"
+            placeholder={{uri: imageSrc.thumbUri}}
+            style={[innerStyle, {borderRadius}]}
+            accessibilityLabel={imageSrc.alt}
+            accessibilityHint=""
+            accessibilityIgnoresInvertColors
+            cachePolicy="memory"
+          />
+        </Animated.View>
+      </Animated.View>
+    </GestureDetector>
   )
 }
 
 const styles = StyleSheet.create({
   container: {
     height: '100%',
     overflow: 'hidden',
-  },
-  image: {
-    flex: 1,
+    justifyContent: 'center',
   },
   loading: {
     position: 'absolute',