iOS almost working

src/screens/ImagesViewer.tsx

@@ -0,0 +1,93 @@
+import analytics from '@components/analytics'
+import { HeaderRight } from '@components/Header'
+import { StackScreenProps } from '@react-navigation/stack'
+import { StyleConstants } from '@utils/styles/constants'
+import { useTheme } from '@utils/styles/ThemeManager'
+import { findIndex } from 'lodash'
+import React, { useCallback, useLayoutEffect, useState } from 'react'
+import { Platform, Share, StyleSheet, Text } from 'react-native'
+import FastImage from 'react-native-fast-image'
+import ImageViewer from 'react-native-image-zoom-viewer'
+import { SharedElement } from 'react-navigation-shared-element'
+
+export type ScreenImagesViewerProp = StackScreenProps<
+  Nav.RootStackParamList,
+  'Screen-ImagesViewer'
+>
+
+const ScreenImagesViewer = React.memo(
+  ({
+    route: {
+      params: { imageUrls, imageIndex }
+    },
+    navigation
+  }: ScreenImagesViewerProp) => {
+    const { theme } = useTheme()
+    const [currentIndex, setCurrentIndex] = useState(
+      findIndex(imageUrls, ['imageIndex', imageIndex])
+    )
+
+    const onPress = useCallback(() => {
+      analytics('imageviewer_share_press')
+      switch (Platform.OS) {
+        case 'ios':
+          return Share.share({ url: imageUrls[currentIndex].url })
+        case 'android':
+          return Share.share({ message: imageUrls[currentIndex].url })
+      }
+    }, [currentIndex])
+
+    useLayoutEffect(
+      () =>
+        navigation.setOptions({
+          headerTitle: () => (
+            <Text
+              style={[styles.headerCenter, { color: theme.primaryOverlay }]}
+            >
+              {currentIndex + 1} / {imageUrls.length}
+            </Text>
+          ),
+          headerRight: () => (
+            <HeaderRight content='Share' native={false} onPress={onPress} />
+          )
+        }),
+      [currentIndex]
+    )
+
+    const renderImage = useCallback(
+      prop => (
+        <SharedElement id={`image.${imageUrls[imageIndex].url}`}>
+          <FastImage {...prop} resizeMode={'contain'} />
+        </SharedElement>
+      ),
+      []
+    )
+
+    return (
+      <ImageViewer
+        index={currentIndex}
+        imageUrls={imageUrls}
+        pageAnimateTime={250}
+        enableSwipeDown
+        useNativeDriver
+        swipeDownThreshold={100}
+        renderIndicator={() => <></>}
+        saveToLocalByLongPress={false}
+        onSwipeDown={() => navigation.goBack()}
+        style={{ flex: 1 }}
+        onChange={index => index !== undefined && setCurrentIndex(index)}
+        renderImage={renderImage}
+      />
+    )
+  },
+  () => true
+)
+
+const styles = StyleSheet.create({
+  headerCenter: {
+    color: 'white',
+    ...StyleConstants.FontStyle.M
+  }
+})
+
+export default ScreenImagesViewer