diff --git a/PhotoView.android.js b/PhotoView.android.js new file mode 100644 index 0000000..e8892e3 --- /dev/null +++ b/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 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 + } + return null + } +} + +var cfg = { + nativeOnly: { + src: true, + loadingIndicatorSrc: true, + shouldNotifyLoadEvents: true + } +}; +const PhotoViewAndroid = requireNativeComponent('PhotoViewAndroid', PhotoView, cfg); diff --git a/PhotoView.ios.js b/PhotoView.ios.js new file mode 100644 index 0000000..9097720 --- /dev/null +++ b/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 ( + + + + + + ); + } +} \ No newline at end of file diff --git a/README.md b/README.md index 3976223..07b371a 100644 --- a/README.md +++ b/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 diff --git a/android/src/main/java/com/reactnative/photoview/PhotoView.java b/android/src/main/java/com/reactnative/photoview/PhotoView.java index 0df7975..7ae95f8 100644 --- a/android/src/main/java/com/reactnative/photoview/PhotoView.java +++ b/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() { diff --git a/android/src/main/java/com/reactnative/photoview/PhotoViewManager.java b/android/src/main/java/com/reactnative/photoview/PhotoViewManager.java index be49e60..7a0da6c 100644 --- a/android/src/main/java/com/reactnative/photoview/PhotoViewManager.java +++ b/android/src/main/java/com/reactnative/photoview/PhotoViewManager.java @@ -17,13 +17,11 @@ * @version 1.0 */ public class PhotoViewManager extends SimpleViewManager { - 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()); } } diff --git a/index.js b/index.js new file mode 100644 index 0000000..6287c0d --- /dev/null +++ b/index.js @@ -0,0 +1,2 @@ +import PhotoView from './PhotoView' +export default PhotoView \ No newline at end of file