react-native-reanimated-viewer

A high performance image viewer in react-native created from react-native-reanimated.

Install

1npm install react-native-reanimated-viewer react-native-reanimated react-native-gesture-handler --save
2cd ios & pod install

Then you need follow the extra steps to finish the installation: react-native-reanimated & react-native-gesture-handler.

Example

example.gif

1import React, { memo, useRef, useMemo } from 'react';
2import { View, Image } from 'react-native';
3import { ImageWrapper, ImageViewer } from 'react-native-reanimated-viewer';
4const ImageViewerPage = () => {
5  const imageRef = useRef(null);
6  const mockData = useMemo(
7    () => [
8      {
9        smallUrl:
10          'https://img2.baidu.com/it/u=1835117106,152654887&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=556',
11        url: 'https://img2.baidu.com/it/u=1835117106,152654887&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=556',
12      },
13      {
14        smallUrl:
15          'https://img1.baidu.com/it/u=139191814,3489949748&fm=253&fmt=auto&app=138&f=JPEG?w=491&h=491',
16        url: 'https://img1.baidu.com/it/u=139191814,3489949748&fm=253&fmt=auto&app=138&f=JPEG?w=491&h=491',
17      },
18      {
19        smallUrl:
20          'https://img0.baidu.com/it/u=2926715223,1445444764&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
21        url: 'https://img0.baidu.com/it/u=2926715223,1445444764&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
22      },
23    ],
24    [],
25  );
26  return (
27    <>
28      <ImageViewer
29        ref={imageRef}
30        data={mockData.map((el) => ({ key: `key-${el.url}`, source: { uri: el.url } }))}
31      />
32      <View style={{ flexDirection: 'row' }}>
33        {mockData.map((el, index) => (
34          <ImageWrapper
35            key={el.smallUrl}
36            viewerRef={imageRef}
37            index={index}
38            source={{
39              uri: el.smallUrl,
40            }}
41          >
42            <Image
43              source={{
44                uri: el.smallUrl,
45              }}
46              style={{ width: 100, height: 100 }}
47            />
48          </ImageWrapper>
49        ))}
50      </View>
51    </>
52  );
53};
54export default memo(ImageViewerPage);

Notice

You need to wrap your image components used by ImageWrapper in this package.

Props

ImageViewer

name	required	type	default	description	Example
data	true	{key: string; source: ImageURISource}[]	undefined	The original source & key of image	[{key: 'image-1', source: {uri:'http://***.***/***.png'}}]
renderCustomComponent	false	(_: {item: {key: string; source: ImageURISource}; index: number;}) => ReactElement	undefined	The custom Element in ImageViewer	({index}) => <Text>current index is {index}</Text>
onLongPress	false	(_: {item: {key: string; source: ImageURISource}; index: number;}) => void	undefined	Once you pressed image viewer for a long time, the function will active	({index}) => console.log(`${index} pressed long`)
imageResizeMode	false	ImageResizeMode	undefined	The resizeMode props of image in viewer	"contain"
onChange	false	(currentIndex: number) => void	undefined	When the viewer finished swiping, the function will be called	(currentIndex) => console.log(`current index is ${currentIndex}`)
dragUpToCloseEnabled	false	boolean	undefined	Enable dragging up to close the viewer	true
maxScale	false	number	3	Image maximum magnification	3
doubleTapScale	false	number	2	The magnification when double-clicking the image	2
shouldCloseViewer	false	(_: {gesture: GestureEnum; index: number; imageData: ImageViewerItemData; loaded: boolean; }) => boolean	undefined	Control whether the viewer can be closed under certain gestures	({gesture}) => gesture === GestureEnum.Tap
originalLayoutOffset	false	{pageX?: number; pageY?: number}	undefined	The original image layout measures error sometimes, you can use this prop to fix it	{pageY: 100}

ImageWrapper

name	required	type	default	description	Example
viewerRef	true	MutableRefObject<ImageViewerRef>	undefined	The ref of imageViewer	[{url:'http://***.***/***.png'}]
index	true	number	undefined	The index of current ImageWrapper	({index}) => <Text>current index is {index}</Text>
source	true	ImageURISource	undefined	The inner component image's url	{uri: 'https://***.***/***.png'}
style	false	ViewStyle	undefined	The style of image wrapper	{margin: 10}
onPress	false	() => boolean or undefined	undefined	Once you pressed image, the function will active.(If it returns false, the viewer will not show.)	() => console.log('pressed')
wrapperProps	false	ViewProps	undefined	You can custom the container props	{onLongPress: () => console.warn('longPressed')}

TODO

• add image cache
• export more useful props