Please provide the following:
- SDK Version: ^38.0.0
- Platforms(Android/iOS/web/all): Android
Hi, I bought a React Native App(Expo) from Codecanyon. When I try to configure the App I am getting this error “font Family “Ant Design” is not a system font and has not been loaded through Font.loadAsync.” I tried contacting the developer but he says something is wrong with my environment. I have created react-native apps using expo in past so I’m pretty sure my environment is perfect. It’s been 3 days but I’m not able to configure the app. The app includes php backend which I’ve already uploaded to my website and its working.
Package.json:
{
“main”: “node_modules/expo/AppEntry.js”,
“scripts”: {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
“dependencies”: {
"@react-native-community/masked-view": "0.1.10",
"expo": "^38.0.0",
"expo-ads-admob": "~8.2.1",
"expo-facebook": "~8.2.1",
"expo-font": "~8.2.1",
"firebase": "7.9.0",
"moment": "^2.27.0",
"native-base": "^2.13.12",
"prop-types": "^15.7.2",
"react": "16.11.0",
"react-dom": "16.11.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
"react-native-carousel": "^0.12.0",
"react-native-device-detection": "^0.2.1",
"react-native-form-validator": "^0.3.2",
"react-native-gesture-handler": "~1.6.0",
"react-native-keyboard-aware-scroll-view": "^0.9.2",
"react-native-map-link": "^2.7.10",
"react-native-maps": "0.27.1",
"react-native-modalbox": "^2.0.0",
"react-native-reanimated": "~1.9.0",
"react-native-render-html": "^4.2.1",
"react-native-root-toast": "^3.2.1",
"react-native-safe-area-context": "~3.0.7",
"react-native-safe-area-view": "^1.1.1",
"react-native-screens": "~2.9.0",
"react-native-star-rating": "^1.1.0",
"react-native-super-grid": "^4.0.2",
"react-native-timeago": "^0.5.0",
"react-native-vector-icons": "^7.0.0",
"react-native-web": "~0.11.7",
"react-native-webview": "^10.3.2",
"react-navigation": "^4.4.0",
"react-navigation-drawer": "^2.5.0",
"react-navigation-stack": "^2.8.2",
"tcomb-form-native": "^0.6.20"
},
“devDependencies”: {
"@babel/core": "^7.11.1",
"babel-preset-expo": "^8.2.3"
},
“private”: true
}
App.js
import React from 'react';
import { Asset } from 'expo-asset';
import * as Font from 'expo-font';
import { AppLoading } from 'expo';
import { Root } from "native-base";
import { StatusBar } from "react-native";
import AppPreLoader from "./application/components/AppPreLoader";
import firebaseConfig from './application/utils/Firebase';
import * as firebase from 'firebase';
firebase.initializeApp(firebaseConfig);
import GuestNavigation from './application/navigations/Guest';
import LoggedNavigation from './application/navigations/Logged';
console.disableYellowBox = true;
function cacheImages(images) {
return images.map(image => {
if (typeof image === 'string') {
return Image.prefetch(image);
} else {
return Asset.fromModule(image).downloadAsync();
}
});
}
export default class App extends React.Component {
constructor () {
super();
this.state = {
isLogged: false,
loaded: false,
isReady: false,
}
}
async _loadAssetsAsync() {
const imageAssets = cacheImages([
require('./assets/images/header.jpg'),
require('./assets/images/logo.png'),
require('./assets/images/logo_dark.png'),
require('./assets/images/star.png'),
require('./assets/images/avatar.png'),
require('./assets/images/emptylist.png'),
require('./assets/images/avatar.jpg'),
require('./assets/images/nointernet.png'),
require('./assets/images/contact.png'),
require('./assets/images/address.png'),
require('./assets/images/audience.png'),
require('./assets/images/schedule.png'),
require('./assets/images/phone.png'),
require('./assets/images/website.png'),
require('./assets/images/bookmarked.png'),
require('./assets/images/checked.png'),
]);
await Promise.all([...imageAssets]);
}
async componentDidMount () {
await Expo.Font.loadAsync({
Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf")
});
await firebase.auth().onAuthStateChanged((user) => {
if(user !== null) {
this.setState({
isLogged: true,
loaded: true
});
} else {
this.setState({
isLogged: false,
loaded: true
});
}
});
}
render() {
if (!this.state.isReady) {
return (
<AppLoading
startAsync={this._loadAssetsAsync}
onFinish={() => this.setState({ isReady: true })}
onError={console.warn}
/>
);
}
const {isLogged, loaded, isReady} = this.state;
if ( ! loaded) {
return (
<AppPreLoader/>
);
}
if(isLogged && isReady) {
return (
<Root>
<StatusBar barStyle="light-content" translucent={true} backgroundColor={'transparent'} />
<LoggedNavigation />
</Root>
);
} else {
return (
<Root>
<StatusBar barStyle="dark-content" translucent={true} backgroundColor={'transparent'} />
<GuestNavigation />
</Root>
);
}
}
}
Thanks.
github repo for the App: [https://github.com/priyankrawat/reactApp]