Merge pull request #60 from lautarocelerative/master

Added spacing prop to set Column gutterSize
brh55 · Oct 13, 2017 · 19e85ce · 19e85ce
2 parents 56bae98 + de89f9a
commit 19e85ce
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/components/Column.js b/components/Column.js
@@ -17,7 +17,8 @@ export default class Column extends Component {
   };
 
   static defaultProps = {
-    imageContainerStyle: {}
+    imageContainerStyle: {},
+    spacing: 1
   };
 
   constructor(props) {
@@ -64,7 +65,7 @@ export default class Column extends Component {
 
     // The gutter is 1% of the available view width
     const gutterBase = width / 100;
-    const gutterSize = gutterBase * 1;
+    const gutterSize = gutterBase * this.props.spacing;
 
     // Column gutters are shared between right and left image
     const columnWidth = (width / nColumns) - (gutterSize / 2);

diff --git a/components/Masonry.js b/components/Masonry.js
@@ -25,14 +25,16 @@ export default class Masonry extends Component {
     sorted: PropTypes.bool,
     imageContainerStyle: PropTypes.object,
     customImageComponent: PropTypes.func,
-    customImageProps: PropTypes.object
+    customImageProps: PropTypes.object,
+    spacing: PropTypes.number
   };
 
   static defaultProps = {
     bricks: [],
     columns: 2,
     sorted: false,
     imageContainerStyle: {},
+    spacing: 1
   };
 
   constructor(props) {
@@ -122,6 +124,7 @@ export default class Masonry extends Component {
              imageContainerStyle={this.props.imageContainerStyle}
              customImageComponent={this.props.customImageComponent}
              customImageProps={this.props.customImageProps}
+             spacing={this.props.spacing}
              key={`RN-MASONRY-COLUMN-${rowID}`}/> }
        />
   	</View>

diff --git a/readme.md b/readme.md
@@ -46,8 +46,9 @@
 | columns              | num               | Desired number of columns                                                                                                                                                                       | 2       |
 | sorted               | bool              | Whether to sort `bricks` according to their index position or allow bricks to fill in as soon as the `uri` is ready.                                                                            | false   |
 | imageContainerStyle  | object            | The styles object which is added to the Image component                                                                                                                                         | {}      |
-| customImageComponent | `React.Component` | Use a custom component to be rendered for the Image. This will work properly, as long as the component follows the standard interface of the react-native image component.                      |   n/a      |
-| customImageProps     | object            | Pass along additional properties to a `props.customImageComponent`.                                                                                                                             |     n/a    |
+| customImageComponent | `React.Component` | Use a custom component to be rendered for the Image. This will work properly, as long as the component follows the standard interface of the react-native image component.                      | n/a     |
+| customImageProps     | object            | Pass along additional properties to a `props.customImageComponent`.                                                                                                                             | n/a     |
+| spacing              | num               | Gutter size of the column. The spacing is a multiplier of 1% of the available view.                                                                                                             | 1       |
 
 ### Brick Properties
 "Bricks" are the basic building block of the masonry and are passed into the props.bricks. They essentially represent the items within each column and require a `uri` property at a minimum. However, you can freely add additional properties to the `data` property if you need access to certain data within your `brick.onPress` handler and `footer/header` renderer. The following properties are available.