Skip to content

Commit fc35d77

Browse files
committed
Add note on multi-column lists, and fixup renderItem docs a bit
1 parent 2f3a18c commit fc35d77

File tree

1 file changed

+14
-2
lines changed

1 file changed

+14
-2
lines changed

docs/flatlist.md

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ A performant interface for rendering simple, flat lists, supporting the most han
1414
- Pull to Refresh.
1515
- Scroll loading.
1616
- ScrollToIndex support.
17+
- Multiple column support.
1718

1819
If you need section support, use [`<SectionList>`](sectionlist.md).
1920

@@ -26,6 +27,8 @@ Minimal Example:
2627
/>
2728
```
2829

30+
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.
31+
2932
More complex, multi-select example demonstrating `PureComponent` usage for perf optimization and avoiding bugs.
3033

3134
- 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.
@@ -144,7 +147,7 @@ Also inherits [ScrollView Props](scrollview.md#props), unless it is nested in an
144147
### `renderItem`
145148

146149
```javascript
147-
renderItem({ item: Object, index: number, separators: { highlight: Function, unhighlight: Function, updateProps: Function(select: string, newProps: Object) } }) => ?React.Element
150+
renderItem({item, index, separators});
148151
```
149152

150153
Takes an item from `data` and renders it into the list.
@@ -155,6 +158,15 @@ Provides additional metadata like `index` if you need it, as well as a more gene
155158
| -------- | -------- |
156159
| function | Yes |
157160

161+
- `item` (Object): The item from `data` being rendered.
162+
- `index` (number): The index corresponding to this item in the `data` array.
163+
- `separators` (Object)
164+
- `highlight` (Function)
165+
- `unhighlight` (Function)
166+
- `updateProps` (Function)
167+
- `select` (enum('leading', 'trailing'))
168+
- `newProps` (Object)
169+
158170
Example usage:
159171

160172
```javascript
@@ -163,7 +175,7 @@ Example usage:
163175
<View style={[style.separator, highlighted && {marginLeft: 0}]} />
164176
)}
165177
data={[{title: 'Title Text', key: 'item1'}]}
166-
renderItem={({item, separators}) => (
178+
renderItem={({item, index, separators}) => (
167179
<TouchableHighlight
168180
onPress={() => this._onPress(item)}
169181
onShowUnderlay={separators.highlight}

0 commit comments

Comments
 (0)