ReactNativeのFlatListのItem毎の隙間を空ける

2020-11-15

FlatListのItem毎の隙間を空けるのに、どこにmarginを当てればいいのかわからなかったのでメモ

renderするItemにmarginVerticalを当てればいい

renderするItemにmerginVerticalを当てれば、Itemの上下に隙間を作れる

// renderする要素にmarginVerticalをつければいい
const renderItem: React.FunctionComponent = () => (
  <View style={{ marginVertical: 10 }}/>;
);

<FlatList
  renderItem={renderItem}
/>

参考

https://stackoverflow.com/