jobtoday / React Native Image Viewing
Licence: mit
Tiny, purely TS, modal component for viewing images 🏙
Stars: ✭ 289
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to React Native Image Viewing
Picview
Fast Picture Viewer with compact UI, that can be hidden. Features image effects, galleries, image info and more. The app can automatically adjusts itself to your screen.
Stars: ✭ 259 (-10.38%)
Mutual labels: image-viewer, image-gallery
Simplelightbox
Touch-friendly image lightbox for mobile and desktop
Stars: ✭ 744 (+157.44%)
Mutual labels: pinch-to-zoom, image-viewer
React Native Image View
Modal component to view images with zoom
Stars: ✭ 273 (-5.54%)
Mutual labels: pinch-to-zoom, image-viewer
gallery-server
Beautiful and powerful yet simple local image viewer on your PC or mobile.
Stars: ✭ 16 (-94.46%)
Mutual labels: image-viewer
Fuskr
Fuskr - an image gallery extension for Google Chrome
Stars: ✭ 17 (-94.12%)
Mutual labels: image-gallery
mpv-image-viewer
Configuration, scripts and tips for using mpv as an image viewer
Stars: ✭ 157 (-45.67%)
Mutual labels: image-viewer
chevereto-free
Self-hosted Image Hosting solution. Start your own Flickr/imgur alternative with your own rules.
Stars: ✭ 2,522 (+772.66%)
Mutual labels: image-gallery
Vue Image Lightbox
A Vue component to display an image gallery lightbox
Stars: ✭ 258 (-10.73%)
Mutual labels: image-gallery
TNImageView-Android
Android Library for making scale-able and rotatable image views or giving this power to your own image view. This repo has been depreciated.
Stars: ✭ 18 (-93.77%)
Mutual labels: pinch-to-zoom
angular-super-gallery
AngularJS super image gallery
Stars: ✭ 46 (-84.08%)
Mutual labels: image-gallery
react-pinch-and-zoom
A react container component with pinch-to-zoom gesture interaction.
Stars: ✭ 33 (-88.58%)
Mutual labels: pinch-to-zoom
react-quick-pinch-zoom
A react component that providing multi-touch gestures for zooming and dragging on any DOM element.
Stars: ✭ 124 (-57.09%)
Mutual labels: pinch-to-zoom
swiftui-image-viewer
Image viewer built in SwiftUI for both local and remote images.
Stars: ✭ 180 (-37.72%)
Mutual labels: image-viewer
jpegview
Fork of JPEGView by David Kleiner - fast and highly configurable viewer/editor for JPEG, BMP, PNG, WEBP, TGA, GIF and TIFF images with a minimal GUI. Basic on-the-fly image processing is provided - allowing adjusting typical parameters as sharpness, color balance, rotation, perspective, contrast and local under-/overexposure.
Stars: ✭ 250 (-13.49%)
Mutual labels: image-viewer
Angular2 Image Gallery
Image Gallery built with Angular 8+, node.js and GraphicsMagick
Stars: ✭ 288 (-0.35%)
Mutual labels: image-gallery
image-viewer
A simple image viewer with some editing functionality.
Stars: ✭ 31 (-89.27%)
Mutual labels: image-viewer
react-native-image-viewing
React Native modal component for viewing images as a sliding gallery.
- 🔥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 |
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].