Awesome Gallery Component For React Native

Description:

An awesome gallery component for React Native, based on Reanimated and react-native-gesture-handler.

Features

  • Zoom to scale
  • Double tap to scale
  • Native iOS feeling (rubber effect, decay animation on pan gesture)
  • RTL support
  • Fully customizable
  • Both orientations (portrait + landscape)
  • Infinite list
  • Supports both iOS and Android.

How to use it:

1. Install and import the component.

# Yarn
$ yarn add react-native-awesome-gallery
# NPM
$ npm i react-native-awesome-gallery
import Gallery from 'react-native-awesome-gallery';

2. Add a basic gallery to the app.

const images = ['1.jpg', '2.jpg', '3.jpg'];
return (
  <Gallery
    images={images}
    onIndexChange={(newIndex) => {
      console.log(newIndex);
    }}
  />
);

3. All available component props.

images: string[];
renderImage?: Props['renderImage'];
initialIndex?: number;
onIndexChange?: (index: number) => void;
numToRender?: number;
emptySpaceWidth?: number;
doubleTapScale?: number;
maxScale?: number;
style?: ViewStyle;

Preview:

Awesome Gallery Component For React Native

Add Comment