'Flat List renderItem width issue

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>


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source