【React Native】FlatListにBorderRadiusを適用する

皆様、明けましておめでとうございます。
しっかりとお正月ボケに罹っております。
が、それに負けず、本年も引き続き自分が遭遇したエラーの対処法や、覚えておきたい小技などをまとめていきますので、今後ともどうぞよろしくお願い致します。

さて、年明け最初の記事は、React Native の FlatList に BorderRadius を適用する方法についてです。
今後も使うだろうということで備忘録としてまとめます。

実装にあたり、参考にさせていただいた記事がこちら。

react native – borderRadius not applied on FlatList – Stack Overflow
https://stackoverflow.com/questions/57087436/borderradius-not-applied-on-flatlist

どうやら私と全く同じことをやりたかったみたいです。

で、こちらの記事によると、FlatList の contentContainerStyle に overflow: 'hidden' を追加すると、BorderRadius が反映されるとのことでした。
具体的なサンプルコードは下記のとおりです。

const styles = StyleSheet.create({
  listStyle: {
    marginHorizontal: 15,
    borderWidth: 0.7,
    borderRadius: 10,
    borderColor: '#999',
    overflow: 'hidden'
  },
});

<FlatList
  data={this.state.list}
  keyExtractor={item => `${item.id}`}
  renderItem={({item, index}) => {
    return <Item data={item} />
  }}
  contentContainerStyle={styles.listStyle} />

上記の様にすると、角丸になった FlatList が表示できました！
なお、マージンや線の幅、色等は適宜調整してください。

以上、React Native の FlatList に BorderRadius を適用する方法でした。
ご参考になれば幸いです。