UPDATE ON THE VIDEO If you are using Functional Components then simply use the hook useFont . Here is an example how you can load it. useFont({ 'Helvetica': require('/assets/fonts) }) and now you can use the font on your style property. BUT here is the problem with this. We know that our fonts will take time to Load , so if suppose you are rendering a year's calender and using this new font, maybe only the last two months will use the newly loaded font just because it was not ready while the rendering started. To solve the problem we have to understand that the useFont when ready and loaded returns 1. so lets store the return of the useFont hook into a variable. let [fontsLoaded] = useFonts({ 'Inter-Black': require('./assets/fonts/Inter-Black.otf'), }); now if(!fontsLoaded) // this means that if fonts are not loaded { return } else //if loaded { return yourItems; } Hope this helped!
For those of you getting "undefined is not an object (evaluating '_expo.Font.loadAsync')]" you should import import * as Font from 'expo-font'; instead of import {Font} from 'expo';
the custom fonts are showing up correctly, but im getting an error in the console saying: fontFamily "OpenSans-Light" is not a system font and has not been loaded through Font.loadAsync. //(it appears for whatever type font is in default inside the customText.js switch ) - 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. I have Expo SDK as version ^34.0.1 and NO 'expo-font' version under dependencies (im sorry i dont know if it has anything to do with it) P.D. : followed this video exactly so there should be no problem with syntax.. it even works! just strange how the errors show up in cmd console and browser console
Thanks you for this video! One question... If I load the font in App.js, Can I use this font in all screens? Or Do I need to call Font.loadAsync in all screens? How can I load it once time? Thanks in advance!!!
Q1. You are creating a new object in which you are combining 2 other objects. Q2. this.props - props is the only other thing you would pass down apart from styles.
Getting warning like: TypeError: Font.loadAsync is not a function. ...'Font.loadAsync' is undefined. And as the font couldn't be loaded the screen keeps loading. I am stuck at the first part only.
I had this problem too. below worked for me: import { loadAsync } from "expo-font"; import React from "react"; const Home = ({ navigation }) => { const [fontLoaded, setLoaded] = React.useState(false); React.useEffect(() => { async function go() { await loadAsync({ "Montserrat-R": require("../assets/fonts/Montserrat-Regular.ttf"), "Montserrat-B": require("../assets/fonts/Montserrat-Bold.ttf"), "Montserrat-BI": require("../assets/fonts/Montserrat-BoldItalic.ttf"), "Montserrat-I": require("../assets/fonts/Montserrat-Italic.ttf"), }); setLoaded(true); } go(); }, []); if (!fontLoaded) { return ; } return ({/* your code */}) I found on expo docs docs.expo.io/versions/latest/guides/using-custom-fonts/
@@tales4604 I didn't do much change. Just imported the Font from 'expo-font' and then ran react-native link. It worked for me. Thanks for the reply anyway.
![ร้อยพ่อพันแม่ - WanMai [Official MV]](http://i.ytimg.com/vi/XY2pNYASEbg/mqdefault.jpg)
i was stuck for 2 days in this and you actually make me understand, highly appreciated !!
Good one. I have tried the second half meaning not the expo part. and the logic and approach is working. Thanks. Keep making practical react videos.
Great idea to have a series about expo components ! I will watch all the episodes :)
Can you make an tutorials on responsive size layouts without Expo?
It will be much helpful
Thankyou sir for explaining expo integration Sdk and other stuff in a easy way.! :) alot of love form Pakistan
This video was helpful, Thankyou!
UPDATE ON THE VIDEO
If you are using Functional Components then simply use the hook useFont . Here is an example how you can load it.
useFont({
'Helvetica': require('/assets/fonts)
})
and now you can use the font on your style property.
BUT here is the problem with this. We know that our fonts will take time to Load , so if suppose you are rendering a year's calender and using this new font, maybe only the last two months will use the newly loaded font just because it was not ready while the rendering started. To solve the problem we have to understand that the useFont when ready and loaded returns 1. so lets store the return of the useFont hook into a variable.
let [fontsLoaded] = useFonts({
'Inter-Black': require('./assets/fonts/Inter-Black.otf'),
});
now
if(!fontsLoaded) // this means that if fonts are not loaded
{
return
}
else //if loaded
{
return yourItems;
}
Hope this helped!
Thank you... you're a lifesaver ♥
For those of you getting "undefined is not an object (evaluating '_expo.Font.loadAsync')]" you should import import * as Font from 'expo-font'; instead of import {Font} from 'expo';
Worked like a charm. Thank you so much.
@Unsure Programmer Please update this in the description.
Thank-you so much, this video helped me a lot.
As always , fantastic
Could you post a video of a scrollable tab navigator & a bottom tab navigator with a background color? (React V3/ expo)
Can you make a video about profile data in React-Native and Firebase
Like :
profile image upload,
Username change,
Bio edit,
Without expo.
What's this font man? I need it so much.
Make a Udemy course and I promise you I'll get it. This is so good!
the custom fonts are showing up correctly, but im getting an error in the console saying:
fontFamily "OpenSans-Light" is not a system font and has not been loaded through Font.loadAsync.
//(it appears for whatever type font is in default inside the customText.js switch )
- 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.
I have Expo SDK as version ^34.0.1 and NO 'expo-font' version under dependencies (im sorry i dont know if it has anything to do with it)
P.D. : followed this video exactly so there should be no problem with syntax.. it even works! just strange how the errors show up in cmd console and browser console
First like!!!
You are like my sensai in react native
Awesome vid as usual
Thanks you for this video! One question... If I load the font in App.js, Can I use this font in all screens? Or Do I need to call Font.loadAsync in all screens? How can I load it once time? Thanks in advance!!!
how did you end up using it?
Thank you
what's the vscode theme?
this is so pro
how can I reduce the app size via Expo ???
'Font' has been moved into expo-font package. Not available in expo straight away anymore!
it is showing a warning and font is not getting loaded
undefined is not an object (evaluating '_expo.Font.loadAsync')]
Object.assign - {} , this.props. {style:style} -
Q1: why empty object ?
Q2 : why this.props only?
Q1. You are creating a new object in which you are combining 2 other objects.
Q2. this.props - props is the only other thing you would pass down apart from styles.
Sorry. I use expo, but when add react-native-share then react-native-link not working. How to fix?
I searched a lot but couldn't fix? Help me?
Getting warning like:
TypeError: Font.loadAsync is not a function.
...'Font.loadAsync' is undefined.
And as the font couldn't be loaded the screen keeps loading. I am stuck at the first part only.
I had this problem too. below worked for me:
import { loadAsync } from "expo-font";
import React from "react";
const Home = ({ navigation }) => {
const [fontLoaded, setLoaded] = React.useState(false);
React.useEffect(() => {
async function go() {
await loadAsync({
"Montserrat-R": require("../assets/fonts/Montserrat-Regular.ttf"),
"Montserrat-B": require("../assets/fonts/Montserrat-Bold.ttf"),
"Montserrat-BI": require("../assets/fonts/Montserrat-BoldItalic.ttf"),
"Montserrat-I": require("../assets/fonts/Montserrat-Italic.ttf"),
});
setLoaded(true);
}
go();
}, []);
if (!fontLoaded) {
return ;
}
return ({/* your code */})
I found on expo docs
docs.expo.io/versions/latest/guides/using-custom-fonts/
@@tales4604 I didn't do much change. Just imported the Font from 'expo-font' and then ran react-native link. It worked for me.
Thanks for the reply anyway.
You imported Text from CustomText. and it is still working how?
you can name the import whatever you like irrespective of the name of the class/function in the file you are importing from.
Github does not have the files explained in this video
👎
Simple CRUD sqlite with expo =)
wtf is that viscode theme