Add custom component overlay and a few more config options

FidMe · Aug 16, 2017 · c16fce1 · c16fce1
1 parent 12e8170
commit c16fce1
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -22,8 +22,18 @@ import Gallery from 'react-native-photo-gallery';
 class YourGalleryComponent extends Component {
   render() {
     const data = [
-      { id: 'first image', image: require('./yourImage.jpg')  }
-      { id: 'Second image', image: require('./yourImage2.jpg')  }
+      {
+        id: 'first image',
+        image: require('./yourImage.jpg'),
+        thumb: require('./yourImageThumb.jpg'),
+        overlay: <Overlay />
+      },
+      {
+        id: 'Second image',
+        image: require('./yourImage2.jpg'),
+        thumb: require('./yourImageThumb2.jpg'),
+        overlay: <OtherOverlay />
+      }
     ];
 
     return <Gallery data={data} />;
@@ -36,4 +46,19 @@ It is up to you to render a header, navigation bar, etc.
 | Props             | Type            | Description                                                                                |
 |-------------------|-----------------|--------------------------------------------------------------------------------------------|
 | `backgroundColor` | `String`        | Changing the background color of gallery and pagination                                    |
-| `data`            | Array of object | Must match the following format `{ id: uniqueKey, image: (cf react-native image source) }` |
+| `data`            | Array of object | See `Data` below |
+| `initialPaginationSize`            | `Number` | Default to 10 |
+| `initialNumToRender`            | `Number` | Default to 4 |
+| `overlay`            | `Component` | If present, a view that will be displayed above the image |
+
+## Data object
+
+Data prop an array objects that will configure slides.
+You can provide the following props.
+
+| Key             | Type            | Required   | Description |
+|-------------------|-----------------|--------------------------------------------------------------------------------------------|----|
+| `id` | `String`        | Yes | A unique identifier
+| `image`            | `Image source` | Yes | See `<Image source={}/>` on react native documentation. |
+| `thumb`            | `Image source` | No | Will be used as a thumbnail on pagination, will default to `image`if not provided |
+| `overlay`            | `Component` | No | A view that will be displayed above the image, for metas infos for example |
diff --git a/index.js b/index.js
@@ -51,7 +51,7 @@ export default class Gallery extends Component {
           style={styles.swiper}
           data={data}
           horizontal
-          initialNumToRender={4}
+          initialNumToRender={this.props.initialNumToRender||4}
           ref={ref => this.swiper = ref}
           pagingEnabled
           onMomentumScrollEnd={this.onScrollEnd.bind(this)}
@@ -62,6 +62,7 @@ export default class Gallery extends Component {
         <Pagination
           index={this.state.index}
           data={data}
+          initialPaginationSize={this.props.initialPaginationSize||10}
           goTo={this.goTo.bind(this)}
           backgroundColor={backgroundColor}
         />
@@ -76,7 +77,7 @@ Gallery.propTypes = {
   data: PropTypes.arrayOf((propValue, key) => {
     if (!propValue[key].id || !propValue[key].image) {
       return new Error(
-        'Data prop is invalid. It must be an object containing "id" and "data" keys.'
+        'Data prop is invalid. It must be an object containing "id" and "image" keys.'
       );
     }
   })

diff --git a/src/BetterList.js b/src/BetterList.js
@@ -23,6 +23,7 @@ export default class BetterList extends Component {
       <ListView
        {...this.props}
        ref={sc => this.pagination = sc}
+       initialListSize={this.props.initialPaginationSize}
        dataSource={this.state.dataSource}
       />
     );

diff --git a/src/Pagination/SwiperThumb.js b/src/Pagination/SwiperThumb.js
@@ -14,7 +14,7 @@ class SwiperThumb extends Component {
       >
         <Image
           style={{ ...s.thumb, opacity: this.props.active ? 1 : 0.6 }}
-          source={this.props.data[this.props.index].image}
+          source={this.props.data[this.props.index].thumb||this.props.data[this.props.index].image}
         />
       </TouchableOpacity>
     );

diff --git a/src/Slide.js b/src/Slide.js
@@ -1,6 +1,6 @@
+import React, { Component } from 'react';
 import { ActivityIndicator, Dimensions, View } from 'react-native';
 import PhotoView from 'react-native-photo-view';
-import React, { Component } from 'react';
 
 const styles = {
   slideC: {
@@ -22,6 +22,11 @@ const styles = {
 
 export class Slide extends Component {
   render() {
+    const inside = {
+      width: Dimensions.get('window').width,
+      height: Dimensions.get('window').height - 128,
+    };
+
     return (
       <View
         style={[
@@ -38,12 +43,10 @@ export class Slide extends Component {
           resizeMode="contain"
           style={[
             styles.scrollViewC,
-            {
-              width: Dimensions.get('window').width,
-              height: Dimensions.get('window').height - 128,
-            }
+            inside
           ]}
         />
+        {this.props.item.overlay}
       </View>
     );
   }