Anthonyzou/react-native-image-zoom

Image pan and zoom for Android https://www.npmjs.com/package/react-native-image-zoom

Download

Step 1. Add the JitPack repository to your build file

Add it in your root settings.gradle at the end of repositories:

	dependencyResolutionManagement {
		repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
		repositories {
			mavenCentral()
			maven { url 'https://jitpack.io' }
		}
	}

Add it in your settings.gradle.kts at the end of repositories:

	dependencyResolutionManagement {
		repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
		repositories {
			mavenCentral()
			maven { url = uri("https://jitpack.io") }
		}
	}

Add to pom.xml

	<repositories>
		<repository>
		    <id>jitpack.io</id>
		    <url>https://jitpack.io</url>
		</repository>
	</repositories>

Add it in your build.sbt at the end of resolvers:

 
    resolvers += "jitpack" at "https://jitpack.io"

Add it in your project.clj at the end of repositories:

 
    :repositories [["jitpack" "https://jitpack.io"]]

Step 2. Add the dependency

	dependencies {
		implementation 'com.github.Anthonyzou:react-native-image-zoom:'
	}

	dependencies {
		implementation("com.github.Anthonyzou:react-native-image-zoom:")
	}

	<dependency>
	    <groupId>com.github.Anthonyzou</groupId>
	    <artifactId>react-native-image-zoom</artifactId>
	    <version></version>
	</dependency>


                            
    libraryDependencies += "com.github.Anthonyzou" % "react-native-image-zoom" % ""


                            
    :dependencies [[com.github.Anthonyzou/react-native-image-zoom ""]]

Readme

Image pan and zoom for Android

npm install --save react-native-image-zoom

Props:

| Property | Type | Default | Description | |---------------|----------|--------------|----------------------------------------------------------------| | source | Object | null | same as the react image format source={{uri: Proptypes.string,thumbnail: Proptypes.string, headers: Proptypes.object, }} or source={require('./...')}| | tintColor | string | null | optional tintColor | | scale | float | null | optional scale amount | | scaleType | string | null | one of center, centerCrop, centerInside, fitCenter, fitStart, fitEnd, fitXY, matrix| | onTap | function | null | optional on tap listener | | onLoad | function | null | optional on load listener | | onScaleChange | function | null | optional on scale change listener | | onMatrixChange | function | null | (Android only) optional on matrix change listener |

Example

import Image from 'react-native-image-zoom'

<Image
  onTap={ ()=> {ToastAndroid.show('ON TAP',ToastAndroid.SHORT)}}
  onLoad={ ()=> {
    ToastAndroid.show('onLoad',ToastAndroid.SHORT)
  }}
  source={{
    uri: this.state.text,
    thumbnail: "http://i.imgur.com/Yl2PB6m.jpg",
    headers: {
      "Referer" : 'http://...'
    }
  }}>
</Image>

Using a view pager

Instead of importing from ViewPagerAndroid import ViewPagerZoom from react-native-image-zoom there is a bug in android view pagers with pinch and zoom.

import {ViewPagerZoom} from 'react-native-image-zoom'
<ViewPagerZoom style={styles.container}>
  <View style={{flex:1, alignItems:'center', justifyContent:'center'}}>
    <Image
      source={{uri:"http://placehold.it/200"}}
      style={{width:width, flex:1,}}
      onTap={()=>{ToastAndroid.show('ON TAP',ToastAndroid.LONG)}}
      onLoad={()=>{
        ToastAndroid.show('onLoad',ToastAndroid.LONG)
      }}
      />
  </View>
  <View style={{flex:1, alignItems:'center', justifyContent:'center'}}>
    <Image
      source={{uri:"http://placehold.it/200"}}
      style={{width:width, flex:1,}}
      onTap={()=>{ToastAndroid.show('ON TAP',ToastAndroid.LONG)}}
      onLoad={()=>{
        ToastAndroid.show('onLoad',ToastAndroid.LONG)
      }}
      />
  </View>
</ViewPagerZoom>

Installation

Install the npm package react-native-image-zoom. Inside your React Native project, run (example):

In android/settings.gradle

include ':react-native-image-zoom'
project(':react-native-image-zoom').projectDir = file('../node_modules/react-native-image-zoom/android')

NOTE : If you have included other libraries in your project, the include line will contain the other dependencies too.

In android/build.gradle add the jitpack repositories.

allprojects {
    repositories {
        mavenLocal()
        jcenter()
        maven { url "https://jitpack.io" } // <--- add this line
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
    }
}

In android/app/build.gradle, add a dependency to ':react-native-image-zoom'

dependencies {
    compile project(':react-native-image-zoom')
}

Next, you need to change the MainActivity of your app to register ReactImageZoom :

import com.image.zoom.ReactImageZoom; // add this import

public class MainActivity extends ReactActivity {
    //...

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new ReactImageZoom() // add this manager
      );
    }
}

TeamLockr image zoom Team Lockr image zoom for react native

These are functions created by the TeamLockr Team created for the TeamLockr platform.