0.3.9 • Published 28 days ago

react-native-awesome-gallery v0.3.9

Weekly downloads
-
License
MIT
Repository
github
Last release
28 days ago

npm version

Support

If you love using React Native Awesome Gallery and would like to show your appreciation, you can support the project by buying me a coffee. Your support helps me keep the project alive and continuously improving. Every little bit counts!

"Buy Me A Coffee"

Supported 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.

Installation

Note: Starting from v0.3.6 using Reanimated v3 is required

First you have to follow installation instructions of Reanimated v3 and react-native-gesture-handler

yarn add react-native-awesome-gallery

Expo is supported since SDK 40. More information here

Usage

Check out an example folder for example with Expo Image

import Gallery from 'react-native-awesome-gallery';

// ...

const images = ['https://image1', 'https://image2'];

return (
  <Gallery
    data={images}
    onIndexChange={(newIndex) => {
      console.log(newIndex);
    }}
  />
);

Props

PropDescriptionTypeDefault
dataArray of items to renderT[]undefined
renderItem?Callback func which can be used to render custom image component, e.g FastImage. NOTE: You have to call setImageDimensions({width, height}) parameter after image is loaded(renderItemInfo: {item: T, index: number, setImageDimensions: Function}) => React.ReactElementundefined
keyExtractor?Callback func which provides unique keys for items(item: T, index: number) => string or numberTakes id or key or _id from Item, otherwise puts Item as key
initialIndex?The initial image indexnumber0
onIndexChange?Is called when index of active item is changed(newIndex: number) => voidundefined
numToRender?Amount of items rendered in gallery simultaneouslynumber5
emptySpaceWidth?Width of empty space between itemsnumber30
doubleTapScale?Image scale when double tap is firednumber3
doubleTapInterval?Time in milliseconds between single and double tap eventsnumber500
maxScale?Maximum scale user can set with gesturenumber6
pinchEnabled?Is pinch gesture enabledbooleantrue
doubleTapEnabled?Is double tap enabledbooleantrue
disableTransitionOnScaledImage?Disables transition to next/previous image when scale > 1booleanfalse
hideAdjacentImagesOnScaledImage?Hides next and previous images when scale > 1booleanfalse
disableVerticalSwipe?Disables vertical swipe when scale == 1booleanfalse
disableSwipeUp?Disables swipe up when scale == 1booleanfalse
loop?Allows user to swipe infinitely. Works when data.length > 1booleanfalse
onScaleChange?Is called when scale is changed(scale: number) => voidundefined
onScaleChangeRange?Shows range of scale in which onScaleChange is called{start: number, end: number}undefined
containerDimensions?Dimensions object for the View that wraps gallery.{width: number, height: number}value returned from useWindowDimensions() hook.
style?Style of containerViewStyleundefined

Events

PropDescriptionType
onSwipeToCloseFired when user swiped to top/bottomFunction
onTapFired when user tap on imageFunction
onDoubleTapFired when user double tap on imageFunction
onLongPressFired when long press is detectedFunction
onScaleStartFired when pinch gesture startsFunction
onScaleEnd(scale: number)Fired when pinch gesture ends. Use case: add haptic feedback when user finished gesture with scale > maxScale or scale < 1Function
onPanStartFired when pan gesture startsFunction

Methods

import Gallery, { GalleryRef } from 'react-native-awesome-gallery';

// ...

const ref = useRef<GalleryRef>(null);
PropDescriptionType
setIndexSets active index(newIndex: number, animated?: boolean) => void
resetResets scale, translation(animated?: boolean) => void

License

MIT

0.3.9

28 days ago

0.3.8

5 months ago

0.3.7

6 months ago

0.3.6

9 months ago

0.3.0

2 years ago

0.3.5

2 years ago

0.3.2

2 years ago

0.3.1

2 years ago

0.3.4

2 years ago

0.3.3

2 years ago

0.2.6

3 years ago

0.2.5

3 years ago

0.2.4

3 years ago

0.2.3

3 years ago

0.2.2

3 years ago

0.2.1

3 years ago

0.2.0

3 years ago

0.1.7

3 years ago

0.1.6

3 years ago

0.1.5

3 years ago

0.1.0

3 years ago

0.1.2

3 years ago

0.1.1

3 years ago

0.1.4

3 years ago

0.1.3

3 years ago

0.0.9

3 years ago

0.0.8

3 years ago

0.0.7

3 years ago

0.0.6

3 years ago

0.0.5

3 years ago

0.0.4

3 years ago

0.0.3

3 years ago

0.0.2

3 years ago

0.0.1

3 years ago