react-native-awesome-gallery

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!

React Native Awesome Gallery

Photos gallery powered by Reanimated v3 and react-native-gesture-handler

Basic usage	With toolbar	Loop

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

Prop	Description	Type	Default
data	Array of items to render	T[]	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.ReactElement	undefined
keyExtractor?	Callback func which provides unique keys for items	(item: T, index: number) => string or number	Takes id or key or _id from Item, otherwise puts Item as key
initialIndex?	The initial image index	number	0
onIndexChange?	Is called when index of active item is changed	(newIndex: number) => void	undefined
numToRender?	Amount of items rendered in gallery simultaneously	number	5
emptySpaceWidth?	Width of empty space between items	number	30
doubleTapScale?	Image scale when double tap is fired	number	3
doubleTapInterval?	Time in milliseconds between single and double tap events	number	500
maxScale?	Maximum scale user can set with gesture	number	6
pinchEnabled?	Is pinch gesture enabled	boolean	true
swipeEnabled?	Is pan gesture enabled	boolean	true
doubleTapEnabled?	Is double tap enabled	boolean	true
disableTransitionOnScaledImage?	Disables transition to next/previous image when scale > 1	boolean	false
hideAdjacentImagesOnScaledImage?	Hides next and previous images when scale > 1	boolean	false
disableVerticalSwipe?	Disables vertical swipe when scale == 1	boolean	false
disableSwipeUp?	Disables swipe up when scale == 1	boolean	false
loop?	Allows user to swipe infinitely. Works when data.length > 1	boolean	false
onScaleChange?	Is called when scale is changed	(scale: number) => void	undefined
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 container	ViewStyle	undefined

Events

Prop	Description	Type
onSwipeToClose()	Fired when user swiped to top/bottom	Function
onTranslationYChange(translationY: number, shouldClose: boolean)	'worklet'; Fired when user is swiping vertically to close the gallery	Worklet
onTap()	Fired when user tap on image	Function
onDoubleTap(toScale: number)	Fired when user double tap on image	Function
onLongPress()	Fired when long press is detected	Function
onScaleStart(scale: number)	Fired when pinch gesture starts	Function
onScaleEnd(scale: number)	Fired when pinch gesture ends. Use case: add haptic feedback when user finished gesture with scale > maxScale or scale < 1	Function
onPanStart()	Fired when pan gesture starts	Function

Methods

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

// ...

const ref = useRef<GalleryRef>(null);

Prop	Description	Type
setIndex	Sets active index	(newIndex: number, animated?: boolean) => void
reset	Resets scale, translation	(animated?: boolean) => void

License

MIT