React Native Before After

Supported features

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

Installation

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

For now install using git from this repo using yarn.
Instructions are comming soon.

Expo is supported since SDK 40. More information here

Usage

Comming Soon

Props

Prop	Description	Type	Default
data (will be updated soon)	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
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
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
onTap	Fired when user tap on image	Function
onDoubleTap	Fired when user double tap on image	Function
onLongPress	Fired when long press is detected	Function
onScaleStart	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

Comming Soon

License

MIT