[splash-screen] Add functional component example

The issue of not having the `AppLoading` component available in the bare workflow was raised in expo#7718 and expo#7740 . This new example helps people switching from a managed workflow to refactor their `App.tsx` file.

Furthermore, the current examples only include `App.tsx` as class components whereas `App.tsx` in the current Expo templates all use a functional component and hooks. Hence, this example uses a functional component and hooks to look more familiar to new Expo users.

packages/expo-splash-screen/README.md

@@ -187,6 +187,45 @@ const styles = StyleSheet.create({
 });
 ```
 
+### Example with hooks: Use `SplashScreen` to replace the `<AppLoading />` component
+
+`App.tsx`
+```tsx
+import React, { useState, useEffect } from 'react';
+import * as SplashScreen from 'expo-splash-screen';
+
+// Your main App component
+import Main from './components/Main';
+
+const App = () => {
+  const [isLoadingComplete, setLoadingComplete] = useState(false);
+
+  const appLoading = async () => {
+    try {
+      // keep showing the SplashScreen 
+      await SplashScreen.preventAutoHideAsync();
+      // do any other app initialization like loading resources etc.
+      loadResourcesAsync();
+    } catch (error) {
+      // handle error
+    } finally {
+      setLoadingComplete(true);
+      // hide the SplashScreen after all initialization is done.
+      await SplashScreen.hideAsync();
+    }
+  };
+
+  useEffect(() => {
+    appLoading();
+  }, []);
+
+  return isLoadingComplete ? <Main /> : null;
+};
+
+const loadResourcesAsync = async () => {
+  // Cache images, fonts etc.
+}
+```
 
 ## 💻 Installation in managed Expo projects