'Flatlist Items flicker and then disappear

I have a Flatlist that is supposed to represent items. Yesterday the Flatlist worked without problems, and today it started flashing heavily when rendering and when the screen is called up again, only the last item is displayed. The data is pulled async in this screen via axios from an API

I then rebuilt the Flatlist to the minimum status, but the error remains.

<FlatList
            data={packages}
            horizontal
            showsHorizontalScrollIndicator={false}
            keyExtractor={(item) => item.id}
            snapToInterval={packageCardWidth}
            bounces={false}
            decelerationRate={0}
            renderItem={({ item, index }) => {
                return (
                    <PackageCard
                        containerWidth={packageCardWidth}
                        {...item}
                    />
                );
            }}
        />

The code for the rendered item

export default function PackageCard(props) {

return (
    <View style={[tw.style('flex-1'), { width: props.containerWidth }]}>
        <View
            style={[
                tw.style(
                    'bg-white rounded-lg shadow-md pb-4 m-3 overflow-hidden'
                ),
                {},
            ]}
        >
            <Image
                source={{
                    uri: 'https://images.unsplash.com/photo-1577705998148-6da4f3963bc8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80',
                }}
                style={tw.style('h-64 w-full mb-4')}
            />
            <View style={tw.style('px-3 p-2')}>
                <Text style={tw.style('text-xl font-semibold')}>
                    {props.name}
                </Text>
            </View>
        </View>
    </View>
);

}



Sources

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

Source: Stack Overflow

Solution Source