🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
DemoInstallSign in
Socket

react-native-reanimated-viewer

Package Overview
Dependencies
Maintainers
0
Versions
30
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-reanimated-viewer

A high performance image viewer in react-native used by react-native-reanimated

1.4.3
latest
Source
npm
Version published
Weekly downloads
201
-31.86%
Maintainers
0
Weekly downloads
 
Created
Source

react-native-reanimated-viewer Monthly download Total downloads

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

Install

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

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

Example

example.gif

example

import React, { memo, useRef, useMemo } from 'react';
import { View, Image } from 'react-native';
import { ImageWrapper, ImageViewer } from 'react-native-reanimated-viewer';
const ImageViewerPage = () => {
  const imageRef = useRef(null);
  const mockData = useMemo(
    () => [
      {
        smallUrl:
          'https://img2.baidu.com/it/u=1835117106,152654887&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=556',
        url: 'https://img2.baidu.com/it/u=1835117106,152654887&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=556',
      },
      {
        smallUrl:
          'https://img1.baidu.com/it/u=139191814,3489949748&fm=253&fmt=auto&app=138&f=JPEG?w=491&h=491',
        url: 'https://img1.baidu.com/it/u=139191814,3489949748&fm=253&fmt=auto&app=138&f=JPEG?w=491&h=491',
      },
      {
        smallUrl:
          'https://img0.baidu.com/it/u=2926715223,1445444764&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
        url: 'https://img0.baidu.com/it/u=2926715223,1445444764&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
      },
    ],
    [],
  );
  return (
    <>
      <ImageViewer
        ref={imageRef}
        data={mockData.map((el) => ({ key: `key-${el.url}`, source: { uri: el.url } }))}
      />
      <View style={{ flexDirection: 'row' }}>
        {mockData.map((el, index) => (
          <ImageWrapper
            key={el.smallUrl}
            viewerRef={imageRef}
            index={index}
            source={{
              uri: el.smallUrl,
            }}
          >
            <Image
              source={{
                uri: el.smallUrl,
              }}
              style={{ width: 100, height: 100 }}
            />
          </ImageWrapper>
        ))}
      </View>
    </>
  );
};
export default memo(ImageViewerPage);

Notice

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

Props

ImageViewer

namerequiredtypedefaultdescriptionExample
datatrue{key: string; source: ImageURISource}[]undefinedThe original source & key of image[{key: 'image-1', source: {uri:'http://***.***/***.png'}}]
renderCustomComponentfalse(_: {item: {key: string; source: ImageURISource}; index: number;}) => ReactElementundefinedThe custom Element in ImageViewer({index}) => <Text>current index is {index}</Text>
onLongPressfalse(_: {item: {key: string; source: ImageURISource}; index: number;}) => voidundefinedOnce you pressed image viewer for a long time, the function will active({index}) => console.log(`${index} pressed long`)
imageResizeModefalseImageResizeModeundefinedThe resizeMode props of image in viewer"contain"
onChangefalse(currentIndex: number) => voidundefinedWhen the viewer finished swiping, the function will be called(currentIndex) => console.log(`current index is ${currentIndex}`)
dragUpToCloseEnabledfalsebooleanundefinedEnable dragging up to close the viewertrue
maxScalefalsenumber3Image maximum magnification3
doubleTapScalefalsenumber2The magnification when double-clicking the image2
shouldCloseViewerfalse(_: {gesture: GestureEnum; index: number; imageData: ImageViewerItemData; loaded: boolean; }) => booleanundefinedControl whether the viewer can be closed under certain gestures({gesture}) => gesture === GestureEnum.Tap
originalLayoutOffsetfalse{pageX?: number; pageY?: number}undefinedThe original image layout measures error sometimes, you can use this prop to fix it{pageY: 100}

ImageWrapper

namerequiredtypedefaultdescriptionExample
viewerReftrueMutableRefObject<ImageViewerRef>undefinedThe ref of imageViewer[{url:'http://***.***/***.png'}]
indextruenumberundefinedThe index of current ImageWrapper({index}) => <Text>current index is {index}</Text>
sourcetrueImageURISourceundefinedThe inner component image's url{uri: 'https://***.***/***.png'}
stylefalseViewStyleundefinedThe style of image wrapper{margin: 10}
onPressfalse() => boolean or undefinedundefinedOnce you pressed image, the function will active.(If it returns false, the viewer will not show.)() => console.log('pressed')
wrapperPropsfalseViewPropsundefinedYou can custom the container props{onLongPress: () => console.warn('longPressed')}

TODO

  • add image cache
  • export more useful props

Keywords

react-native

FAQs

Package last updated on 27 Jan 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts