diff --git a/docs/flatlist.md b/docs/flatlist.md index b97db5968eeb04..5983a9f5b20f7b 100644 --- a/docs/flatlist.md +++ b/docs/flatlist.md @@ -14,6 +14,7 @@ A performant interface for rendering simple, flat lists, supporting the most han - Pull to Refresh. - Scroll loading. - ScrollToIndex support. +- Multiple column support. If you need section support, use [``](sectionlist.md). @@ -26,6 +27,8 @@ Minimal Example: /> ``` +To render multiple columns, use the [`numColumns`](flatlist.md#numcolumns) prop. Using this approach instead of a `flexWrap` layout can prevent conflicts with the item height logic. + More complex, multi-select example demonstrating `PureComponent` usage for perf optimization and avoiding bugs. - By binding the `onPressItem` handler, the props will remain `===` and `PureComponent` will prevent wasteful re-renders unless the actual `id`, `selected`, or `title` props change, even if the components rendered in `MyListItem` did not have such optimizations. @@ -149,7 +152,7 @@ Also inherits [ScrollView Props](scrollview.md#props), unless it is nested in an ### `renderItem` ```javascript -renderItem({ item: Object, index: number, separators: { highlight: Function, unhighlight: Function, updateProps: Function(select: string, newProps: Object) } }) => ?React.Element +renderItem({item, index, separators}); ``` Takes an item from `data` and renders it into the list. @@ -160,6 +163,15 @@ Provides additional metadata like `index` if you need it, as well as a more gene | -------- | -------- | | function | Yes | +- `item` (Object): The item from `data` being rendered. +- `index` (number): The index corresponding to this item in the `data` array. +- `separators` (Object) + - `highlight` (Function) + - `unhighlight` (Function) + - `updateProps` (Function) + - `select` (enum('leading', 'trailing')) + - `newProps` (Object) + Example usage: ```javascript @@ -168,7 +180,7 @@ Example usage: )} data={[{title: 'Title Text', key: 'item1'}]} - renderItem={({item, separators}) => ( + renderItem={({item, index, separators}) => ( this._onPress(item)} onShowUnderlay={separators.highlight}