From e20db34bcda26585f79fba72460de78941e1f6b4 Mon Sep 17 00:00:00 2001 From: Akshay Date: Thu, 6 Oct 2016 00:34:49 +0530 Subject: [PATCH 01/12] Bug fix and zoom Images --- lib/media/Photo.js | 6 +++--- package.json | 3 ++- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/lib/media/Photo.js b/lib/media/Photo.js index 5831e10..56fa148 100644 --- a/lib/media/Photo.js +++ b/lib/media/Photo.js @@ -1,15 +1,15 @@ import React, { PropTypes, Component } from 'react'; import { Dimensions, - Image, StyleSheet, View, TouchableWithoutFeedback, - ProgressBarAndroid, + ActivityIndicator, Platform, } from 'react-native'; import * as Progress from 'react-native-progress'; +import Image from 'react-native-image-zoom' export default class Photo extends Component { @@ -150,7 +150,7 @@ export default class Photo extends Component { } if (Platform.OS === 'android') { - return ; + return ; } const ProgressElement = useCircleProgress ? Progress.Circle : Progress.Bar; diff --git a/package.json b/package.json index f145205..ec15032 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "author": "Halil Bilir ", "homepage": "https://github.com/halilb/react-native-photo-browser#readme", "dependencies": { - "react-native-progress": "^3.0.0" + "react-native-progress": "^3.0.0", + "react-native-image-zoom": "^0.31.0" } } From cc46dcec8c9df4834416ff3205ab968753db3d73 Mon Sep 17 00:00:00 2001 From: Akshay Date: Thu, 6 Oct 2016 01:00:41 +0530 Subject: [PATCH 02/12] Neogrowth help --- README.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 01fabbe..c5823a1 100644 --- a/README.md +++ b/README.md @@ -4,12 +4,15 @@ A full screen image gallery with captions, selections and grid view support for The component has both iOS and Android support. +### Neogrowth Contribution +Neogrowth bring the support for zoom in and zoom out of the image. For which the following is the dependency + ![](screenshots/photo-browser.gif) ![](screenshots/screenshot-1.png) ![](screenshots/screenshot-2.png) -### Installation +### Installation ```npm install react-native-photo-browser --save``` ### Properties From 4e6bf3f986e9c1c33be86c8b1f6f845abdd0788d Mon Sep 17 00:00:00 2001 From: Akshay Date: Thu, 6 Oct 2016 01:04:04 +0530 Subject: [PATCH 03/12] Neogrowth help --- README.md | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index c5823a1..b2b82a9 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,11 @@ A full screen image gallery with captions, selections and grid view support for The component has both iOS and Android support. ### Neogrowth Contribution -Neogrowth bring the support for zoom in and zoom out of the image. For which the following is the dependency +Neogrowth bring the support for zoom in and zoom out of the image and some minor bug fixes are taken care. For which the following is the dependency. + +[react-native-image-zoom](https://github.com/Anthonyzou/react-native-image-zoom/) + + ![](screenshots/photo-browser.gif) @@ -49,7 +53,7 @@ const media = { #### Android -Built-in [ProgressBarAndroid](https://facebook.github.io/react-native/docs/progressbarandroid.html) component is used for Android. Any additional configuration is not needed. +Built-in [ActivityIndicator](https://facebook.github.io/react-native/docs/activityindicator.html) component is used for Android. Any additional configuration is not needed. [ProgressBarAndroid](https://facebook.github.io/react-native/docs/progressbarandroid.html) is deprecated now. #### iOS From 7168b1e7657c272947983996d2748d7bf6a1915f Mon Sep 17 00:00:00 2001 From: Akshay Date: Thu, 6 Oct 2016 01:10:44 +0530 Subject: [PATCH 04/12] Neogrowth help --- README.md | 61 +++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 59 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index b2b82a9..966a536 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,64 @@ Neogrowth bring the support for zoom in and zoom out of the image and some minor ![](screenshots/screenshot-2.png) ### Installation -```npm install react-native-photo-browser --save``` +```npm install https://github.com/NeoGrowth-Credit-Pvt-Limited/react-native-photo-browser.git --save``` + +## android/setting.gradle +Add the following line +```include ':react-native-image-zoom' +project(':react-native-image-zoom').projectDir = file('../node_modules/react-native-image-zoom/android')``` + +## android/build.gradle +add ```compile project``` in dependencies +```dependencies { + . + . + compile project(':react-native-image-zoom') +}``` + +## android/app/build.gradle +```allprojects { + repositories { + mavenLocal() + jcenter() + maven { url "https://jitpack.io" } // <-- Add this + maven { + // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm + url "$rootDir/../node_modules/react-native/android" + } + } +}``` + +## MainApplication.java +```import com.image.zoom.ReactImageZoom; // add this import + + +public class MainApplication extends Application implements ReactApplication { + + private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { + @Override + protected boolean getUseDeveloperSupport() { + return BuildConfig.DEBUG; + } + + @Override + protected List getPackages() { + return Arrays.asList( + new MainReactPackage(), + new RNSimpleAlertDialogPackage(), + . + . + . + new ReactImageZoom() // add this manager + ); + } + }; + + @Override + public ReactNativeHost getReactNativeHost() { + return mReactNativeHost; + } +}``` ### Properties @@ -69,7 +126,7 @@ See [PhotoBrowserExample.js](Example/PhotoBrowserExample.js) file. Follow those steps to run the example: -1. Clone the repo `git clone https://github.com/halilb/react-native-photo-browser && cd react-native-photo-browser/Example` +1. Clone the repo `git clone https://github.com/NeoGrowth-Credit-Pvt-Limited/react-native-photo-browser/Example` 2. Install dependencies `npm install` 3. Follow [official instructions](https://facebook.github.io/react-native/docs/getting-started.html) to run the example project in a simulator or device. From 9d39e6a5cd16871214d80b407a83eb7adf4602a3 Mon Sep 17 00:00:00 2001 From: Akshay Date: Thu, 6 Oct 2016 01:11:47 +0530 Subject: [PATCH 05/12] Neogrowth help --- README.md | 108 +++++++++++++++++++++++++++--------------------------- 1 file changed, 54 insertions(+), 54 deletions(-) diff --git a/README.md b/README.md index 966a536..855f57e 100644 --- a/README.md +++ b/README.md @@ -19,62 +19,62 @@ Neogrowth bring the support for zoom in and zoom out of the image and some minor ### Installation ```npm install https://github.com/NeoGrowth-Credit-Pvt-Limited/react-native-photo-browser.git --save``` -## android/setting.gradle -Add the following line -```include ':react-native-image-zoom' -project(':react-native-image-zoom').projectDir = file('../node_modules/react-native-image-zoom/android')``` - -## android/build.gradle -add ```compile project``` in dependencies -```dependencies { - . - . - compile project(':react-native-image-zoom') -}``` - -## android/app/build.gradle -```allprojects { - repositories { - mavenLocal() - jcenter() - maven { url "https://jitpack.io" } // <-- Add this - maven { - // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm - url "$rootDir/../node_modules/react-native/android" - } - } -}``` - -## MainApplication.java -```import com.image.zoom.ReactImageZoom; // add this import - - -public class MainApplication extends Application implements ReactApplication { - - private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { - @Override - protected boolean getUseDeveloperSupport() { - return BuildConfig.DEBUG; - } - - @Override - protected List getPackages() { - return Arrays.asList( - new MainReactPackage(), - new RNSimpleAlertDialogPackage(), + #### android/setting.gradle + Add the following line + ```include ':react-native-image-zoom' + project(':react-native-image-zoom').projectDir = file('../node_modules/react-native-image-zoom/android')``` + + #### android/build.gradle + add ```compile project``` in dependencies + ```dependencies { . . - . - new ReactImageZoom() // add this manager - ); - } - }; - - @Override - public ReactNativeHost getReactNativeHost() { - return mReactNativeHost; - } -}``` + compile project(':react-native-image-zoom') + }``` + + #### android/app/build.gradle + ```allprojects { + repositories { + mavenLocal() + jcenter() + maven { url "https://jitpack.io" } // <-- Add this + maven { + // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm + url "$rootDir/../node_modules/react-native/android" + } + } + }``` + + #### MainApplication.java + ```import com.image.zoom.ReactImageZoom; // add this import + + + public class MainApplication extends Application implements ReactApplication { + + private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { + @Override + protected boolean getUseDeveloperSupport() { + return BuildConfig.DEBUG; + } + + @Override + protected List getPackages() { + return Arrays.asList( + new MainReactPackage(), + new RNSimpleAlertDialogPackage(), + . + . + . + new ReactImageZoom() // add this manager + ); + } + }; + + @Override + public ReactNativeHost getReactNativeHost() { + return mReactNativeHost; + } + }``` ### Properties From 2dd2c71533bc1428f26f9b3b1ba2a7be3d2d641d Mon Sep 17 00:00:00 2001 From: Akshay Date: Thu, 6 Oct 2016 01:12:34 +0530 Subject: [PATCH 06/12] Neogrowth help --- README.md | 108 +++++++++++++++++++++++++++--------------------------- 1 file changed, 54 insertions(+), 54 deletions(-) diff --git a/README.md b/README.md index 855f57e..f9736d5 100644 --- a/README.md +++ b/README.md @@ -19,62 +19,62 @@ Neogrowth bring the support for zoom in and zoom out of the image and some minor ### Installation ```npm install https://github.com/NeoGrowth-Credit-Pvt-Limited/react-native-photo-browser.git --save``` - #### android/setting.gradle - Add the following line - ```include ':react-native-image-zoom' - project(':react-native-image-zoom').projectDir = file('../node_modules/react-native-image-zoom/android')``` - - #### android/build.gradle - add ```compile project``` in dependencies - ```dependencies { +#### android/setting.gradle +Add the following line +```include ':react-native-image-zoom' +project(':react-native-image-zoom').projectDir = file('../node_modules/react-native-image-zoom/android')``` + +#### android/build.gradle +add ```compile project``` in dependencies +```dependencies { + . + . + compile project(':react-native-image-zoom') +}``` + +#### android/app/build.gradle +```allprojects { + repositories { + mavenLocal() + jcenter() + maven { url "https://jitpack.io" } // <-- Add this + maven { + // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm + url "$rootDir/../node_modules/react-native/android" + } + } +}``` + +#### MainApplication.java +```import com.image.zoom.ReactImageZoom; // add this import + + +public class MainApplication extends Application implements ReactApplication { + + private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { + @Override + protected boolean getUseDeveloperSupport() { + return BuildConfig.DEBUG; + } + + @Override + protected List getPackages() { + return Arrays.asList( + new MainReactPackage(), + new RNSimpleAlertDialogPackage(), . . - compile project(':react-native-image-zoom') - }``` - - #### android/app/build.gradle - ```allprojects { - repositories { - mavenLocal() - jcenter() - maven { url "https://jitpack.io" } // <-- Add this - maven { - // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm - url "$rootDir/../node_modules/react-native/android" - } - } - }``` - - #### MainApplication.java - ```import com.image.zoom.ReactImageZoom; // add this import - - - public class MainApplication extends Application implements ReactApplication { - - private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { - @Override - protected boolean getUseDeveloperSupport() { - return BuildConfig.DEBUG; - } - - @Override - protected List getPackages() { - return Arrays.asList( - new MainReactPackage(), - new RNSimpleAlertDialogPackage(), - . - . - . - new ReactImageZoom() // add this manager - ); - } - }; - - @Override - public ReactNativeHost getReactNativeHost() { - return mReactNativeHost; - } - }``` + . + new ReactImageZoom() // add this manager + ); + } + }; + + @Override + public ReactNativeHost getReactNativeHost() { + return mReactNativeHost; + } +}``` ### Properties From d5cd8e6852c2218151ac1bb8ddcdf3cea450d63e Mon Sep 17 00:00:00 2001 From: Akshay Date: Thu, 6 Oct 2016 01:13:29 +0530 Subject: [PATCH 07/12] Neogrowth help --- README.md | 50 ++++++++++++++++++++++++-------------------------- 1 file changed, 24 insertions(+), 26 deletions(-) diff --git a/README.md b/README.md index f9736d5..7dc2562 100644 --- a/README.md +++ b/README.md @@ -46,35 +46,33 @@ add ```compile project``` in dependencies }``` #### MainApplication.java -```import com.image.zoom.ReactImageZoom; // add this import +``` import com.image.zoom.ReactImageZoom; // add this import + public class MainApplication extends Application implements ReactApplication { + private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { + @Override + protected boolean getUseDeveloperSupport() { + return BuildConfig.DEBUG; + } -public class MainApplication extends Application implements ReactApplication { - - private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { - @Override - protected boolean getUseDeveloperSupport() { - return BuildConfig.DEBUG; - } - - @Override - protected List getPackages() { - return Arrays.asList( - new MainReactPackage(), - new RNSimpleAlertDialogPackage(), - . - . - . - new ReactImageZoom() // add this manager - ); - } - }; + @Override + protected List getPackages() { + return Arrays.asList( + new MainReactPackage(), + new RNSimpleAlertDialogPackage(), + . + . + . + new ReactImageZoom() // add this manager + ); + } + }; - @Override - public ReactNativeHost getReactNativeHost() { - return mReactNativeHost; - } -}``` + @Override + public ReactNativeHost getReactNativeHost() { + return mReactNativeHost; + } + }``` ### Properties From 0b84126ea4943b0371c0155491fc09f378315830 Mon Sep 17 00:00:00 2001 From: Akshay Date: Thu, 6 Oct 2016 01:14:17 +0530 Subject: [PATCH 08/12] Neogrowth help --- README.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 7dc2562..3d6a92d 100644 --- a/README.md +++ b/README.md @@ -46,8 +46,9 @@ add ```compile project``` in dependencies }``` #### MainApplication.java -``` import com.image.zoom.ReactImageZoom; // add this import - public class MainApplication extends Application implements ReactApplication { + + import com.image.zoom.ReactImageZoom; // add this import + public class MainApplication extends Application implements ReactApplication { private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { @Override @@ -72,7 +73,7 @@ add ```compile project``` in dependencies public ReactNativeHost getReactNativeHost() { return mReactNativeHost; } - }``` + } ### Properties From 412de0b7e810e164ee5ad1edd9e99fa3582c3c9a Mon Sep 17 00:00:00 2001 From: Akshay Date: Thu, 6 Oct 2016 01:15:26 +0530 Subject: [PATCH 09/12] Neogrowth help --- README.md | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 3d6a92d..e55a731 100644 --- a/README.md +++ b/README.md @@ -21,29 +21,29 @@ Neogrowth bring the support for zoom in and zoom out of the image and some minor #### android/setting.gradle Add the following line -```include ':react-native-image-zoom' -project(':react-native-image-zoom').projectDir = file('../node_modules/react-native-image-zoom/android')``` + include ':react-native-image-zoom' + project(':react-native-image-zoom').projectDir = file('../node_modules/react-native-image-zoom/android') #### android/build.gradle add ```compile project``` in dependencies -```dependencies { - . - . - compile project(':react-native-image-zoom') -}``` + dependencies { + . + . + compile project(':react-native-image-zoom') + } #### android/app/build.gradle -```allprojects { - repositories { - mavenLocal() - jcenter() - maven { url "https://jitpack.io" } // <-- Add this - maven { - // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm - url "$rootDir/../node_modules/react-native/android" + allprojects { + repositories { + mavenLocal() + jcenter() + maven { url "https://jitpack.io" } // <-- Add this + maven { + // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm + url "$rootDir/../node_modules/react-native/android" + } } } -}``` #### MainApplication.java From d8fb180339fe15200413c38ad102c270eda96652 Mon Sep 17 00:00:00 2001 From: Akshay Date: Thu, 6 Oct 2016 01:16:47 +0530 Subject: [PATCH 10/12] Neogrowth help --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index e55a731..ef20be4 100644 --- a/README.md +++ b/README.md @@ -21,11 +21,13 @@ Neogrowth bring the support for zoom in and zoom out of the image and some minor #### android/setting.gradle Add the following line + include ':react-native-image-zoom' project(':react-native-image-zoom').projectDir = file('../node_modules/react-native-image-zoom/android') #### android/build.gradle -add ```compile project``` in dependencies +add `compile project` in dependencies + dependencies { . . From edfd8bcce0ae01f00b34f461540ac3caaea89ea6 Mon Sep 17 00:00:00 2001 From: Akshay Date: Fri, 14 Oct 2016 23:33:11 +0530 Subject: [PATCH 11/12] React native photo view added --- .../com/photobrowserexample/MainActivity.java | 4 ++-- lib/media/Photo.js | 23 +++++++++++-------- package.json | 2 +- 3 files changed, 16 insertions(+), 13 deletions(-) diff --git a/Example/android/app/src/main/java/com/photobrowserexample/MainActivity.java b/Example/android/app/src/main/java/com/photobrowserexample/MainActivity.java index b8923f9..f83bf3b 100644 --- a/Example/android/app/src/main/java/com/photobrowserexample/MainActivity.java +++ b/Example/android/app/src/main/java/com/photobrowserexample/MainActivity.java @@ -22,7 +22,7 @@ protected String getMainComponentName() { * Returns whether dev mode should be enabled. * This enables e.g. the dev menu. */ - @Override + protected boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; } @@ -31,7 +31,7 @@ protected boolean getUseDeveloperSupport() { * A list of packages used by the app. If the app uses additional views * or modules besides the default ones, add more packages here. */ - @Override + protected List getPackages() { return Arrays.asList( new MainReactPackage() diff --git a/lib/media/Photo.js b/lib/media/Photo.js index 56fa148..7f1a0e7 100644 --- a/lib/media/Photo.js +++ b/lib/media/Photo.js @@ -6,10 +6,11 @@ import { TouchableWithoutFeedback, ActivityIndicator, Platform, + Image } from 'react-native'; import * as Progress from 'react-native-progress'; -import Image from 'react-native-image-zoom' +import PhotoView from 'react-native-photo-view'; export default class Photo extends Component { @@ -239,15 +240,17 @@ export default class Photo extends Component { return ( {error ? this._renderErrorIcon() : this._renderProgressIndicator()} - + {this._renderSelectionButton()} ); diff --git a/package.json b/package.json index ec15032..9f4c79f 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,6 @@ "homepage": "https://github.com/halilb/react-native-photo-browser#readme", "dependencies": { "react-native-progress": "^3.0.0", - "react-native-image-zoom": "^0.31.0" + "react-native-photo-view": "^1.2.0" } } From c9a1b36099fd6a261e6020f59f82ace2eb79ba1d Mon Sep 17 00:00:00 2001 From: Akshay Date: Fri, 14 Oct 2016 23:44:11 +0530 Subject: [PATCH 12/12] Readme updated --- README.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index ef20be4..fb86746 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ The component has both iOS and Android support. ### Neogrowth Contribution Neogrowth bring the support for zoom in and zoom out of the image and some minor bug fixes are taken care. For which the following is the dependency. -[react-native-image-zoom](https://github.com/Anthonyzou/react-native-image-zoom/) +[react-native-photo-view](https://github.com/alwx/react-native-photo-view/) @@ -19,11 +19,11 @@ Neogrowth bring the support for zoom in and zoom out of the image and some minor ### Installation ```npm install https://github.com/NeoGrowth-Credit-Pvt-Limited/react-native-photo-browser.git --save``` -#### android/setting.gradle +#### android/settings.gradle Add the following line - include ':react-native-image-zoom' - project(':react-native-image-zoom').projectDir = file('../node_modules/react-native-image-zoom/android') + include ':react-native-photo-view' + project(':react-native-photo-view').projectDir = file('../node_modules/react-native-photo-view/android') #### android/build.gradle add `compile project` in dependencies @@ -31,7 +31,7 @@ add `compile project` in dependencies dependencies { . . - compile project(':react-native-image-zoom') + compile project(':react-native-photo-view') } #### android/app/build.gradle @@ -49,7 +49,7 @@ add `compile project` in dependencies #### MainApplication.java - import com.image.zoom.ReactImageZoom; // add this import + import com.reactnative.photoview.PhotoViewPackage; // add this import public class MainApplication extends Application implements ReactApplication { private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { @@ -66,7 +66,7 @@ add `compile project` in dependencies . . . - new ReactImageZoom() // add this manager + new PhotoViewPackage() // add this manager ); } };