Combining <Apploading/> + from '@expo-google-fonts/open-sans'

[lofa0907]

I am trying to follow these two documents but getting a syntax error:

1. Custom Fonts: Using Custom Fonts - Expo Documentation
2. Apploading: AppLoading - Expo Documentation

I am trying to use UseState hook instead of exactly how the two documents coded.

-----------------------------CODES--------------------------------------
import React, { useState } from “react”;
import { createStore, combineReducers } from “redux”;
import { Text, View } from “react-native”;
import { Provider } from “react-redux”;
import AppLoading from ‘expo-app-loading’;
import * as Font from ‘expo-font’;

import {
OpenSans_300Light,
OpenSans_300Light_Italic,
OpenSans_400Regular,
OpenSans_400Regular_Italic,
OpenSans_600SemiBold,
OpenSans_600SemiBold_Italic,
OpenSans_700Bold,
OpenSans_700Bold_Italic,
OpenSans_800ExtraBold,
OpenSans_800ExtraBold_Italic
} from ‘@expo-google-fonts/open-sans’;

import productsReducer from “./store/reducers/products”;
import ShopNavigator from “./navigation/ShopNavigator”;

const rootReducer = combineReducers({
products: productsReducer,
});

const store = createStore(rootReducer);

// const fetchFonts = () => {
// return Font.loadAsync({
// ‘open-sans’: require(‘./assets/fonts/OpenSans-Regular.ttf’),
// ‘open-sans-bold’: require(‘./assets/fonts/OpenSans-Bold.ttf’)
// });
// };

export default function App() {
const [fontLoaded, setFontLoaded] = useState(false);
let [fontLoaded] = useFonts({
OpenSans_400Regular, OpenSans_700Bold
});

if(!fontLoaded){
return<AppLoading startAsync={fontLoaded} onFinish={() => {
setFontLoaded(true);
}} />
}
return (



);
}