react-native-images-scrollview

Images View for React Native with pinch, pan, and scroll.

---

Motivation

Provide a no-setup solution for a full screen image scroller with pinch and zoom on each image.

Installation

This library requires reanimated and gesture-handler. Follow their installation instructions.

Usage

// ImageScroller.tsx
import * as React from 'react';
import { ImagesScrollView } from 'react-native-images-scrollview';

interface Props {
  initialIndex?: number;
  urls: string[];
}

export function ImageScroller({ initialIndex, urls }: Props) {
  return <ImagesScrollView initialIndex={initialIndex} urls={urls} />;
}

API

Prop	Type	Optional	Default	Description
urls	string[]	No	N/A	List of image urls to render.
onImagePress	({ uri: string; index: number }) => void	Yes	N/A	Callback that fires on single tap on image.
initialIndex	number	Yes	0	Index of image so start on.
panScrollTriggerThresholdPercentage	number	Yes	0.2	percentage of screen width to use to trigger scroll if image is zoomed and panned beyond threshold.

Example

To run the example app, clone the repo

cd example
yarn install

yarn ios
# or
yarn android

License

MIT

---

Made with create-react-native-library