Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More

react-native-reanimated-viewer

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


Version published
Weekly downloads
128
decreased by-21.47%
Maintainers
1
Weekly downloads
 
Created

react-native-reanimated-viewer Monthly download Total downloads

A high performance image viewer in react-native used by 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

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 => ({ url: 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{url: string}[]undefinedThe original url of image[{url:'http://***.***/***.png'}]
renderCustomComponentfalse(_: {item: {url: string}; index: number;}) => ReactElementundefinedThe custom Element in ImageViewer({index}) => <Text>current index is {index}</Text>
onLongPressfalse(_: {item: {url: string}; index: number;}) => voidundefinedOnce you pressed image viewer for a long time, the function will active({index}) => console.log(`${index} pressed long`)

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')
viewPropsfalseViewPropsundefinedYou can custom the container props{onLongPress: () => console.warn('longPressed')}

FAQs

Package last updated on 19 Feb 2023

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