Neurotic Programmer Masquerade

    @tuofeng/react-native-image-zoom

    0.33.1 • Public • Published

    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.


    Install

    npm i @tuofeng/react-native-image-zoom

    DownloadsWeekly Downloads

    3

    Version

    0.33.1

    License

    MIT

    Unpacked Size

    48.3 kB

    Total Files

    22

    Last publish

    Collaborators

    • iwater