React native: Image overlay on flatlist on android

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

Here is Solutions:

We have many solutions to this problem, But we recommend you to use the first solution because it is tested & true solution that will 100% work for you.

Solution 1

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>

Note: Use and implement solution 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply