Splash screen rendering nothing instead of animation

Question

I'm building a React Native application in expo, and am trying to use a gif file for a splash animation. I've configured my code as follows using expo-splash-screen, however nothing is rendered when I try to load the app. Any suggestions?

Here's the root of my app App.js

import 'react-native-gesture-handler';
import React, { useCallback,useState } from 'react'
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { MyStack } from './routes/homeStack';
import { useFonts } from 'expo-font';
import * as SplashScreen from 'expo-splash-screen'
import * as Sentry from 'sentry-expo';
import Splash from './components/Splash';


SplashScreen.preventAutoHideAsync();

export default function App() {
  const [appIsReady, setAppIsReady] = useState(false);

  const [ fontsLoaded ] = useFonts({
    'Sofia-Pro': require('./assets/Sofia_Pro_Regular.otf'),
    'Helvetica-Neue': require('./assets/HelveticaNeue-Medium.otf')
  })

  const onLayoutRootView = useCallback(async () => {
    
    if (fontsLoaded) {
      await SplashScreen.hideAsync();
    }
  }, [fontsLoaded]);

  if (!fontsLoaded) {
    return <Splash/>
  }

  return (
    <NavigationContainer onLayout={onLayoutRootView}>
      <MyStack/>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

And here's my splash animation component Splash.tsx

import React from 'react'
import { Image,StyleSheet,View } from 'react-native'

const Splash = () => {
    return (
        <View style = {styles.container}>
            <Image
               style = {styles.image}
               source ={require('../assets/splash_animation.gif')} 
            />
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
    },
    image: {
      width: '100%',
      height: '100%',
      resizeMode: 'contain',
    },
  });

export default Splash