react-native-image-zoom
react-native-image-zoom copied to clipboard
Anthonyzou
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.
Anthonyzou