react-native-image-modal

2020-12-16 hit count image

let's see how to use react-native-image-modal to show full size image modal and pinch zoom in/out.

Outline

I need a component which is when an image is selected, the image is shown up full size and supported to pinch zoom in/out. I think there are many nice components include this feature, but I’ve made react-native-image-modal component for open source.

This blog post is about how to use react-native-image-modal which I’ve made.

Prview

Let’s see what react-native-image-modal. react-native-image-modal works like below.

react-native-image-modal 동작 화면

Installation

Execute the command below to install react-native-image-modal.

npm install --save react-native-image-modal

How to use

Add the code below to where you want to show full size image with react-native-image-modal.

import ImageModal from 'react-native-image-modal';

And add the code below.


<ImageModal
  swipeToDismiss={false}
  resizeMode="contain"
  imageBackgroundColor="#000000"
  style={{
    width: imageWidth,
    height: 250,
  }}
  source={{
    uri:
      'https://cdn.pixabay.com/photo/2018/01/11/09/52/three-3075752_960_720.jpg',
  }}
/>

Properties

Basically, you can use all React Native Image component props for an original image.(not full size modal image) Below is react-native-image-modal specific Props.

ProprequiredTypeDescription 
swipeToDismissXbooleanset true to swipe to dismiss (default: true) 
imageBackgroundColorXstringbackground color for the original image 
overlayBackgroundColorXstringbackgroud color for the full size modal(default: #000000) 
onLongPressOriginImageX() => voidlong press event callback for the original image 
renderHeaderX(close: () => void) => JSX.ElementArrayYou can customize the header of the full size modal with react native components
renderFooterX(close: () => void) => JSX.ElementArrayYou can customize the footer of the full size modal with react native components
onTapX(eventParams: {locationX: number; locationY: number; pageX: number; pageY: number;}) => voidone tap event callback for the full size modal 
onDoubleTapX() => voiddouble tap event callback for the full size modal 
onLongPressX() => voidlong press event callback for the full size modal 
onOpenX() => voidopen event callback for the full size modal 
didOpenX() => voidevent callback after open for the full size modal 
onMoveX(position: {type: string; positionX: number; positionY: number; scale: number; zoomCurrentDistance: number;}) => voidmove event callback for the full size modal 
responderReleaseX(vx?: number, scale?: number) => voidresponder release event callback for the full size modal 
willCloseX() => voidevent callback before close for the full size modal 
onCloseX() => voidclose event callback for the full size modal 

Features

react-native-image-modal has features like below.

  • Open/close the image modal
react-native-image-modal Open/close the image modal
  • Image pinch zomm in/out and move
react-native-image-modal pinch Image pinch zomm in/out and move
  • Image double taps zoom in/out
react-native-image-modal Image double taps zoom in/out
  • Swipe to close the modal
react-native-image-modal Swipe to close the modal

Example project

Github repository has an example project.

Clone Github repository to check the example source code.

git clone https://github.com/dev-yakuza/react-native-image-modal.git

Install libraries for the example project.

cd Example
npm install

# iOS
cd ios
pod install

Execute the command below to execute the project.

# Example folder
# iOS
npm run ios
# Android
npm run android

Contribute

This is my first open source, so it is not perfect. If you find bugs or wrong code, please give me a pull request.

For contributing easily, I share how to develop this project in here.

  • Clone the project.
git clone https://github.com/dev-yakuza/react-native-image-modal.git
  • Execute the command below to make the development environment and start Typescript.
npm install
npm start
  • Execute the command below to start a project for the development.
cd Develop
npm install

# android
npm run android

# ios
cd ios
pod install
cd ..
npm run ios

Completed

We’ve seen how to use react-native-image-modal which is my first open source project. I hope this is helpful for many people.

Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!

App promotion

You can use the applications that are created by this blog writer Deku.
Deku created the applications with Flutter.

If you have interested, please try to download them for free.

Posts