Preload, cache gif Images to avoid flickering in React Native

I am trying to create an animation in react native where a character do some push ups. Going up and down is done at the moment I want.

So I separated a gif animation in 2 gifs, without repetition. One to make him going up and the other one to make him going down.. These images are locally stored

The problem is that there is a flickering when the gif change.

I tried react-fast-image, but the gif animation is too slow and the gif is looped automatically. I tried to put a transition image in the meatime images are switching but still a flicker behaviour. The image onLoadEnd callback seems to be called too early, before the image actually ends up to load.

here how I switch the images

if (up.includes(this.props.timer))
                this.setState({ currentGif: upGif, cacheImage: downPng })
if (down.includes(this.props.timer))
          this.setState({ currentGif: downGif, cacheImage: upPng }) 

Here is the render:

render() {
    return (
        <View
            style={{ position: 'absolute', bottom: 70 }}
        >
            <Image 
                source={this.state.cacheImage}
                style={{ width: 400, height: 330, position: 'relative', bottom: 70 }}
                fadeDuration={0}
            />
            <Image
                source={this.state.currentGif}
                style={{ width: 400, height: 330, position: 'absolute', bottom: 70 }}
                fadeDuration={0}
                onLoadEnd={() => {this.setState({cacheImage: null})}}  // the Image should be loaded so I can hide the cache Image, but it desapear before the gif is loaded
            />
        </View>
    )
}