From 41928151cda4470c39e84c67efc213f7ee6b9421 Mon Sep 17 00:00:00 2001 From: alvaromb Date: Thu, 23 Nov 2017 15:22:08 +0100 Subject: [PATCH 01/11] updated Readme --- README.md | 73 +++++++++++++++++++++++++++++++++++++------------------ 1 file changed, 50 insertions(+), 23 deletions(-) diff --git a/README.md b/README.md index 7a7d419..c17749c 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,20 @@ - # react-native-interactive-image-library +

+ + +

+ +A React Native component to display a gallery of images. + +

+iOS +Android +

+ ## Getting started -`$ npm install react-native-interactive-image-library --save` +`$ yarn add react-native-interactive-image-library` ### Mostly automatic installation @@ -11,35 +22,51 @@ ### Manual installation - #### iOS -1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]` -2. Go to `node_modules` ➜ `react-native-interactive-image-library` and add `RNIKInteractiveImageLibrary.xcodeproj` -3. In XCode, in the project navigator, select your project. Add `libRNIKInteractiveImageLibrary.a` to your project's `Build Phases` ➜ `Link Binary With Libraries` +1. In Xcode, in the project navigator, right click `Libraries` ➜ `Add Files to + [your project's name]` +2. Go to `node_modules` ➜ `react-native-interactive-image-library` and add + `RNIKInteractiveImageLibrary.xcodeproj` +3. In XCode, in the project navigator, select your project. Add + `libRNIKInteractiveImageLibrary.a` to your project's `Build Phases` ➜ `Link + Binary With Libraries` 4. Run your project (`Cmd+R`)< #### Android -1. Open up `android/app/src/main/java/[...]/MainActivity.java` - - Add `import com.apsl.interfacekit.RNIKInteractiveImageLibraryPackage;` to the imports at the top of the file - - Add `new RNIKInteractiveImageLibraryPackage()` to the list returned by the `getPackages()` method -2. Append the following lines to `android/settings.gradle`: - ``` - include ':react-native-interactive-image-library' - project(':react-native-interactive-image-library').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-interactive-image-library/android') - ``` -3. Insert the following lines inside the dependencies block in `android/app/build.gradle`: - ``` - compile project(':react-native-interactive-image-library') - ``` - +No additional setup needed. ## Usage + ```javascript -import RNIKInteractiveImageLibrary from 'react-native-interactive-image-library'; +import ImageBrowser from 'react-native-interactive-image-gallery'; -// TODO: What to do with the module? -RNIKInteractiveImageLibrary; +class Images extends React.PureComponent { + render() { + const imageURLs: Array = this.props.images.map( + (img: Object, index: number) => ({ + URI: img.uri, + id: String(index), + title: img.title, + description: img.description + }) + ); + return ; + } +} ``` - \ No newline at end of file + +## API + +Work in progress. + +## License + +MIT. + +## Author + +Álvaro Medina Ballester `` + +Built with 💛 by [APSL](https://github.com/apsl). From ac8d9caeb19694b8fbf2d9818325f4e0d9cc1b2d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=81lvaro=20Medina=20Ballester?= Date: Thu, 23 Nov 2017 15:23:34 +0100 Subject: [PATCH 02/11] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index c17749c..078298e 100644 --- a/README.md +++ b/README.md @@ -8,8 +8,8 @@ A React Native component to display a gallery of images.

-iOS -Android +iOS +Android

## Getting started From a9e2a26492698359d1d5fd783766dd6021f4f19f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=81lvaro=20Medina=20Ballester?= Date: Thu, 23 Nov 2017 15:23:59 +0100 Subject: [PATCH 03/11] Update README.md --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 078298e..1a5f21d 100644 --- a/README.md +++ b/README.md @@ -10,6 +10,8 @@ A React Native component to display a gallery of images.

iOS Android +Scroll demo +

## Getting started From 5c5d5cf52de40f86432f5470ff3c2f3cbbf8e27d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=81lvaro=20Medina=20Ballester?= Date: Thu, 23 Nov 2017 15:25:30 +0100 Subject: [PATCH 04/11] Update README.md --- README.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 1a5f21d..c071a4e 100644 --- a/README.md +++ b/README.md @@ -8,10 +8,8 @@ A React Native component to display a gallery of images.

-iOS -Android -Scroll demo - +iOS +Android

## Getting started From 16947cb228b34f171c00421d0a6ab02d4029d6bc Mon Sep 17 00:00:00 2001 From: alvaromb Date: Thu, 23 Nov 2017 15:31:36 +0100 Subject: [PATCH 05/11] Improved docs --- README.md | 23 ++++++++++++++++------ package-lock.json | 50 +++++++++++++++++++++++++++++++---------------- 2 files changed, 50 insertions(+), 23 deletions(-) diff --git a/README.md b/README.md index c071a4e..13f2afe 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,8 @@ -# react-native-interactive-image-library +# react-native-interactive-image-gallery

- - + +

A React Native component to display a gallery of images. @@ -14,11 +14,11 @@ A React Native component to display a gallery of images. ## Getting started -`$ yarn add react-native-interactive-image-library` +`$ yarn addreact-native-interactive-image-gallery` ### Mostly automatic installation -`$ react-native link react-native-interactive-image-library` +`$ react-native link react-native-interactive-image-gallery` ### Manual installation @@ -26,7 +26,7 @@ A React Native component to display a gallery of images. 1. In Xcode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]` -2. Go to `node_modules` ➜ `react-native-interactive-image-library` and add +2. Go to `node_modules` ➜ `react-native-interactive-image-gallery` and add `RNIKInteractiveImageLibrary.xcodeproj` 3. In XCode, in the project navigator, select your project. Add `libRNIKInteractiveImageLibrary.a` to your project's `Build Phases` ➜ `Link @@ -61,6 +61,17 @@ class Images extends React.PureComponent { Work in progress. +## Aknowledgements + +Thanks to Eric Vicenti (https://github.com/ericvicenti) and +[his talk at React Native EU 2017](https://www.youtube.com/watch?v=7emqc7yf-Zg) +called "Practical Hacks for delightful interactions" for the inspiration and the +iOS animations present in this library + +The main idea of the library and some parts of the code were inspired or taken +from his presentation, available at +[this repo](https://github.com/ericvicenti/react-native-eu-2017). + ## License MIT. diff --git a/package-lock.json b/package-lock.json index b0a1f1c..ab4b6c7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,13 +1,15 @@ { - "name": "react-native-interactive-image-library", + "name": "react-native-interactive-image-gallery", "version": "1.0.0", "lockfileVersion": 1, "requires": true, "dependencies": { "@types/babel-core": { "version": "6.25.3", - "resolved": "https://registry.npmjs.org/@types/babel-core/-/babel-core-6.25.3.tgz", - "integrity": "sha512-OlUjfM+Qv+XwcaucEiekBIhfAYe4q4ruvQZZcCkOtQZ27Hykxm1LLY2s0mE6LtP9XQt6x+TUvS70KW2e8Mz0ZA==", + "resolved": + "https://registry.npmjs.org/@types/babel-core/-/babel-core-6.25.3.tgz", + "integrity": + "sha512-OlUjfM+Qv+XwcaucEiekBIhfAYe4q4ruvQZZcCkOtQZ27Hykxm1LLY2s0mE6LtP9XQt6x+TUvS70KW2e8Mz0ZA==", "dev": true, "requires": { "@types/babel-generator": "6.25.1", @@ -19,8 +21,10 @@ }, "@types/babel-generator": { "version": "6.25.1", - "resolved": "https://registry.npmjs.org/@types/babel-generator/-/babel-generator-6.25.1.tgz", - "integrity": "sha512-nKNz9Ch4WP2TFZjQROhxqqS2SCk0OoDzGazJI6S+2sGgW9P7N4o3vluZAXFuPEnRqtz2A0vrrkK3tjQktxIlRw==", + "resolved": + "https://registry.npmjs.org/@types/babel-generator/-/babel-generator-6.25.1.tgz", + "integrity": + "sha512-nKNz9Ch4WP2TFZjQROhxqqS2SCk0OoDzGazJI6S+2sGgW9P7N4o3vluZAXFuPEnRqtz2A0vrrkK3tjQktxIlRw==", "dev": true, "requires": { "@types/babel-types": "6.25.1" @@ -28,8 +32,10 @@ }, "@types/babel-template": { "version": "6.25.0", - "resolved": "https://registry.npmjs.org/@types/babel-template/-/babel-template-6.25.0.tgz", - "integrity": "sha512-TtyfVlrprX92xSuKa8D//7vFz5kBJODBw5IQ1hQXehqO+me26vt1fyNxOZyXhUq2a7jRyT72V8p68IyH4NEZNA==", + "resolved": + "https://registry.npmjs.org/@types/babel-template/-/babel-template-6.25.0.tgz", + "integrity": + "sha512-TtyfVlrprX92xSuKa8D//7vFz5kBJODBw5IQ1hQXehqO+me26vt1fyNxOZyXhUq2a7jRyT72V8p68IyH4NEZNA==", "dev": true, "requires": { "@types/babel-types": "6.25.1", @@ -38,8 +44,10 @@ }, "@types/babel-traverse": { "version": "6.25.2", - "resolved": "https://registry.npmjs.org/@types/babel-traverse/-/babel-traverse-6.25.2.tgz", - "integrity": "sha512-SO/YPiHOYApenZJecbw1Psd2lopAQ9Wc9HnFevEvM1mOoNXHglV8mHgVkCQJRIrn6UgWqHE/QfvQ1uG1crNgHA==", + "resolved": + "https://registry.npmjs.org/@types/babel-traverse/-/babel-traverse-6.25.2.tgz", + "integrity": + "sha512-SO/YPiHOYApenZJecbw1Psd2lopAQ9Wc9HnFevEvM1mOoNXHglV8mHgVkCQJRIrn6UgWqHE/QfvQ1uG1crNgHA==", "dev": true, "requires": { "@types/babel-types": "6.25.1" @@ -47,14 +55,18 @@ }, "@types/babel-types": { "version": "6.25.1", - "resolved": "https://registry.npmjs.org/@types/babel-types/-/babel-types-6.25.1.tgz", - "integrity": "sha512-7Z6r20+HE0viAFhsW0d/UrC1K2tTlpXzGpNlYm8MmCv8z5PbAacFIshrM/MjlGRa5SBqxu2socpy8FHntwZKng==", + "resolved": + "https://registry.npmjs.org/@types/babel-types/-/babel-types-6.25.1.tgz", + "integrity": + "sha512-7Z6r20+HE0viAFhsW0d/UrC1K2tTlpXzGpNlYm8MmCv8z5PbAacFIshrM/MjlGRa5SBqxu2socpy8FHntwZKng==", "dev": true }, "@types/babylon": { "version": "6.16.2", - "resolved": "https://registry.npmjs.org/@types/babylon/-/babylon-6.16.2.tgz", - "integrity": "sha512-+Jty46mPaWe1VAyZbfvgJM4BAdklLWxrT5tc/RjvCgLrtk6gzRY6AOnoWFv4p6hVxhJshDdr2hGVn56alBp97Q==", + "resolved": + "https://registry.npmjs.org/@types/babylon/-/babylon-6.16.2.tgz", + "integrity": + "sha512-+Jty46mPaWe1VAyZbfvgJM4BAdklLWxrT5tc/RjvCgLrtk6gzRY6AOnoWFv4p6hVxhJshDdr2hGVn56alBp97Q==", "dev": true, "requires": { "@types/babel-types": "6.25.1" @@ -63,19 +75,23 @@ "@types/jest": { "version": "21.1.6", "resolved": "https://registry.npmjs.org/@types/jest/-/jest-21.1.6.tgz", - "integrity": "sha512-/qrwhjCeZ8vZy/TPXm56A3baMMUDPfUMkhOGZP3M7dgPCGPZSX/zSieM7jYPuhX3kMcMfsYuvsFIt23u7Ypu2g==", + "integrity": + "sha512-/qrwhjCeZ8vZy/TPXm56A3baMMUDPfUMkhOGZP3M7dgPCGPZSX/zSieM7jYPuhX3kMcMfsYuvsFIt23u7Ypu2g==", "dev": true }, "@types/react": { "version": "16.0.22", "resolved": "https://registry.npmjs.org/@types/react/-/react-16.0.22.tgz", - "integrity": "sha512-d8STysuhEgZ3MxMqY8PlTcUj2aJljBtQ+94SixlQdFgP3c5gh0fBBW5r73RxHuZqKohYvHb9nNbqGQfco7ReoQ==", + "integrity": + "sha512-d8STysuhEgZ3MxMqY8PlTcUj2aJljBtQ+94SixlQdFgP3c5gh0fBBW5r73RxHuZqKohYvHb9nNbqGQfco7ReoQ==", "dev": true }, "@types/react-test-renderer": { "version": "16.0.0", - "resolved": "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-16.0.0.tgz", - "integrity": "sha512-tbuDajGYu8tEBAGVXZqh0Hmfm+pZA9P+4UfMIWTvzO4PA8yBbL2TCsZNSky+S74oAKy96Z/PBdDTj22iPMYqcQ==", + "resolved": + "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-16.0.0.tgz", + "integrity": + "sha512-tbuDajGYu8tEBAGVXZqh0Hmfm+pZA9P+4UfMIWTvzO4PA8yBbL2TCsZNSky+S74oAKy96Z/PBdDTj22iPMYqcQ==", "dev": true, "requires": { "@types/react": "16.0.22" From 74a434f8f46ef173f3fff27636e94acf077b6aac Mon Sep 17 00:00:00 2001 From: alvaromb Date: Thu, 23 Nov 2017 15:35:58 +0100 Subject: [PATCH 06/11] Updated README --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 13f2afe..bc5826a 100644 --- a/README.md +++ b/README.md @@ -59,7 +59,8 @@ class Images extends React.PureComponent { ## API -Work in progress. +Work in progress 🚧👷🏻. Some features are experimental and the API will change in +the future. ## Aknowledgements From ac2867e2cb6cebfd12da0998240483321dd4099a Mon Sep 17 00:00:00 2001 From: alvaromb Date: Thu, 23 Nov 2017 15:37:01 +0100 Subject: [PATCH 07/11] v0.1.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index cb29c45..51bcc48 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-interactive-image-gallery", - "version": "1.0.0", + "version": "0.1.0", "description": "A React Native image gallery browser with interactive animations", "main": "index.js", From be8b144439f881778264fc116db1083617874aed Mon Sep 17 00:00:00 2001 From: alvaromb Date: Tue, 28 Nov 2017 16:03:53 +0100 Subject: [PATCH 08/11] closes #1 Solves flickering issue under iOS --- lib/ImageBrowser.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/lib/ImageBrowser.js b/lib/ImageBrowser.js index 6100aa4..68e1772 100644 --- a/lib/ImageBrowser.js +++ b/lib/ImageBrowser.js @@ -2,7 +2,13 @@ import React from 'react' import PropTypes from 'prop-types' -import { Modal, Animated, StyleSheet, SafeAreaView } from 'react-native' +import { + Modal, + Platform, + Animated, + StyleSheet, + SafeAreaView +} from 'react-native' import ImageListContainer from './ImageListContainer' import ImageViewer from './ImageViewer' @@ -104,7 +110,7 @@ class ImageBrowser extends React.Component { Date: Tue, 28 Nov 2017 16:04:10 +0100 Subject: [PATCH 09/11] v0.1.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 51bcc48..10c6068 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-interactive-image-gallery", - "version": "0.1.0", + "version": "0.1.1", "description": "A React Native image gallery browser with interactive animations", "main": "index.js", From 85697c08a0095a7d44e05c39d6318a3a04bac9a5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=81lvaro=20Medina=20Ballester?= Date: Wed, 18 Apr 2018 15:53:53 +0200 Subject: [PATCH 10/11] Thumbnails (#2) * Added support for thumbnails * Updated docs --- README.md | 48 ++++++++++++++++++++++++++++----------- lib/ImageBrowser.js | 4 ++-- lib/ImageListContainer.js | 4 ++-- 3 files changed, 39 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index bc5826a..dd803aa 100644 --- a/README.md +++ b/README.md @@ -24,14 +24,12 @@ A React Native component to display a gallery of images. #### iOS -1. In Xcode, in the project navigator, right click `Libraries` ➜ `Add Files to - [your project's name]` -2. Go to `node_modules` ➜ `react-native-interactive-image-gallery` and add - `RNIKInteractiveImageLibrary.xcodeproj` -3. In XCode, in the project navigator, select your project. Add - `libRNIKInteractiveImageLibrary.a` to your project's `Build Phases` ➜ `Link - Binary With Libraries` -4. Run your project (`Cmd+R`)< +1. In Xcode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]` +2. Go to `node_modules` ➜ `react-native-interactive-image-gallery` and add + `RNIKInteractiveImageLibrary.xcodeproj` +3. In XCode, in the project navigator, select your project. Add + `libRNIKInteractiveImageLibrary.a` to your project's `Build Phases` ➜ `Link Binary With Libraries` +4. Run your project (`Cmd+R`)< #### Android @@ -40,27 +38,51 @@ No additional setup needed. ## Usage ```javascript -import ImageBrowser from 'react-native-interactive-image-gallery'; +import ImageBrowser from 'react-native-interactive-image-gallery' class Images extends React.PureComponent { render() { const imageURLs: Array = this.props.images.map( (img: Object, index: number) => ({ URI: img.uri, + thumbnail: img.thumbnail, id: String(index), title: img.title, description: img.description }) - ); - return ; + ) + return } } ``` ## API -Work in progress 🚧👷🏻. Some features are experimental and the API will change in -the future. +The `` component accepts the following props + +### Props + +| Prop | Type | Mandatory | +| ------------------------------------- | --------------------- | --------- | +| `images` | `Array` | **Yes** | +| `onPressImage` | `Function` | +| `topMargin` | `number` | +| `closeText` | `string` | +| `infoTitleStyles` | `Animated.View.style` | +| `infoDescriptionStyles` | `Animated.View.style` | +| `enableTilt` (experimental, iOS only) | `boolean` | + +Where `ImageSource` represents + +### `ImageSource` + +| Name | Type | Mandatory | +| ------------- | -------- | --------- | +| `id` | `string` | **Yes** | +| `URI` | `string` | **Yes** | +| `thumbnail` | `string` | **Yes** | +| `title` | `string` | +| `description` | `string` | ## Aknowledgements diff --git a/lib/ImageBrowser.js b/lib/ImageBrowser.js index 68e1772..36bde38 100644 --- a/lib/ImageBrowser.js +++ b/lib/ImageBrowser.js @@ -15,6 +15,7 @@ import ImageViewer from './ImageViewer' export type ImageSource = { id: string, URI: string, + thumbnail: string, title: ?string, description: ?string } @@ -111,8 +112,7 @@ class ImageBrowser extends React.Component { visible={true} transparent={true} animationType={Platform.OS === 'ios' ? 'none' : 'fade'} - onRequestClose={this.closeImageViewer} - > + onRequestClose={this.closeImageViewer}> { images: PropTypes.arrayOf( PropTypes.shape({ id: PropTypes.string.isRequired, - URI: PropTypes.string.isRequired + thumbnail: PropTypes.string.isRequired }) ).isRequired, onPressImage: PropTypes.func.isRequired, @@ -35,7 +35,7 @@ class ImageListContainer extends React.PureComponent { Date: Wed, 18 Apr 2018 15:54:39 +0200 Subject: [PATCH 11/11] v0.1.2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 10c6068..8b7309e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-interactive-image-gallery", - "version": "0.1.1", + "version": "0.1.2", "description": "A React Native image gallery browser with interactive animations", "main": "index.js",