npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-native-image-modal-android-fix

v2.0.1

Published

image fullscreen modal for react native

Downloads

7

Readme

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

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.

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.

| Prop | required | Type | Description | | ------------------------------ | -------- | --------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | renderToHardwareTextureAndroid | X | boolean | It is for Android animation. Default is true. If you don't want to use Hardware Texture on Android, set false. | | isTranslucent | X | boolean | if you use translucent status bar in android, set true to prevent wrong position animation. (In Expo, translucent default is true) | | swipeToDismiss | X | boolean | set true to swipe to dismiss (default: true) | | imageBackgroundColor | X | string | background color for the original image | | overlayBackgroundColor | X | string | background color for the full size modal(default: #000000) | | modalRef | X | ImageDetail | You can use this Ref for closing the Modal programmatically. | | disabled | X | boolean | disable opening the modal | | modalImageStyle | X | ImageStyle | Image Style in Modal | | hideCloseButton | X | boolean | hide hide the default close button | | onLongPressOriginImage | X | () => void | long press event callback for the original image | | renderHeader | X | (close: () => void) => JSX.Element | Array<JSX.Element> | You can customize the header of the full size modal with react native components | | renderFooter | X | (close: () => void) => JSX.Element | Array<JSX.Element> | You can customize the footer of the full size modal with react native components | | onTap | X | (eventParams: {locationX: number; locationY: number; pageX: number; pageY: number;}) => void | one tap event callback for the full size modal | | onDoubleTap | X | () => void | double tap event callback for the full size modal | | onLongPress | X | () => void | long press event callback for the full size modal | | onOpen | X | () => void | open event callback for the full size modal | | didOpen | X | () => void | event callback after open for the full size modal | | onMove | X | (position: {type: string; positionX: number; positionY: number; scale: number; zoomCurrentDistance: number;}) => void | move event callback for the full size modal | | responderRelease | X | (vx?: number, scale?: number) => void | responder release event callback for the full size modal | | willClose | X | () => void | event callback before close for the full size modal | | onClose | X | () => void | close event callback for the full size modal |

Demo

  • Open and close the image modal

open and close image modal

  • pinch zoom in/out and move

pinch zoom in/out and move

  • double tap zoom in/out

double tap zoom in/out

  • swipe to dismiss

swipe to dismiss

  • customize the component with the close button

customize the component

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