Flat List renderItem width issue - reactjs

Question

I have some flat lists in my app with an item width of 160. For some reason when I reduce the width to 130 it will work as planned but with a width of 160px it starts to rerender again and again. What will be the possible reason for this and how to fix the issue.
My code
<FlatList
horizontal
inverted={getFlatListOrientation()}
data={data}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item, index }) => renderItem(item, index)}
contentContainerStyle={styles.listContainerStyle}
showsHorizontalScrollIndicator={false}
/>
this is my render item component
<TouchableWithoutFeedback
onPress={() => {
this.onSelect();
}}
>
<View style={{ height: 168,
width: 130,
marginRight: 10,
backgroundColor: kBackgroundWhiteColor,
shadowColor: kSeparatorTintColor,
shadowOffset: { width: 1, height: 1 },
shadowOpacity: 0.5,
shadowRadius: 5,
borderRadius: 5,
elevation: 10,}>
<FastImage
style={styles.imageStyle}
resizeMode={FastImage.resizeMode.cover}
source={
loadingError
? PLACE_HOLDER_IMAGE
: {
uri: photoUrl,
priority: FastImage.priority.normal,
}
}
onLoad={() => {
this.setState({ loadingImage: false });
}}
onError={() => {
this.setState({ loadingError: true });
}}
>
<View
style={{
flexDirection: "row",
flexGrow: 1,
justifyContent: "space-between",
alignItems: "center",
transform: [
{
rotateY: isKSA() ? "180deg" : "0deg",
},
],
}}
>
<TouchableOpacity
style={{
right: 0,
bottom: 0,
position: "absolute",
}}
onPress={() => this.onAddCarTofavorites()}
>
<View style={{ paddingLeft: 8, paddingTop: 8 }}>
<View
style={{
width: 26,
height: 26,
alignItems: "center",
justifyContent: "center",
borderRadius: 13,
backgroundColor: "#00000033",
marginRight: 5,
marginBottom: 5,
}}
>
<Image
source={
isFavorited
? IC_HEART_FILLED
: IC_HEART_OUTLINE
}
style={styles.favoriteImageStyle}
backgroundColor="clear"
/>
</View>
</View>
</TouchableOpacity>
{seenCarsIdlist &&
seenCarsIdlist.indexOf(id + "") != -1 && (
<Seen />
)}
{cappasity_link && <Tag3D />}
</View>
</FastImage>
{loadingImage && (
<FastImage
style={{
...styles.mainImageStyle,
position: "absolute",
}}
resizeMode={FastImage.resizeMode.cover}
source={PLACE_HOLDER_IMAGE}
/>
)}
<View style={styles.innerContainerStyle}>
<Text
style={styles.titleTextStyle}
ellipsizeMode={"tail"}
numberOfLines={1}
>
{makeName && modelName
? `${makeName} ${modelName} ${trim}`
: `${title} ${trim}`}
</Text>
<Text style={styles.priceTextStyle}>
{price + translate("filter_label_sar")}
</Text>
<View style={{ flexDirection: "row", paddingTop: 10 }}>
<Text style={styles.yearMileageTextStyle}>
{`${year} · ${mileage} ${
mileageUnitTemp
? mileageUnitTemp
: mileageUnit
}`}
</Text>
</View>
</View>
</View>
</TouchableWithoutFeedback>