Splash screen rendering nothing instead of animation - react-native

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