React native – Flickering when changing Image source uri in react-native

I am trying to solve an issue with my code, since we need to change the dynamic url in a "non-flickering" way, but it is always flickering every time we change the sliders value.

I have been googling around the <Image API and props, even playing with cache and methods, but there is always a flickering when chasing the index.

Seems I do not get the right answer and this is quite an important project for my hospital.

Help?

Here is my code:

import React, { useRef, useCallback, useState, useEffect } from 'react'
import { ActivityIndicator, Animated, View, Image, ScrollView } from 'react-native'
import { GestureHandlerRootView, PanGestureHandler, PinchGestureHandler } from 'react-native-gesture-handler'
import { Svg, Path, G } from 'react-native-svg'
import { useAuthContext } from '../../../context/AuthContext'
import { CertRequesNoEnct, decryptAESWithJson, encryptJsonWithAES } from '../../../helpers/certRequest'
import Slider from '@react-native-community/slider'

export default function PACS({ serie }) {


    const [images, setImages] = useState([])
    const [index, setIndex] = useState(0)
    const { user } = useAuthContext()
    const [loading, setLoading] = useState(false)

    useEffect(() => {
        console.log(serie)
        if (serie) {
            fetchInfo()
        }
    }, [serie])

    async function fetchInfo() {
        let dataToSend = {
            Serid: serie
        }
        setLoading(true)
        try {
            let a0 = await encryptJsonWithAES(dataToSend, user.s_aes, user.s_iv)
            let a1 = await CertRequesNoEnct(a0, user.token, "", "", "/mobile/imaging/fetch", user.certificate)
            setLoading(false)
            if (a1) {
                let a2 = await decryptAESWithJson(a1.replace(""", ""), user.s_aes, user.s_iv)
                if (a2) {
                    let a3 = await JSON.parse(a2)
                    setImages(() => ([...a3[0].array_agg]))
                    for(let i = 0; i< a3[0].array_agg.length; i++){
                        Image.prefetch(a3[0].array_agg[i]);
                    }
                }
            }
        } catch (error) {
            setLoading(false)
        }
        setLoading(false)

    }


    function styli(type) {
        if (type === "ImagingStudy") return { backgroundColor: "#fb923c" }
        if (type === "DiagnosticReport") return { backgroundColor: "#fb7185" }
    }

    const scale = useRef(new Animated.Value(1)).current
    const translateX = useRef(new Animated.Value(0)).current
    const translateY = useRef(new Animated.Value(0)).current

    const onHandlerStateChange = useCallback(() => {
        translateY.extractOffset();
        translateX.extractOffset();
    }, []);


    const handlePinch = Animated.event([{ nativeEvent: { scale: (scale < 1 ? 1 : scale) } }], { useNativeDriver: false })

    const handlePan = Animated.event([{
        nativeEvent: {
            translationX: translateX,
            translationY: translateY
        }
    }], { useNativeDriver: false })


    return (
        loading ? <ActivityIndicator size="large" /> :
            <View style={{ flex: 1, position: "relative" }}>
                <View style={{ position: "absolute", zIndex: 99999, right: 0 }}>
                    <Slider
                        style={{ height: 100, zIndex: 9999, width: images.length, transform: [{ rotate: "-270deg" }] }}
                        minimumValue={0}
                        maximumValue={images.length - 1}
                        value={index}
                        onValueChange={value => setIndex(value)}
                        step={1}

                        minimumTrackTintColor="#00b1e6"
                        maximumTrackTintColor="#00b1e6"
                        tapToSeek={true}
                    />
                </View>

                {console.log(images[index])}
                <GestureHandlerRootView style={{ flex: 1 }}>
                    <PanGestureHandler onGestureEvent={handlePan} onHandlerStateChange={onHandlerStateChange}>
                        <Animated.View style={{ flex: 1 }}>
                            <PinchGestureHandler onGestureEvent={handlePinch}>
                                {images.length > 0 ?
                                    <View style={{ flex: 1 }}>
                                        <Animated.Image  resizeMethod="scale"
                                            resizeMode="cover" key={index} defaultSource={{ uri: images[index] }} source={{ uri: images[index] }} style={{ flex: 1, transform: [{ scale }, { translateX }, { translateY }] }} />
                                    </View> :
                                    <Svg Svg width="407" height="298" viewBox="0 0 407 298" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <Path d="M406.331 280.377C406.331 290.072 315.371 297.932 203.166 297.932C90.9611 297.932 6.10352e-05 290.072 6.10352e-05 280.377C6.10352e-05 270.681 90.9611 262.821 203.166 262.821C315.371 262.821 406.331 270.681 406.331 280.377Z" fill="#ECF0FD" />
                                        <Path d="M301.613 266.621C300.804 271.971 295.428 276.349 289.666 276.349H119.173C113.41 276.349 107.975 271.979 107.094 266.639L78.8657 95.4407C77.9857 90.1007 81.9797 85.7307 87.7417 85.7307H318.477C324.24 85.7307 328.293 90.1087 327.484 95.4597L301.613 266.621Z" fill="#C5C5C5" />

                                    </Svg>}
                            </PinchGestureHandler>
                        </Animated.View>
                    </PanGestureHandler>
                </GestureHandlerRootView>
            </View >

    )
}