Make FlatList's renderItem return React.Node

Summary:
Flow typing can be annoying because the `renderItem` prop for FlatList always has to specifically be of type `React.Element`.

Since really we just want to return something renderable, it should be fine to type this as `React.Node` instead.

I'm not sure if this is valid, but it seems like since we just need to implant the `key` property, we should be able to accomplish this with a `React.Fragment` wrapper instead of needing to call `cloneElement`. Looking for feedback on if this is a sensible fix.

Changelog:
[General][Changed] Updated FlatList's renderItem Flow type from React.Element<any> to React.Node

Reviewed By: sahrens

Differential Revision: D14814805

fbshipit-source-id: ce6793dea5a92619babe048dcfddee0e4519979c
This commit is contained in:
Logan Daniels
2019-04-08 12:49:52 -07:00
committed by Facebook Github Bot
parent 4627644450
commit c46ca60e3f

View File

@@ -63,7 +63,7 @@ type RequiredProps<ItemT> = {
item: ItemT,
index: number,
separators: SeparatorsObj,
}) => ?React.Element<any>,
}) => ?React.Node,
/**
* For simplicity, data is just a plain array. If you want to use something else, like an
* immutable list, use the underlying `VirtualizedList` directly.
@@ -598,7 +598,7 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
};
}
_renderItem = (info: Object) => {
_renderItem = (info: Object): ?React.Node => {
const {renderItem, numColumns, columnWrapperStyle} = this.props;
if (numColumns > 1) {
const {item, index} = info;
@@ -618,7 +618,9 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
index: index * numColumns + kk,
separators: info.separators,
});
return element && React.cloneElement(element, {key: kk});
return element != null ? (
<React.Fragment key={kk}>{element}</React.Fragment>
) : null;
})}
</View>
);