# Image pan and zoom for Android ```bash 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 ```jsx import Image from 'react-native-image-zoom' {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://...' } }}> ``` ## 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. ```jsx import {ViewPagerZoom} from 'react-native-image-zoom' {ToastAndroid.show('ON TAP',ToastAndroid.LONG)}} onLoad={()=>{ ToastAndroid.show('onLoad',ToastAndroid.LONG) }} /> {ToastAndroid.show('ON TAP',ToastAndroid.LONG)}} onLoad={()=>{ ToastAndroid.show('onLoad',ToastAndroid.LONG) }} /> ``` ## Installation Installation ------------ Install the npm package [`react-native-image-zoom`](https://www.npmjs.com/package/react-native-image-zoom). Inside your React Native project, run ([example](https://github.com/Anthonyzou/react-native-image-zoom/tree/master/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` : ```java import com.image.zoom.ReactImageZoom; // add this import public class MainActivity extends ReactActivity { //... @Override protected List getPackages() { return Arrays.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. ---

	Stars	Issues	Version	Updated	Created
react-native-image-zoom	115	24	0.32.0	8 years ago	8 years ago
react-native-lightbox	2,804	86	0.8.1	4 years ago	9 years ago
react-native-photo-view			1.5.2	7 years ago	8 years ago

react-native-image-zoom vs react-native-lightbox vs react-native-photo-view

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past