Use native view drawing instead of svg

src/screens/Compose/EditAttachment.tsx

@@ -18,44 +18,32 @@ const ComposeEditAttachment: React.FC<ScreenComposeStackScreenProps<
   },
   navigation
 }) => {
-  const { t } = useTranslation('screenCompose')
+    const { t } = useTranslation('screenCompose')
 
-  const headerLeft = useCallback(
-    () => (
-      <HeaderLeft
-        type='icon'
-        content='ChevronDown'
-        onPress={() => navigation.goBack()}
-      />
-    ),
-    []
-  )
-
-  const children = useCallback(
-    () => <ComposeEditAttachmentRoot index={index} />,
-    []
-  )
-
-  return (
-    <KeyboardAvoidingView
-      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-      style={{ flex: 1 }}
-    >
-      <SafeAreaView style={{ flex: 1 }} edges={['left', 'right', 'bottom']}>
-        <Stack.Navigator>
-          <Stack.Screen
-            name='Screen-Compose-EditAttachment-Root'
-            children={children}
-            options={{
-              headerLeft,
-              headerRight: () => <ComposeEditAttachmentSubmit index={index} />,
-              title: t('content.editAttachment.header.title')
-            }}
-          />
-        </Stack.Navigator>
-      </SafeAreaView>
-    </KeyboardAvoidingView>
-  )
-}
+    return (
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        style={{ flex: 1 }}
+      >
+        <SafeAreaView style={{ flex: 1 }} edges={['left', 'right', 'bottom']}>
+          <Stack.Navigator>
+            <Stack.Screen
+              name='Screen-Compose-EditAttachment-Root'
+              children={() => <ComposeEditAttachmentRoot index={index} />}
+              options={{
+                headerLeft: () => <HeaderLeft
+                  type='icon'
+                  content='ChevronDown'
+                  onPress={() => navigation.goBack()}
+                />,
+                headerRight: () => <ComposeEditAttachmentSubmit index={index} />,
+                title: t('content.editAttachment.header.title')
+              }}
+            />
+          </Stack.Navigator>
+        </SafeAreaView>
+      </KeyboardAvoidingView>
+    )
+  }
 
 export default ComposeEditAttachment

src/screens/Compose/EditAttachment/Image.tsx

@@ -5,16 +5,14 @@ import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useContext } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Dimensions, Image, View } from 'react-native'
-import { PanGestureHandler } from 'react-native-gesture-handler'
+import { Gesture, GestureDetector } from 'react-native-gesture-handler'
 import Animated, {
   Extrapolate,
   interpolate,
   runOnJS,
-  useAnimatedGestureHandler,
   useAnimatedStyle,
   useSharedValue
 } from 'react-native-reanimated'
-import Svg, { Circle, G, Path } from 'react-native-svg'
 import ComposeContext from '../utils/createContext'
 
 export interface Props {
@@ -30,30 +28,19 @@ const ComposeEditAttachmentImage: React.FC<Props> = ({ index }) => {
   const theAttachmentRemote = composeState.attachments.uploads[index].remote!
   const theAttachmentLocal = composeState.attachments.uploads[index].local
 
+  const windowWidth = Dimensions.get('window').width
+
   const imageWidthBase =
     theAttachmentRemote?.meta?.original?.aspect < 1
-      ? Dimensions.get('screen').width *
-        theAttachmentRemote?.meta?.original?.aspect
-      : Dimensions.get('screen').width
-  const padding = (Dimensions.get('screen').width - imageWidthBase) / 2
+      ? windowWidth * theAttachmentRemote?.meta?.original?.aspect
+      : windowWidth
   const imageDimensionis = {
     width: imageWidthBase,
     height:
       imageWidthBase /
-      ((theAttachmentRemote as Mastodon.AttachmentImage)?.meta?.original
-        ?.aspect || 1)
+      ((theAttachmentRemote as Mastodon.AttachmentImage)?.meta?.original?.aspect || 1)
   }
 
-  const panX = useSharedValue(
-    (((theAttachmentRemote as Mastodon.AttachmentImage)?.meta?.focus?.x || 0) *
-      imageDimensionis.width) /
-      2
-  )
-  const panY = useSharedValue(
-    (((theAttachmentRemote as Mastodon.AttachmentImage)?.meta?.focus?.y || 0) *
-      imageDimensionis.height) /
-      2
-  )
   const updateFocus = ({ x, y }: { x: number; y: number }) => {
     composeDispatch({
       type: 'attachment/edit',
@@ -70,46 +57,50 @@ const ComposeEditAttachmentImage: React.FC<Props> = ({ index }) => {
     })
   }
 
-  type PanContext = {
-    startX: number
-    startY: number
-  }
-  const onGestureEvent = useAnimatedGestureHandler({
-    onStart: (_, context: PanContext) => {
-      context.startX = panX.value
-      context.startY = panY.value
-    },
-    onActive: ({ translationX, translationY }, context: PanContext) => {
-      panX.value = context.startX + translationX
-      panY.value = context.startY + translationY
-    },
-    onEnd: ({ translationX, translationY }, context: PanContext) => {
-      runOnJS(updateFocus)({
-        x: (context.startX + translationX) / (imageDimensionis.width / 2),
-        y: (context.startY + translationY) / (imageDimensionis.height / 2)
-      })
-    }
+  const pan = useSharedValue({
+    x:
+      (((theAttachmentRemote as Mastodon.AttachmentImage)?.meta?.focus?.x || 0) *
+        imageDimensionis.width) /
+      2,
+    y:
+      (((theAttachmentRemote as Mastodon.AttachmentImage)?.meta?.focus?.y || 0) *
+        imageDimensionis.height) /
+      2
   })
+  const start = useSharedValue({ x: 0, y: 0 })
+  const gesture = Gesture.Pan()
+    .onBegin(() => {
+      start.value = pan.value
+    })
+    .onUpdate(e => {
+      pan.value = {
+        x: e.translationX + start.value.x,
+        y: e.translationY + start.value.y
+      }
+    })
+    .onEnd(() => {
+      runOnJS(updateFocus)({
+        x: pan.value.x / (imageDimensionis.width / 2),
+        y: pan.value.y / (imageDimensionis.height / 2)
+      })
+    })
+    .onFinalize(() => {
+      start.value = pan.value
+    })
   const styleTransform = useAnimatedStyle(() => {
     return {
       transform: [
         {
           translateX: interpolate(
-            panX.value,
-            [
-              -imageDimensionis.width / 2 + padding,
-              imageDimensionis.width / 2 + padding
-            ],
-            [
-              -imageDimensionis.width / 2 + padding,
-              imageDimensionis.width / 2 + padding
-            ],
+            pan.value.x,
+            [-imageDimensionis.width / 2, imageDimensionis.width / 2],
+            [-imageDimensionis.width / 2, imageDimensionis.width / 2],
             Extrapolate.CLAMP
           )
         },
         {
           translateY: interpolate(
-            panY.value,
+            pan.value.y,
             [-imageDimensionis.height / 2, imageDimensionis.height / 2],
             [-imageDimensionis.height / 2, imageDimensionis.height / 2],
             Extrapolate.CLAMP
@@ -128,47 +119,41 @@ const ComposeEditAttachmentImage: React.FC<Props> = ({ index }) => {
             height: imageDimensionis.height
           }}
           source={{
-            uri: theAttachmentLocal?.uri
-              ? theAttachmentLocal.uri
-              : theAttachmentRemote?.preview_url
+            uri: theAttachmentLocal?.uri ? theAttachmentLocal.uri : theAttachmentRemote?.preview_url
           }}
         />
-        <PanGestureHandler onGestureEvent={onGestureEvent}>
+        <GestureDetector gesture={gesture}>
           <Animated.View
             style={[
               styleTransform,
               {
+                width: windowWidth * 2,
+                height: imageDimensionis.height * 2,
                 position: 'absolute',
-                top: -500 + imageDimensionis.height / 2,
-                left: -500 + imageDimensionis.width / 2
+                left: -windowWidth / 2,
+                top: -imageDimensionis.height / 2,
+                backgroundColor: colors.backgroundOverlayInvert,
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'center'
               }
             ]}
-          >
-            <Svg width='1000' height='1000' viewBox='0 0 1000 1000'>
-              <G stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'>
-                <G>
-                  <Path
-                    d='M1000,0 L1000,1000 L0,1000 L0,0 L1000,0 Z M500,475 C486.192881,475 475,486.192881 475,500 C475,513.807119 486.192881,525 500,525 C513.807119,525 525,513.807119 525,500 C525,486.192881 513.807119,475 500,475 Z'
-                    fill={colors.backgroundOverlayInvert}
-                  />
-                  <Circle
-                    stroke={colors.primaryOverlay}
-                    stroke-width='2'
-                    cx='500'
-                    cy='500'
-                    r='24'
-                  />
-                  <Circle
-                    fill={colors.primaryOverlay}
-                    cx='500'
-                    cy='500'
-                    r='2'
-                  />
-                </G>
-              </G>
-            </Svg>
-          </Animated.View>
-        </PanGestureHandler>
+            children={
+              <View
+                style={{
+                  width: 48,
+                  height: 48,
+                  borderRadius: 24,
+                  borderWidth: 2,
+                  borderColor: colors.primaryOverlay,
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  justifyContent: 'center'
+                }}
+              />
+            }
+          />
+        </GestureDetector>
       </View>
       {screenReaderEnabled ? null : (
         <CustomText

src/screens/Compose/EditAttachment/Root.tsx

@@ -2,7 +2,7 @@ import CustomText from '@components/Text'
 import AttachmentVideo from '@components/Timeline/Shared/Attachment/Video'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React, { useContext, useMemo, useRef } from 'react'
+import React, { useContext, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ScrollView, StyleSheet, TextInput, View } from 'react-native'
 import ComposeContext from '../utils/createContext'
@@ -18,7 +18,7 @@ const ComposeEditAttachmentRoot: React.FC<Props> = ({ index }) => {
   const { composeState, composeDispatch } = useContext(ComposeContext)
   const theAttachment = composeState.attachments.uploads[index].remote!
 
-  const mediaDisplay = useMemo(() => {
+  const mediaDisplay = () => {
     if (theAttachment) {
       switch (theAttachment.type) {
         case 'image':
@@ -34,10 +34,10 @@ const ComposeEditAttachmentRoot: React.FC<Props> = ({ index }) => {
               video={
                 video.local
                   ? ({
-                      url: video.local.uri,
-                      preview_url: video.local.thumbnail,
-                      blurhash: video.remote?.blurhash
-                    } as Mastodon.AttachmentVideo)
+                    url: video.local.uri,
+                    preview_url: video.local.thumbnail,
+                    blurhash: video.remote?.blurhash
+                  } as Mastodon.AttachmentVideo)
                   : (video.remote as Mastodon.AttachmentVideo)
               }
             />
@@ -45,22 +45,13 @@ const ComposeEditAttachmentRoot: React.FC<Props> = ({ index }) => {
       }
     }
     return null
-  }, [])
-
-  const onChangeText = (e: any) =>
-    composeDispatch({
-      type: 'attachment/edit',
-      payload: {
-        ...theAttachment,
-        description: e
-      }
-    })
+  }
 
   const scrollViewRef = useRef<ScrollView>(null)
 
   return (
     <ScrollView ref={scrollViewRef}>
-      {mediaDisplay}
+      {mediaDisplay()}
       <View style={{ padding: StyleConstants.Spacing.Global.PagePadding }}>
         <CustomText
           fontStyle='M'
@@ -86,7 +77,14 @@ const ComposeEditAttachmentRoot: React.FC<Props> = ({ index }) => {
           autoCorrect={false}
           maxLength={1500}
           multiline
-          onChangeText={onChangeText}
+          onChangeText={(e) =>
+            composeDispatch({
+              type: 'attachment/edit',
+              payload: {
+                ...theAttachment,
+                description: e
+              }
+            })}
           placeholder={t('content.editAttachment.content.altText.placeholder')}
           placeholderTextColor={colors.secondary}
           scrollEnabled