Skip to content

Commit e8e8ba7

Browse files
authored
Styling for Container & Column, and verticalSeparatorWith support
Added support for styling the wrapper container and columns with wrapperStyle and columnWrapperStyle props. Also added support for verticalSeparatorWidth.
1 parent 382d8a4 commit e8e8ba7

File tree

1 file changed

+17
-2
lines changed

1 file changed

+17
-2
lines changed

src/MasonryList.js

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,9 @@ export default class MasonryList extends React.Component<Props, State> {
113113
}
114114
return <ScrollView {...props} />;
115115
},
116+
verticalSeparatorWidth: 0,
117+
wrapperStyle: {},
118+
columnWrapperStyle: {},
116119
};
117120

118121
state = _stateFromProps(this.props);
@@ -205,7 +208,18 @@ export default class MasonryList extends React.Component<Props, State> {
205208
return { length: column.heights[rowIndex], offset, index: rowIndex };
206209
};
207210

208-
_renderScrollComponent = () => <FakeScrollView style={styles.column} />;
211+
_renderScrollComponent = columnIndex => {
212+
const { verticalSeparatorWidth, columnWrapperStyle } = this.props;
213+
return (
214+
<FakeScrollView
215+
style={[
216+
styles.column,
217+
{ marginLeft: (columnIndex > 0) ? verticalSeparatorWidth : 0 },
218+
(typeof columnWrapperStyle === 'function') ? columnWrapperStyle(columnIndex) : columnWrapperStyle
219+
]}
220+
/>
221+
);
222+
};
209223

210224
_getItemCount = data => data.length;
211225

@@ -219,6 +233,7 @@ export default class MasonryList extends React.Component<Props, State> {
219233
ListHeaderComponent,
220234
keyExtractor,
221235
onEndReached,
236+
wrapperStyle,
222237
...props
223238
} = this.props;
224239
let headerElement;
@@ -240,7 +255,7 @@ export default class MasonryList extends React.Component<Props, State> {
240255
this._getItemLayout(col.index, index)}
241256
renderItem={({ item, index }) =>
242257
renderItem({ item, index, column: col.index })}
243-
renderScrollComponent={this._renderScrollComponent}
258+
renderScrollComponent={() => this._renderScrollComponent(col.index)}
244259
keyExtractor={keyExtractor}
245260
onEndReached={onEndReached}
246261
onEndReachedThreshold={this.props.onEndReachedThreshold}

0 commit comments

Comments
 (0)