Comments (7)
nandorojo
commented on September 23, 2024
1
Looks like it was because it wasn't capitalized in the theme before. Glad it's working.
from dripsy.
nandorojo
commented on September 23, 2024
Can you show your expo font loader code?
from dripsy.
nandorojo
commented on September 23, 2024
I'm currently snowboarding so I'm going to send a screenshot lol.
Did you see this in the docs?
from dripsy.
zilahir
commented on September 23, 2024
Hey! Thanks for replying :) Marry Christmas!
Yes, I've seen that in the docs, and the reason I haven't shared the font loading method, because I could verify the fonts being loaded correctly:
fonts: {
root: "Inter-Bold",
},
So this, indicates that the Inter-Bold font loaded correctly, and the error message is gone, and the font is bold.
I have a custo wrapper to load async, you can check it here
from dripsy.
nandorojo
commented on September 23, 2024
It's hard for me to help without seeing a simple reproduction of the docs not working. Could you see if loading it in the way the docs say with expo font works?
One thing to keep in mind: when you load in the font with expo fonts, the name of the normal weight font should be inter. The name of the imported font is important.
from dripsy.
zilahir
commented on September 23, 2024
@nandorojo sorry for the late answer. I am loading the fonts as its described in the expo dosc, using Fonts.loadAsync.
This is the Object, that stores the fonts, and being passed to the loadAsync promise:
const fonts = {
"Inter-Black": require("./assets/fonts/Inter/Inter-Black.ttf"),
"Inter-Bold": require("./assets/fonts/Inter/Inter-Bold.ttf"),
"Inter-ExtraBold": require("./assets/fonts/Inter/Inter-ExtraBold.ttf"),
"Inter-ExtraLight": require("./assets/fonts/Inter/Inter-ExtraLight.ttf"),
"Inter-Light": require("./assets/fonts/Inter/Inter-Light.ttf"),
"Inter-Medium": require("./assets/fonts/Inter/Inter-Medium.ttf"),
"Inter-Regaular": require("./assets/fonts/Inter/Inter-Regular.ttf"),
"Inter-SemiBold": require("./assets/fonts/Inter/Inter-SemiBold.ttf"),
"Inter-Thin": require("./assets/fonts/Inter/Inter-Thin.ttf"),
};
And then:
const useLoadAssets = (assets: number[], fonts: FontSouce): boolean => {
const [ready, setReady] = useState(false);
usePromiseAll(
[Font.loadAsync(fonts), ...assets.map((asset) => Asset.loadAsync(asset))],
() => setReady(true)
);
return ready;
};
So you say:
One thing to keep in mind: when you load in the font with expo fonts, the name of the normal weight font should be inter. The name of the imported font is important.
If i understand this correctly, the Inter-Regular in this object should be Inter as that will be the default font.
const fonts = {
"Inter-Black": require("./assets/fonts/Inter/Inter-Black.ttf"),
"Inter-Bold": require("./assets/fonts/Inter/Inter-Bold.ttf"),
"Inter-ExtraBold": require("./assets/fonts/Inter/Inter-ExtraBold.ttf"),
"Inter-ExtraLight": require("./assets/fonts/Inter/Inter-ExtraLight.ttf"),
"Inter-Light": require("./assets/fonts/Inter/Inter-Light.ttf"),
"Inter-Medium": require("./assets/fonts/Inter/Inter-Medium.ttf"),
Inter: require("./assets/fonts/Inter/Inter-Regular.ttf"), // HERE
"Inter-SemiBold": require("./assets/fonts/Inter/Inter-SemiBold.ttf"),
"Inter-Thin": require("./assets/fonts/Inter/Inter-Thin.ttf"),
};
And then, in the theme:
Inter: {
bold: "Inter-Bold",
default: "Inter-Regular",
normal: "Inter",
"400": "Inter-Regular",
"300": "Inter-Thin",
"500": "Inter-Medium",
"600": "Inter-Medium",
"700": "Inter-SemiBold",
},
},
fonts: {
root: "Inter",
},
from dripsy.
zilahir
commented on September 23, 2024
UPDATE:
Hah! It seems like it's working this way! :)
Thank you!
from dripsy.
Related Issues (20)
- id support? HOT 2
- Instructions are too difficult for me to understand HOT 1
- Missing Required Props for TextInput Error HOT 12
- Define custom shorthands / aliases HOT 9
- Heading elements rendering to the same H1 tag HOT 4
- onlyAllowThemeValues: "always" not working HOT 11
- Render Error: "Can't find variable key" HOT 21
- This awasome library can work with @expo-router ? HOT 2
- Bypass `useSx` and expose tokens on custom props HOT 2
- Intellisense not working HOT 4
- ☂️ TypeScript 5 + Intellisense HOT 3
- can use Dripsy with expo-router ? HOT 1
- Styled function Autocomplete don't work HOT 8
- Basic usage of variants broken? HOT 31
- drispy/gradient path doesn't match entrypoint HOT 9
- Nested color path not working linearGradient theme HOT 4
- Fatal error on app launch in 4.1.0 HOT 9
- Missing property shadowOffset HOT 7
- `4.3.4` is not released
- Wrong type for `variant` on `TextInput` HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from dripsy.