Skip to content

Commit

Permalink
Merge pull request facebook#958 from hramos/flatlist-docs
Browse files Browse the repository at this point in the history
[FlatList] Add note on multi-column layouts
  • Loading branch information
rickhanlonii authored May 23, 2019
2 parents 043abd5 + fc35d77 commit 0e4411d
Showing 1 changed file with 14 additions and 2 deletions.
16 changes: 14 additions & 2 deletions docs/flatlist.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>`](sectionlist.md).

Expand All @@ -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.
Expand Down Expand Up @@ -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.
Expand All @@ -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
Expand All @@ -168,7 +180,7 @@ Example usage:
<View style={[style.separator, highlighted && {marginLeft: 0}]} />
)}
data={[{title: 'Title Text', key: 'item1'}]}
renderItem={({item, separators}) => (
renderItem={({item, index, separators}) => (
<TouchableHighlight
onPress={() => this._onPress(item)}
onShowUnderlay={separators.highlight}
Expand Down

0 comments on commit 0e4411d

Please sign in to comment.