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

Overview

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) => ({ 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

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}`)

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

TODO

  • add image cache
  • export more useful props
You might also like...
Chat Loop is a highly scalable, low-cost, and high performant chat application built on AWS and React leveraging GraphQL subscriptions for real-time communication.
Chat Loop is a highly scalable, low-cost, and high performant chat application built on AWS and React leveraging GraphQL subscriptions for real-time communication.

Chat Loop is a highly scalable, low-cost, and high performant chat application built on AWS and React leveraging GraphQL subscriptions for real-time communication.

FlatList abstraction which uses react-window on the web to create better list performance

react-native-ridge-list FlatList abstraction which uses bvaughn/react-window on the web to create better list performance Supported props ListHeaderCo

⚡️ realtime scalable server performance monitor application built using react, node, redis and socket.io with clusters module.
⚡️ realtime scalable server performance monitor application built using react, node, redis and socket.io with clusters module.

PERFMonitor - Performance Monitoring System Introduction PERFMonitor is a web application that shows you performance and problems of one or more serve

A simple and convenient way to monitor the activity and performance of your servers. Probably more ergonomic than your average terminal htop.
A simple and convenient way to monitor the activity and performance of your servers. Probably more ergonomic than your average terminal htop.

A simple and convenient way to monitor the activity and performance of your servers. Probably more ergonomic than your average terminal htop.

Security, performance, marketing, and design tools — Jetpack is made by WordPress experts to make WP sites safer and faster, and help you grow your traffic.

Jetpack Monorepo This is the Jetpack Monorepo. It contains source code for the Jetpack plugin, the Jetpack composer packages, and other things. How to

Sentry - a developer-first error tracking and performance monitoring platform that helps developers see what actually matters, solve quicker, and learn continuously about their applications
Sentry - a developer-first error tracking and performance monitoring platform that helps developers see what actually matters, solve quicker, and learn continuously about their applications

Sentry is a developer-first error tracking and performance monitoring platform that helps developers see what actually matters, solve quicker, and learn continuously about their applications.

Web frontend of the NLW heat 2021 project, used: React; Typescript/TSX; Vite; Socket.io; Scss/Sass; and other libs for react (axios, context...).
Web frontend of the NLW heat 2021 project, used: React; Typescript/TSX; Vite; Socket.io; Scss/Sass; and other libs for react (axios, context...).

This is the web frontend of the NLW heat 2021 project, carried out by rocketseat. It is free to use, and any questions or errors, please do not hesitate to consult me, or post an issue. In this code we used: React; Typescript/TSX; Vite; Socket.io; Scss/Sass; and other libs for react (axios, context...).

A CRM build with react-admin, used as a demo for the capabilities of the framework

A CRM build with react-admin, used as a demo for the capabilities of the framework

A Spotify Clone which built with ReactJS. 3rd party API integration, user authentication, spotify API, responsive design, material-ui, react context api are used to built it.

Spotify Clone with ReactJS In this Spotify Clone application you can log in to the application with your spotify account and see your own playlist. Sp

Owner
刘力瑞
刘力瑞
Voby - A high-performance framework with fine-grained observable-based reactivity for building rich applications.

Voby A high-performance framework with fine-grained observable-based reactivity for building rich applications. Features This works similarly to Solid

Voby 615 Jan 4, 2023
Challenge [Frontend Mentor] - In this challenge, JavaScript was used to filter jobs based on the selected categories. Technologies used: HTML5, CSS3 and React.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Rui Neto 11 Apr 13, 2022
İnstagram Clone.You can sign in, sign up, upload image, make comment 📷 Used ReactJS, Material UI, Firebase, Firestore Database

İnstagram Clone.You can sign in, sign up, upload image, make comment ?? Used ReactJS, Material UI, Firebase, Firestore Database

null 22 Apr 20, 2022
İnstagram Clone.You can sign in, sign up, upload image, make comment 📷 Used ReactJS, Material UI, Firebase, Firestore Database

?? instagram-clone This is a instagram clone. You can sign in, sign up, upload image, make comment ?? ⚡ LIVE To check out the live demo of this app AB

null 14 Jun 6, 2021
React Native Nested/Thread Comments with line indicators, collapse views with Reanimated 2 and draw lines with react-native-svg

## React Native Nested Comments With Line Indicators ### Uses reanimated 2 to collapse comments via [`reanimated-collapsible-helpers`](https://github

Efstathios Ntonas 30 Feb 10, 2023
React Icons Viewer - allows you to search through the react-icons and it allows you to download the icon as png/svg

React Icons Viewer - allows you to search through the react-icons and it allows you to download the icon as png/svg

null 2 Jul 14, 2022
A web viewer for Anime Girls Holding Programming Books made using React, Chakra UI and Vite.

A web viewer for Anime Girls Holding Programming Books made using React, Chakra UI and Vite.

ashish 67 Jan 1, 2023
Twitch-chat-viewer: A desktop application built with React + typescript and Electron JS

A desktop application built with React + typescript and Electron JS to check your Twitch without having to use the searcher and being in top of all windows.

guillerp 3 Apr 27, 2022
A test project light weight youtube viewer using Youtube API, React, Redux, Typescript

This is a test project light weight youtube viewer using Youtube API, React, Redux, Typescript Technologies Project is created with: React: 18.1.0 Rea

Aris Karagiannis 3 Aug 6, 2022
🎵 The frontend of Oud, an online music streaming service that is a high quality clone of Spotify with all its functionalities built using ReactJS, React-Router, Bootstrap.

Oud Front-End Table of Contents About the Project Build with Getting Started Installation Running Screenshots Videos File Structure Unit Testing Runni

Ahmed Ashraf 48 Sep 29, 2022