Fade-out intro image and show home content after loading in React Native?

Question

Trying to add fade-in/fade-out intro image inside the Home Screen. I'm loading data from GraphQL and I'd like the animated image to render during data loading, with an extra timeout (because data loads too fast).

( Default Splashscreen -> Homescreen -> Fetch Data & Fade-in Image -> Content )

PROBLEM:The image flickers, once. It shows up, disappears and re-appears. Otherwise everything works. Any idea what's wrong with my code?

This is my HomeScreen.js:

const HOME = gql`
  query HomeData {
    home {
      data {
       ....
    } 
  }
`  
  
export default ({ navigation }) => {
    const { data, loading, error } = useQuery(HOME)
    const [isReady, setIsReady] = useState(false)

    const FadeIntroAnim = (props) => {
        const fadeAnimat = React.useRef(new Animated.Value(1)).current;
        useFocusEffect(
            React.useCallback(() => {
                setTimeout(() => {
                Animated.timing(fadeAnimat, {
                    toValue: 0,
                    duration: 500,
                    useNativeDriver: true,
                }).start();
                }, 1000);
            },))

        return (
        <Animated.View // Special animatable View
            style={{
            flex: 1,
            position: 'absolute',
            left: '15%',
            top: '15%',
            opacity: fadeAnimat, // Bind opacity to animated value
            }}>
            {props.children}
        </Animated.View>
        );
    }

    const IntroMessage = (props) => (
        <FadeIntroAnim>
            <SvgUri
                uri='https://res.cloudinary.com/...'
            /> 
        </FadeIntroAnim>
    )

    setTimeout(() => {
        setIsReady(true);
     }, 2500);
     
      
    if (loading || !isReady) {
        return (
            <ImageBackground source={Bg} resizeMode="cover" style={tw.style('flex-1 relative')}>
                <IntroMessage/>
            </ImageBackground>
        )
    }

return ( 
 // ...Main Content...
)

I've tried importing an image locally instead of using remote SVG, but the result is the same. Also tried adding dependency to useFocusEffect, or using it without useCallback, or just using useEffect. But it all produces exact same result.

Note: Not sure if relevant but for animating the initial splash screen image I'm using Expo's example in App.js.