react-native-image-modal v2.0.4

react-native-image-modal

react-native-image-modal is a simple full size modal image for iOS and Android.

You can pinch zoom-in/out, double-tap zoom-in/out, move and swipe-to-dismiss. It supports react version >= 0.60 and <= 0.59.

Document

• Expo
• Blog
• Installation
• How to use
• Properties
• Demo
• Example code
• Contribute

Expo

This library does not support Expo anymore. Because this library uses react-native-fast-image.

1.0.16 is deprecated, but the version supports Expo.

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

Blog

There are blog posts about how to use react-native-image-modal.

• English: how to use react-native-image-modal
• 한국어: react-native-image-modal 사용법
• 日本語: react-native-image-modal 使い方

Installation

This library use react-native-fast-image, so you need to install it.

npm install --save react-native-fast-image
npx pod-install

And then execute the command to install react-native-image-modal.

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

How to use

Import react-native-image-modal.

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

Add the source code below to where you want to use it.

return (
  <ImageModal
    resizeMode="contain"
    imageBackgroundColor="#000000"
    style={{
      width: 250,
      height: 250,
    }}
    source={{
      uri: 'https://cdn.pixabay.com/photo/2019/07/25/18/58/church-4363258_960_720.jpg',
    }}
  />
);

Properties

You can use All props of React Native Image for the original image(not full size modal image). Below are react-native-image-modal specific properties.

Demo

• Open and close the image modal

• pinch zoom in/out and move

• double tap zoom in/out

• swipe to dismiss

• customize the component with the close button

Example code

You can see the example code and demo.

Clone the repository

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

Install libraries

cd Example
npm install

# iOS
cd ios
pod install

Execute the example project

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

Contribute

You can follow below to contribute react-native-image-modal.

Clone the repository

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

Execute the typescript via npm script

npm install
npm start

Execute the Develop project via the commands below.

cd Develop
npm install

# android
npm run android

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