MasonryFlashList with random height rerenders resulting in shuffling the list item sizes

[theobouwman]

With the MasonryFlashList i want the randomHeight to be for each item a random value of 10, 20 or 30. When I reach end of the list and the page increments all items will rerender and pick a new random number, shuffling the sizes. How can I solve this?

 const dispatch = useDispatch()
    const navigation = React.useContext(NavigationContext)

    const { data } = useGetOrganisationImagesQuery({
        organisationId: organisationId
    })

    const numColumns = 3
    const gridImageDimension = Dimensions.get('window').width / numColumns

    const imagesLength = useMemo(() => data?.data ? data.data.length : 0, [data?.data])
    const imageUrls = useMemo(() => data?.data?.map(i => i.image_url) ?? [], [data?.data])

    const [page, setPage] = useState(1)
    const pageSize = numColumns * 2
    const itemCount = useMemo(() => {
        if (horizontalSmall) {
            return 10
        } else {
            return (page + 1) * pageSize
        }
    }, [page])

    const items = useMemo(() => {
        return data?.data ? (data?.data?.length > itemCount ? data.data.slice(0, itemCount) : data.data) : []
    }, [data?.data, page])

    const openImageViewer = useCallback((index: number) => {
        navigation?.navigate('ImageViewer', {
            image_urls: imageUrls,
            initial_image_index: index,
            title: imageUrls.length === 1 ? `Image` : `Images`,
            downloadable: true
        })
    }, [imageUrls])

    const goToImagesScreen = useCallback(() => {
        navigation?.navigate('OrganisationImages', {
            organisationId: organisationId
        })
    }, [])
   
    const renderItem = useCallback((info: ListRenderItemInfo<OrganisationImage>) => {
        const isFirstItem = info.index === 0
        const isLastItem = (info.index === 9) || (info.index === imagesLength - 1)

        const randomHeight = 
            Math.floor(Math.random() * 3) === 0 ? 10 :
            Math.floor(Math.random() * 3) === 1 ? 20 :
            30 // Default to 30 if the random number is 2
        const height = horizontalSmall ? gridImageDimension : gridImageDimension + randomHeight

        return (
            <Pressable onPress={() => openImageViewer(info.index)}>
                <View cardBr={horizontalSmall ? (isFirstItem ? 'TLBL' : isLastItem ? 'TRBR' : '') : 'TLBLTRBR'} style={{
                    overflow: 'hidden'
                }} row margin-5={!horizontalSmall}>
                    <CachedImage 
                        source={info.item.image_url} 
                        resizeMode="cover"
                        style={horizontalSmall ? {
                            height: 120,
                            width: 120
                        } : {
                            height: height,
                            width: '100%'
                        }} 
                        loadingImageComponent={() => <View><ActivityIndicator /></View>}
                    /> 
                    {horizontalSmall && isLastItem && imagesLength > 10 ?
                        <View center padding-15 background-white>
                            <Button 
                                label={`${imagesLength - 10} more`}
                                size="xSmall"
                                outline
                                onPress={goToImagesScreen}
                            />  
                        </View> 
                    : null}
                </View>
            </Pressable>
        )
    }, [imagesLength])

    return (<View paddingL-0 paddingR-0 flex>
        {horizontalSmall ?
            <Card row spread marginH-10>
                <Text text70BO flex>Photos</Text>
                <View row flex right>
                    <Chip label={String(data?.data?.length ?? '')}/>
                    <View marginL-5>
                        <Button 
                            label="View"
                            size="xSmall"
                            outline
                            onPress={goToImagesScreen}
                        />
                    </View>
                </View>
            </Card>
        : null}
        <View flex>
            {horizontalSmall ? 
                <FlashList
                    contentContainerStyle={{
                        paddingTop: 10,
                        paddingRight: 10,
                        paddingBottom: 5,
                        paddingLeft: horizontalSmall ? 10 : 0,
                    }}
                    horizontal={true}
                    ListEmptyComponent={
                        <Card marginR-10>
                            <Text>No images yet</Text>
                        </Card>
                    }
                    estimatedItemSize={horizontalSmall ? 3 : 15}
                    data={items}
                    renderItem={renderItem}
                /> 
            : 
                <MasonryFlashList
                    contentContainerStyle={{
                        padding: 5
                    }}
                    ListEmptyComponent={
                        <Card marginR-10>
                            <Text>No images yet</Text>
                        </Card>
                    }
                    numColumns={numColumns}
                    estimatedItemSize={200}
                    data={items}
                    
                    renderItem={renderItem}
                    keyExtractor={(item) => item.image_url}
                    onEndReached={() => setPage(page + 1)}
                />
            }
        </View>
    </View>)