Issue with using SplashScreen with Expo in React Native App

I am facing an issue while using SplashScreen with the expo-splash-screen library in my React-Native application. When I run the app, I get an error message indicating that preventAutoHideAsync is not defined.

Here’s the code I’m working with:

import React, { useEffect } from 'react';
import { View, StyleSheet, ActivityIndicator } from 'react-native';
import WelcomeMessager from '../components/screens/wellcomemassge';
import { useFonts } from 'expo-font';
import * as SplashScreen from 'expo-splash-screen'; // Updated import

const WelcomeScreen = ({ navigation }) => {
  SplashScreen.preventAutoHideAsync();
  const [loaded, error] = useFonts({
    'Hedvig': require('../assets/Fonts/HedvigLettersSans-Regular.ttf'),
  });

  useEffect(() => {
    if (loaded || error) {
      SplashScreen.hideAsync();
    }
  }, [loaded, error]);

  if (!loaded && !error) {
    return null;
  }
  
  if (!loaded) {
    return (
      <View style={styles.container}>
        <ActivityIndicator size="large" color="#0000ff" />
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <WelcomeMessager navigation={navigation} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#5CE84D',
    width: '100%',
    paddingBottom: 50,
    flexDirection: 'column',
    alignItems: 'stretch',
    justifyContent: 'center',
  },
});

export default WelcomeScreen;

I get the following error message when running the app:

ERROR TypeError: Cannot read property 'preventAutoHideAsync' of null

I am using expo-splash-screen in my Expo-based project. I need a solution to this issue so that I can use the splash screen correctly.

• Implemented Splash Screen: I followed the documentation for using expo-splash-screen, including importing it and calling preventAutoHideAsync() at the beginning of my component.

• Checked Package Versions: I made sure that I have the correct versions of expo and expo-splash-screen installed in my project.

• Used useEffect: I implemented useEffect to hide the splash screen once the fonts are loaded or if there was an error.

• Restarted the Development Server: I restarted the Metro bundler and ensured my emulator was running properly.

Try calling it outside of the component, as it is recommended in docs.

import * as SplashScreen from 'expo-splash-screen';

SplashScreen.preventAutoHideAsync();

export default function App() {
 // ...
}