How to use `expo-splash-screen` with `expo-google-fonts`?

The splash screen is using async operations to wait, while the fonts package is using a "custom hook" useFonts (I guess). How to make the splash screen wait for the google fonts to load?

You can load fonts with loadAsync from expo-fonts, and manage splash screen with expo-splash-screen

import * as SplashScreen from 'expo-splash-screen';
import * as Font from 'expo-font';
import { Inter_900Black } from '@expo-google-fonts/inter';

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

  useEffect(() => {
    (async () => {
      try {
        await SplashScreen.preventAutoHideAsync();
        await Font.loadAsync({ Inter_900Black });
      }
      catch {
        // handle error
      }
      finally {
        setAppIsReady(true);
      }
    })();
  }, []);

  const onLayout = useCallback(() => {
    if (appIsReady) {
      SplashScreen.hideAsync();
    }
  }, [appIsReady]);

  if (!appIsReady) {
    return null;
  }

  return (
      <View style={styles.container} onLayout={onLayout}>
        <Text style={{fontFamily: 'Inter_900Black'}}>
          Example text
        </Text>
      </View>
  );
}