status-im
/
react-native-image-viewing
mirror of https://github.com/status-im/react-native-image-viewing.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity
Tiny, purely TS, modal component for viewing images 🏙 https://exp.host/@antonkalinin/react-native-image-viewing
60 Commits 4 Branches 12 Tags 22 MiB
TypeScript 98.6%
JavaScript 1.4%
Go to file
dependabot[bot] 49dafd25c4
Bump shelljs from 0.8.4 to 0.8.5 in /example 
Bumps [shelljs](https://github.com/shelljs/shelljs) from 0.8.4 to 0.8.5.
- [Release notes](https://github.com/shelljs/shelljs/releases)
- [Changelog](https://github.com/shelljs/shelljs/blob/master/CHANGELOG.md)
- [Commits](https://github.com/shelljs/shelljs/compare/v0.8.4...v0.8.5)

---
updated-dependencies:
- dependency-name: shelljs
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
 		2022-01-15 07:19:21 +00:00
example Bump shelljs from 0.8.4 to 0.8.5 in /example 2022-01-15 07:19:21 +00:00
src keyExtractor property is added. It will help to implement custom logic to uniquely identifying each item in the virtualized list. (#105) 2021-09-04 20:04:34 +03:00
.gitignore Initial commit 2019-11-28 15:03:46 +01:00
LICENSE Initial commit 2019-11-28 15:03:46 +01:00
README.md keyExtractor property is added. It will help to implement custom logic to uniquely identifying each item in the virtualized list. (#105) 2021-09-04 20:04:34 +03:00
demo.gif Update demo.gif 2020-01-02 14:53:30 +01:00
package.json v0.2.1 2021-09-05 11:02:30 +03:00
tsconfig.json Use build target es2019, rename booleans props (#1) 2019-11-29 11:30:37 +01:00
yarn.lock Bump lodash from 4.17.15 to 4.17.19 (#58) 2020-07-20 11:00:55 +02:00

README.md

react-native-image-viewing

React Native modal component for viewing images as a sliding gallery.

npm version styled with prettier

  • 🔥Pinch zoom for both iOS and Android
  • 🔥Double tap to zoom for both iOS and Android
  • 🔥Supports swipe-to-close animation
  • 🔥Custom header and footer components
  • 🔥Uses VirtualizedList to optimize image loading and rendering

Try with Expo: https://expo.io/@antonkalinin/react-native-image-viewing

Installation

yarn add react-native-image-viewing

or

npm install --save react-native-image-viewing

Usage

import ImageView from "react-native-image-viewing";

const images = [
  {
    uri: "https://images.unsplash.com/photo-1571501679680-de32f1e7aad4",
  },
  {
    uri: "https://images.unsplash.com/photo-1573273787173-0eb81a833b34",
  },
  {
    uri: "https://images.unsplash.com/photo-1569569970363-df7b6160d111",
  },
];

const [visible, setIsVisible] = useState(false);

<ImageView
  images={images}
  imageIndex={0}
  visible={visible}
  onRequestClose={() => setIsVisible(false)}
/>

See Example

Props

Prop name Description Type Required
images Array of images to display ImageSource[] true
keyExtractor Uniqely identifying each image (imageSrc: ImageSource, index: number) => string false
imageIndex Current index of image to display number true
visible Is modal shown or not boolean true
onRequestClose Function called to close the modal function true
onImageIndexChange Function called when image index has been changed function false
onLongPress Function called when image long pressed function (event: GestureResponderEvent, image: ImageSource) false
delayLongPress Delay in ms, before onLongPress is called: default 800 number false
animationType Animation modal presented with: default fade none, fade, slide false
presentationStyle Modal presentation style: default: fullScreen Android: Use overFullScreen to hide StatusBar fullScreen, pageSheet, formSheet, overFullScreen false
backgroundColor Background color of the modal in HEX (#000000EE) string false
swipeToCloseEnabled Close modal with swipe up or down: default true boolean false
doubleTapToZoomEnabled Zoom image by double tap on it: default true boolean false
HeaderComponent Header component, gets current imageIndex as a prop component, function false
FooterComponent Footer component, gets current imageIndex as a prop component, function false
  • type ImageSource = ImageURISource | ImageRequireSource

Contributing

To start contributing clone this repo and then run inside react-native-image-viewing folder:

yarn

Then go inside example folder and run:

yarn & yarn start

This will start packager for expo so you can change /src/ImageViewing and see changes in expo example app.

License

MIT