React native: Image overlay on flatlist on android-CodePudding

I am trying to make a flat list that having image inside to make a carousel like this enter image description here

At first, it still work fine on IOS. However, The image will overlay on flat list on android like this: enter image description here

And here is my code:

<FlatList
            style={{
              width: (Dimensions.get("window").width * 86.13) / 100,
              height: (Dimensions.get("window").height * 56.03) / 100,
              borderBottomLeftRadius: 50,
              borderWidth: 1,
              overflow: 'hidden'
            }}
            contentContainerStyle ={{borderBottomLeftRadius: 50, overflow: "hidden"}}
            horizontal
            pagingEnabled
            data={product.images}
            bounces={false}
            showsHorizontalScrollIndicator={false}
            keyExtractor={(item, index) => index.toString()}
            renderItem={({ item, index }) => {
              return (
                <Image
                  resizeMode="cover"
                  style={{
                    width: (Dimensions.get("window").width * 86.13) / 100,
                    height: (Dimensions.get("window").height * 56.03) / 100,
                  }}
                  key={index}
                  source={item}
                />
              );
            }}
          />

I have tried to put overflow: 'hidden' on both contentContainerStyle and style but it still not working. So anyone have answer, please help me this. Thank you

CodePudding user response：

It's like an android limitation.

A workaround is create a container wrapping the FlatList and rounding the edge, then pass a overflow: 'hidden' for it.

<View style={{
   width: (Dimensions.get("window").width * 86.13) / 100,
   height: (Dimensions.get("window").height * 56.03) / 100,
   borderBottomLeftRadius: 50,
   borderWidth: 1,
   overflow: 'hidden'
}}>
    <FlatList
            style={{
              width: (Dimensions.get("window").width * 86.13) / 100
            }}
            horizontal
            pagingEnabled
            data={product.images}
            bounces={false}
            showsHorizontalScrollIndicator={false}
            keyExtractor={(item, index) => index.toString()}
            renderItem={({ item, index }) => {
              return (
                <Image
                  resizeMode="cover"
                  style={{
                    width: (Dimensions.get("window").width * 86.13) / 100,
                    height: (Dimensions.get("window").height * 56.03) / 100,
                  }}
                  key={index}
                  source={item}
                />
              );
            }}
       />
</View>

<div data-snack-id="@xyanz/flatlist-overflow" data-snack-platform="android" data-snack-preview="true" data-snack-theme="light" style="overflow:hidden;background:#F9F9F9;border:1px solid var(--color-border);border-radius:4px;height:505px;width:100%"></div>
<script src="https://snack.expo.dev/embed.js"></script>