Anthonyzou/react-native-image-zoom

Image pan and zoom for Android

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

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.

---