Android FlatList with borderRadius applied does not respect border to clip list items on Android #44671
Labels
Component: FlatList
Platform: Android
Android applications.
Resolution: Fixed
A PR that fixes this issue has been merged.
Description
When applying border radius to a FlatList on Android, FlatList style is not respected when clipping child views in the list. Works on iOS, screen recording for comparison.
Applying 'overflow':'hidden' does not fix.
Steps to reproduce
Render this FlatList:
<View style={{ justifyContent: 'center', alignItems: 'center' }}> <FlatList style={{ width: 150, height: 100, backgroundColor: 'gray', borderBottomLeftRadius:95, borderBottomRightRadius:100, borderTopLeftRadius:180, borderTopRightRadius:165, }} data={['1', '2', '3']} contentContainerStyle={{ justifyContent: 'center', alignItems: 'center', }} renderItem={({ item, index }) => { return ( <View key={index} style={{width: 150, height: 50, backgroundColor: 'red'}}> <Text style={{textAlign: 'center'}}>{item}</Text> </View> ) }} numColumns={1} horizontal={true} pagingEnabled={true} decelerationRate={'fast'} showsHorizontalScrollIndicator={false} /> </View>
React Native Version
0.73.8, also tested on 0.74.1
Affected Platforms
Runtime - Android
Output of
npx react-native info
Stacktrace or Logs
Reproducer
https://github.com/CalNicklin/flatlist-bug-android
Screenshots and Videos
Screen.Recording.2024-05-24.at.15.17.57.mov
The text was updated successfully, but these errors were encountered: