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

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

import images from '@assets/images';

export default function App() {
  return <ImagesScrollView urls={images} />;
}

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