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 = = =></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 => <View => <Image = = = = /> </View> <View => <Image = = = = /> </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
:
// add this import
TeamLockr image zoom Team Lockr image zoom for react native
These are functions created by the TeamLockr Team created for the TeamLockr platform.