Fixed #15

src/screens/ImagesViewer.tsx

@@ -1,14 +1,13 @@
 import analytics from '@components/analytics'
-import { HeaderCenter, HeaderRight } from '@components/Header'
+import { HeaderRight } from '@components/Header'
 import { useActionSheet } from '@expo/react-native-action-sheet'
 import { StackScreenProps } from '@react-navigation/stack'
 import CameraRoll from '@react-native-community/cameraroll'
-import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import { findIndex } from 'lodash'
-import React, { useCallback, useLayoutEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { PermissionsAndroid, Platform, Share, StyleSheet } from 'react-native'
+import { PermissionsAndroid, Platform, Share } 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'
@@ -19,13 +18,12 @@ export type ScreenImagesViewerProp = StackScreenProps<
   'Screen-ImagesViewer'
 >
 
-const ScreenImagesViewer = React.memo(
-  ({
+const ScreenImagesViewer = ({
   route: {
     params: { imageUrls, imageIndex }
   },
   navigation
-  }: ScreenImagesViewerProp) => {
+}: ScreenImagesViewerProp) => {
   const { theme } = useTheme()
   const [currentIndex, setCurrentIndex] = useState(
     findIndex(imageUrls, ['imageIndex', imageIndex])
@@ -97,7 +95,7 @@ const ScreenImagesViewer = React.memo(
     )
   }, [currentIndex])
 
-    useLayoutEffect(
+  useEffect(
     () =>
       navigation.setOptions({
         headerTitle: `${currentIndex + 1} / ${imageUrls.length}`,
@@ -115,8 +113,8 @@ const ScreenImagesViewer = React.memo(
 
   const renderImage = useCallback(
     prop => (
-        <SharedElement id={`image.${imageUrls[imageIndex].url}`}>
-          <FastImage {...prop} resizeMode={'contain'} />
+      <SharedElement id={`imageFail.${imageUrls[imageIndex].url}`}>
+        <FastImage {...prop} />
       </SharedElement>
     ),
     []
@@ -124,30 +122,18 @@ const ScreenImagesViewer = React.memo(
 
   return (
     <ImageViewer
-        index={currentIndex}
+      index={imageIndex}
       imageUrls={imageUrls}
-        pageAnimateTime={250}
       enableSwipeDown
       useNativeDriver
       swipeDownThreshold={100}
       renderIndicator={() => <></>}
       saveToLocalByLongPress={false}
       onSwipeDown={() => navigation.goBack()}
-        style={{ flex: 1 }}
-        onChange={index => index !== undefined && setCurrentIndex(index)}
+      onChange={index => index && setCurrentIndex(index)}
       renderImage={renderImage}
-        onLongPress={saveImage}
     />
   )
-  },
-  () => true
-)
-
-const styles = StyleSheet.create({
-  headerCenter: {
-    color: 'white',
-    ...StyleConstants.FontStyle.M
-  }
-})
+}
 
 export default ScreenImagesViewer