Skip to content

Commit

Permalink
Add ability to pass ItemSeparatorComponent as React Element (#32748)
Browse files Browse the repository at this point in the history
Summary:
Currently `ListHeaderComponent` & `ListFooterComponent` allow to use React Componetn & Elemelen

```tsx
<FlatList
  ListHeaderComponent={<View />} // valid
  ListHeaderComponent={View}     // valid
/>
```

But when you try to pass `ItemSeparatorComponent` as React Element it will throw an error

```tsx
<FlatList
  ItemSeparatorComponent={View}     // ok
  ItemSeparatorComponent={<View />} /* not valid:
    Error: Element type is invalid: expected a string (for built-in components) or a class/function
    (for composite components) but got: object.
    Check the render method of `CellRenderer`.
  */
/>
```

So, this PR adds this ability

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[General] [Changed] - Add ability to pass `ItemSeparatorComponent` as React Element

Pull Request resolved: #32748

Test Plan: ...

Reviewed By: lyahdav

Differential Revision: D37227719

Pulled By: cortinico

fbshipit-source-id: 1c4943fa9d42bf5e61fbd999d1f5be46b51ecb14
  • Loading branch information
retyui authored and facebook-github-bot committed Jun 17, 2022
1 parent 168f020 commit 5854b11
Showing 1 changed file with 5 additions and 3 deletions.
8 changes: 5 additions & 3 deletions Libraries/Lists/VirtualizedList.js
Original file line number Diff line number Diff line change
Expand Up @@ -2097,9 +2097,11 @@ class CellRenderer extends React.Component<
: this._onLayout;
// NOTE: that when this is a sticky header, `onLayout` will get automatically extracted and
// called explicitly by `ScrollViewStickyHeader`.
const itemSeparator = ItemSeparatorComponent && (
<ItemSeparatorComponent {...this.state.separatorProps} />
);
const itemSeparator = React.isValidElement(ItemSeparatorComponent)
? ItemSeparatorComponent
: ItemSeparatorComponent && (
<ItemSeparatorComponent {...this.state.separatorProps} />
);
const cellStyle = inversionStyle
? horizontal
? [styles.rowReverse, inversionStyle]
Expand Down

0 comments on commit 5854b11

Please sign in to comment.