About using custom fonts with expo-font

Expo Development Tools
1

Hello Expo, please help me out from this situation

THIS IS MY CODE WHERE MY CUSTOM FONT ARE USED FROM ASSETS/FONTS FOLDER USING Font.loadAsync

import * as Font from 'expo-font';

const loadFonts = async () => {
        const fonts = await Font.loadAsync({
            MetropolisExtraBoldItalic: require('../assets/fonts/Metropolis-ExtraBoldItalic.otf'),
        });
    };

    useEffect(() => {
        loadFonts();
    }, []);

AND THIS BELOW CODE WHERE I USE CUSTOM FONT INSIDE TEXT

 const LoadingScreen = () => {
        return (
            <Animated.View style={[animatedStyle]} className=" flex-auto justify-end bg-[#E23744] ">             
                <View className=" items-center pb-10 ">
                    <Text style={{ fontFamily: 'MetropolisExtraBoldItalic' }} className=" text-white text-7xl pb-3 ">ABC</Text>
                </View>
            </Animated.View>
        )
    }

/*****************************************************************************************************************/

AND THIS CODE SHOWING ERROR:

fontFamily “MetropolisExtraBoldItalic” is not a system font and has not been loaded through Font.loadAsync.

- If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.

- If this is a custom font, be sure to load it with Font.loadAsync.

PLEASE HELP ME TO RESOLVE THIS ERROR