mainam-react-native-photo-viewer

Provides custom Image view for React Native that allows to perform pinch-to-zoom on images. Works on both iOS and Android.

This component uses PhotoDraweeView for Android and MWPhotobrowser on iOS.

Usage

import PhotoViewer from 'mainam-react-native-photo-viewer';

Basics:

    <PhotoViewer urls={["https://facebook.github.io/react/img/logo_og.png"]} index={0} style={{flex: 1}}/>

npm install mainam-react-native-photo-viewer

Automatic installation

rnpm link mainam-react-native-photo-viewer

Manual installation

1. Add these lines to android/settings.gradle

include ':mainam-react-native-photo-viewer'
project(':mainam-react-native-photo-viewer').projectDir = new File(rootProject.projectDir, '../node_modules/mainam-react-native-photo-viewer/android')

2. Add one more dependency to android/app/build.gradle

dependencies {
    compile project(':mainam-react-native-photo-viewer')
}

3. Add it to your MainActivity.java for RN < 0.29 and to your MainApplication.java for RN >=0.29

To register PhotoViewPackage, you need to change the MainActivity or MainApplication depending on React Native version of your app:

import com.reactnative.photoview.PhotoViewPackage;

// ...

public class MainActivity extends ReactActivity {
    // ...

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new PhotoViewPackage() // add this manager
      );
    }

    // ...
}