Comments (5)
it is somehow related to the fontWeight, if i apply fontWeight 400 the font is loaded correctly
from gluestack-ui.
Hey @borstessi, Thanks for reporting issue. We will have a look.
from gluestack-ui.
Just here to report that we have the same issue. Applying fontWeight: 400
on config fixes the issue.
from gluestack-ui.
I have a similar issue. I am working in Android and Expo. Despite I have imported the fonts using UseFont in the expo and changed the tokens the fonts are not applied to the global theme.
import { config as defaultConfig } from "@gluestack-ui/config";
import { createConfig } from "@gluestack-ui/themed";
export const themeConfig = createConfig({
...defaultConfig,
tokens: {
...defaultConfig.tokens,
fontSizes: {
...defaultConfig.tokens.fontSizes,
newFontSize: 90,
},
fonts: {
heading: 'Futura-Bold',
body: 'Futura-Medium',
mono: 'Futura-Book',
},
colors: {
...defaultConfig.tokens.colors,
primary0: "#E5F1FB",
primary50: "#e2ebff",
primary100: "#b2c3ff",
primary200: "#809bff",
primary300: "#4e72fe",
primary400: "#204afd",
primary500: "#0b32e4",
primary600: "#0426b2",
primary700: "#001b80",
primary800: "#001871",
primary900: "#00051f",
primary950: "#000711",
brandPrimary: '#001871',
brandSecondary: '#007aff',
brandInfo: '#C0E7F7',
brandSuccess: '#4DD298',
brandDanger: '#F58BA0',
brandWarning: '#FA8202',
brandDark: '#000',
brandLight: '#a9a9a9',
}
}
});
When I do this the font is not applied,
<Text style={{ alignSelf: "center", marginTop: 500}}>Styling! :D Hooray!</Text>
The only way it works is forcing the font in each component like this.
<Text style={{fontFamily: "Futura-Bold", alignSelf: "center", marginTop: 500}}>Styling! :D Hooray!</Text>
I am using
"@gluestack-style/react": "^1.0.52",
"@gluestack-ui/config": "^1.1.16",
"@gluestack-ui/themed": "^1.1.22",
"expo": "~50.0.14",
"expo-font": "~11.10.3",
from gluestack-ui.
Same issue, setting fontWeight to 400 seems to fix
I guess the fontWeight's don't actually do anything
from gluestack-ui.
Related Issues (20)
- AddIcon doesn't exist? HOT 3
- Switch activeThumbColor type error HOT 4
- Indeterminate progress bar HOT 1
- :initial doesn't animate when placed in sx HOT 1
- use Eject Theme alias ts loses effect HOT 1
- Styled component type errors HOT 3
- Compatilibity with Expo SDK 51 HOT 5
- Just question HOT 1
- Size prop is not working correctly in Icon component HOT 1
- Issues with expo 51 HOT 6
- if the text too long, the toast will overflow. HOT 1
- TypeScript Intellisense VSCode slows after Eject Theme HOT 1
- ModalBackdrop not covering bottom navigation on Android. HOT 6
- The Popover of Android is inconsistent with iOS, and Android is relatively ugly HOT 3
- ModalBackdrop is not working HOT 1
- Nativewind TextInput and TextArea does not apply custom colors defined from config HOT 1
- SVG descendant styles not being applied in dark mode HOT 1
- Not all media query types appear in useMedia hook HOT 1
- Documentation typo HOT 1
- Tests on new project dont pass HOT 1
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 gluestack-ui.