first public release — bugfixes and complete Readme file

PhotoView.android.js

@@ -0,0 +1,76 @@
+import React, {Component, PropTypes} from 'react';
+import {requireNativeComponent, View} from 'react-native';
+
+const resolveAssetSource = require('react-native/Libraries/Image/resolveAssetSource');
+
+export default class PhotoView extends Component {
+    static propTypes = {
+        source: PropTypes.oneOfType([
+            PropTypes.shape({
+                uri: PropTypes.string
+            }),
+            // Opaque type returned by require('./image.jpg')
+            PropTypes.number
+        ]),
+        loadingIndicatorSource: PropTypes.oneOfType([
+            PropTypes.shape({
+                uri: PropTypes.string
+            }),
+            // Opaque type returned by require('./image.jpg')
+            PropTypes.number
+        ]),
+        fadeDuration: PropTypes.number,
+        minimumZoomScale: PropTypes.number,
+        maximumZoomScale: PropTypes.number,
+        androidZoomTransitionDuration: PropTypes.number,
+        androidScaleType: PropTypes.oneOf(["center", "centerCrop", "centerInside", "fitCenter", "fitStart", "fitEnd", "fitXY", "matrix"]),
+        onLoadStart: PropTypes.func,
+        onLoad: PropTypes.func,
+        onLoadEnd: PropTypes.func,
+        onTap: PropTypes.func,
+        onViewTap: PropTypes.func,
+        onScale: PropTypes.func,
+        ...View.propTypes
+    };
+
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        const source = resolveAssetSource(this.props.source);
+        var loadingIndicatorSource = resolveAssetSource(this.props.loadingIndicatorSource);
+
+        if (source && source.uri === '') {
+            console.warn('source.uri should not be an empty string');
+        }
+
+        if (this.props.src) {
+            console.warn('The <PhotoView> component requires a `source` property rather than `src`.');
+        }
+
+        if (source && source.uri) {
+            var {onLoadStart, onLoad, onLoadEnd} = this.props;
+
+            var nativeProps = {
+                ...this.props,
+                shouldNotifyLoadEvents: !!(onLoadStart || onLoad || onLoadEnd),
+                src: source.uri,
+                loadingIndicatorSrc: loadingIndicatorSource ? loadingIndicatorSource.uri : null,
+            };
+
+            console.log(JSON.stringify(nativeProps))
+            return <PhotoViewAndroid {...nativeProps} />
+        }
+        return null
+    }
+}
+
+var cfg = {
+    nativeOnly: {
+        src: true,
+        loadingIndicatorSrc: true,
+        shouldNotifyLoadEvents: true
+    }
+};
+const PhotoViewAndroid = requireNativeComponent('PhotoViewAndroid', PhotoView, cfg);

PhotoView.ios.js

@@ -0,0 +1,22 @@
+import React, {Component} from 'react';
+import {
+    View,
+    ScrollView,
+    Image
+} from 'react-native';
+
+
+export default class PhotoView extends Component {
+    render() {
+        return (
+            <View style={{flex:1}}>
+                <ScrollView
+                    maximumZoomScale={this.props.maximumZoomScale}
+                    minimumZoomScale={this.props.minimumZoomScale}
+                    contentContainerStyle={{ alignItems:'center', justifyContent:'center'}}>
+                    <Image {...this.props}/>
+                </ScrollView>
+            </View>
+        );
+    }
+}

README.md

@@ -1,9 +1,10 @@
 # react-native-photo-view
 
 Provides custom Image view for React Native that allows to perform
-pinch-to-zoom on images.
+pinch-to-zoom on images. Works on both iOS and Android.
 
-It uses [PhotoDraweeView](https://github.com/ongakuer/PhotoDraweeView).
+This component uses [PhotoDraweeView](https://github.com/ongakuer/PhotoDraweeView) for Android and native
+Scroll + Image approach on iOS.
 
 ## Installation
 

android/src/main/java/com/reactnative/photoview/PhotoView.java

@@ -5,7 +5,6 @@
 import android.graphics.drawable.Drawable;
 import android.net.Uri;
 import android.support.annotation.NonNull;
-import android.util.AttributeSet;
 import android.view.View;
 import com.facebook.drawee.backends.pipeline.PipelineDraweeControllerBuilder;
 import com.facebook.drawee.controller.BaseControllerListener;
@@ -42,26 +41,12 @@ public class PhotoView extends PhotoDraweeView {
     private int mFadeDurationMs = -1;
     private ControllerListener mControllerListener;
 
-    public PhotoView(Context context, GenericDraweeHierarchy hierarchy) {
-        super(context, hierarchy);
-    }
-
     public PhotoView(Context context) {
         super(context);
     }
 
-    public PhotoView(Context context, AttributeSet attrs) {
-        super(context, attrs);
-    }
-
-    public PhotoView(Context context, AttributeSet attrs, int defStyle) {
-        super(context, attrs, defStyle);
-    }
-
     public void setSource(@Nullable String source,
-                          @NonNull PipelineDraweeControllerBuilder builder,
                           @NonNull ResourceDrawableIdHelper resourceDrawableIdHelper) {
-        mDraweeControllerBuilder = builder;
         mUri = null;
         if (source != null) {
             try {
@@ -139,7 +124,7 @@ public void onFailure(String id, Throwable throwable) {
         mIsDirty = true;
     }
 
-    public void maybeUpdateView() {
+    public void maybeUpdateView(@NonNull PipelineDraweeControllerBuilder builder) {
         if (!mIsDirty) {
             return;
         }
@@ -153,6 +138,7 @@ public void maybeUpdateView() {
                         ? mFadeDurationMs
                         : mIsLocalImage ? 0 : REMOTE_IMAGE_FADE_DURATION_MS);
 
+        mDraweeControllerBuilder = builder;
         mDraweeControllerBuilder.setUri(mUri);
         mDraweeControllerBuilder.setOldController(getController());
         mDraweeControllerBuilder.setControllerListener(new BaseControllerListener<ImageInfo>() {

android/src/main/java/com/reactnative/photoview/PhotoViewManager.java

@@ -17,13 +17,11 @@
  * @version 1.0
  */
 public class PhotoViewManager extends SimpleViewManager<PhotoView> {
-    private static final String REACT_CLASS = "PhotoViewManager";
+    private static final String REACT_CLASS = "PhotoViewAndroid";
 
-    private PipelineDraweeControllerBuilder mDraweeControllerBuilder;
     private ResourceDrawableIdHelper mResourceDrawableIdHelper;
 
     PhotoViewManager(ReactApplicationContext context) {
-        mDraweeControllerBuilder = Fresco.newDraweeControllerBuilder();
         mResourceDrawableIdHelper = new ResourceDrawableIdHelper();
     }
 
@@ -38,8 +36,8 @@ protected PhotoView createViewInstance(ThemedReactContext reactContext) {
     }
 
     @ReactProp(name = "src")
-    public void setSource(final PhotoView view, @Nullable String source) {
-        view.setSource(source, mDraweeControllerBuilder, mResourceDrawableIdHelper);
+    public void setSource(PhotoView view, @Nullable String source) {
+        view.setSource(source, mResourceDrawableIdHelper);
     }
 
     @ReactProp(name = "loadingIndicatorSrc")
@@ -121,6 +119,6 @@ Map getExportedCustomDirectEventTypeConstants() {
     @Override
     protected void onAfterUpdateTransaction(PhotoView view) {
         super.onAfterUpdateTransaction(view);
-        view.maybeUpdateView();
+        view.maybeUpdateView(Fresco.newDraweeControllerBuilder());
     }
 }

index.js

@@ -0,0 +1,2 @@
+import PhotoView from './PhotoView'
+export default PhotoView