Flatlist Items flicker and then disappear

Viewed 188

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>
);

}

0 Answers
Related