Simple Image Modal for React Native

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

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.

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 [email protected]

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

Download Details:

Author: dev-yakuza

Demo: https://dev-yakuza.posstree.com/en/react-native/react-native-image-modal/

Source Code: https://github.com/dev-yakuza/react-native-image-modal

react-native react mobile-apps

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Skenix is providing React Native Development Services with qualified React Native App Developers. Get the best React Native App Development Services.

Are you a mobile app developer looking for more efficient tools for your projects? Mobile app development is getting tougher and tougher as the market continues to grow. As a developer, you need to develop Apps which meet the demands of your users. To achieve this, adopt the right tools, like the React Native development framework.

Looking for top React Native mobile app development company in USA for Startups & Enterprise? Find out the top list of React Native mobile app development company in USA.

Hire top react native app development company in New York to build and develop custom react native mobile apps for Android & iOS with the latest features.