Package Exports

@duocvo/react-native-gesture-image
@duocvo/react-native-gesture-image/lib/commonjs/index.js
@duocvo/react-native-gesture-image/lib/module/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@duocvo/react-native-gesture-image) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@duocvo/react-native-gesture-image

This library provides a highly customizable and performant image viewer component for React Native applications. It supports advanced gestures such as pinch-to-zoom, panning, and double-tap to zoom in and out, making it ideal for creating rich, interactive image viewing experiences. Built with react-native-gesture-handler for handling advanced touch gestures like pinch and pan, and react-native-reanimated for providing smooth animations for zooming and panning.

IOS	ANDROID

Prerequisites

This library relies on the following dependencies to enable gesture and animation support (you need to setup these library below)

react-native-gesture-handler: Handles advanced touch gestures like pinch and pan.
react-native-reanimated: Provides smooth animations for zooming and panning.

Installation

npm install @duocvo/react-native-gesture-image
#or
yarn add @duocvo/react-native-gesture-image

Usage

import Gallery from '@duocvo/react-native-gesture-image';

// Example usage of Gallery
export default function App() {
  const images = [
    { uri: 'https://picsum.photos/200/300' },
    { uri: 'https://picsum.photos/200/300' },
    { uri: 'https://picsum.photos/200/300' },
  ]
  return (
    <View style={styles.container}>
      <Gallery data={images} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

Props

Gallery

Prop	Type	Default	Description	Required
`data`	`array`	`[]`	Array of image sources	Yes
`style`	`object`		Custom style for the gallery container	No
`imageStyle`	`object`		Custom style for each image	No
`containerStyle`	`object`		Custom style for the gallery container	No
`contentContainerStyle`	`object`		Custom style for the content container	No
`backdropColor`	`string`	`black`	Background color of the gallery	No

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library