diff --git a/README.md b/README.md index 9296311..385f690 100644 --- a/README.md +++ b/README.md @@ -105,6 +105,7 @@ import { SuperGridSectionList } from 'react-native-super-grid'; | style | [FlatList](https://facebook.github.io/react-native/docs/flatlist.html) styles (Object) | | Styles for the container. Styles for an item should be applied inside ```renderItem```. | | staticDimension | Number | undefined | Specifies a static width or height for the GridView container. If your container dimension is known or can be calculated at runtime (via ```Dimensions.get('window')```, for example), passing this prop will force the grid container to that dimension size and avoid the reflow associated with dynamically calculating it| | horizontal | boolean | false | If true, the grid will be scrolling horizontally **(this prop doesn't affect the SuperGridSectionList, which only scrolls vertically)** | +| onLayout | Function | | Optional callback ran by the internal `FlatList` or `SectionList`'s `onLayout` function, thus invoked on mount and layout changes. | Note: If you want your item to fill the height when using a horizontal grid, you should give it a height of '100%' diff --git a/SuperGridSectionList.js b/SuperGridSectionList.js index cf43a31..f693db4 100644 --- a/SuperGridSectionList.js +++ b/SuperGridSectionList.js @@ -27,7 +27,7 @@ class SuperGridSectionList extends Component { onLayout(e) { - const { staticDimension } = this.props; + const { staticDimension, onLayout } = this.props; if (!staticDimension) { const { width, height } = e.nativeEvent.layout || {}; @@ -35,6 +35,10 @@ class SuperGridSectionList extends Component { ...this.getDimensions(width), }); } + // run onLayout callback if provided + if (onLayout) { + onLayout(e); + } } getDimensions(lvDimension, itemDim) { @@ -102,7 +106,7 @@ class SuperGridSectionList extends Component { } render() { - const { sections, style, spacing, fixed, itemDimension, renderItem, renderSectionHeader, ...props } = this.props; + const { sections, style, spacing, fixed, itemDimension, renderItem, renderSectionHeader, onLayout, ...props } = this.props; const { itemsPerRow } = this.state; //Deep copy, so that re-renders and chunkArray functions don't affect the actual items object @@ -149,6 +153,7 @@ SuperGridSectionList.propTypes = { spacing: PropTypes.number, style: ViewPropTypes.style, staticDimension: PropTypes.number, + onLayout: PropTypes.func, }; SuperGridSectionList.defaultProps = { diff --git a/index.d.ts b/index.d.ts index 3899fc4..0c61a8b 100644 --- a/index.d.ts +++ b/index.d.ts @@ -47,6 +47,12 @@ export interface SuperGridProps { * If true, the grid will be scrolling horizontally */ horizontal?: boolean; + + /** + * Optional callback ran by the internal `FlatList` or `SectionList`'s `onLayout` function, + * thus invoked on mount and layout changes. + */ + onLayout?: func; } /** @@ -66,6 +72,7 @@ export interface SuperGridSectionListProps { style?: StyleProp, staticDimension?: number, renderSectionHeader?: (info: { section: SectionListData }) => JSX.Element; + onLayout?: func, } export class SuperGridSectionList extends React.Component< diff --git a/index.js b/index.js index 91277d7..f78ac97 100644 --- a/index.js +++ b/index.js @@ -23,7 +23,7 @@ class SuperGrid extends Component { } onLayout(e) { - const { staticDimension, horizontal } = this.props; + const { staticDimension, horizontal, onLayout } = this.props; if (!staticDimension) { const { width, height } = e.nativeEvent.layout || {}; @@ -31,6 +31,10 @@ class SuperGrid extends Component { ...this.getDimensions(horizontal ? height : width), }); } + // run onLayout callback if provided + if (onLayout) { + onLayout(e); + } } getDimensions(lvDimension, itemDim) { @@ -142,7 +146,7 @@ class SuperGrid extends Component { render() { const { items, style, spacing, fixed, itemDimension, renderItem, - horizontal, ...props } = this.props; + horizontal, onLayout, ...props } = this.props; const { itemsPerRow } = this.state; const chunked = chunkArray(items, itemsPerRow); //Splitting the data into rows @@ -182,6 +186,7 @@ SuperGrid.propTypes = { style: ViewPropTypes.style, staticDimension: PropTypes.number, horizontal: PropTypes.bool, + onLayout: PropTypes.func, }; SuperGrid.defaultProps = {