Extend default font styles doesn't work
See original GitHub issueIs there an existing issue for this?
- I have searched the existing issues
Explain what you did
I’ve tried to extend the default font styles with interface merging as documentation explain:
import 'react-native-elements';
import { ColorValue, StyleProp, TextStyle } from 'react-native';
type ColorSwatch = {
otherColor: string;
};
declare module 'react-native-elements' {
export interface Colors extends ColorSwatch {}
export interface TextProps {
h5Style: StyleProp<TextStyle>;
}
export interface FullTheme {
colors: RecursivePartial<Colors>;
Text: Partial<TextProps>;
}
}
Expected behavior
The expected behavior should be can access to the new styles inside theme object:
import { FullTheme } from 'react-native-elements';
export const theme: FullTheme = {
Text: {
h5Style: {
fontFamily: '',
},
}
}
Describe the bug
When I create the module with interface augmentatino I’m getting the following error:
Object literal may only specify known properties, but 'h5Style' does not exist in type 'Partial<TextProps>'. Did you mean to write 'h1Style'?
Steps To Reproduce
Just create a repo with react-native-elements and follow the doumentation in how extend default theme types, an try to create a new ones for font styles,s that's all you need to reproduce the error.
### react-native-elements.d.ts
import 'react-native-elements';
import { ColorValue, StyleProp, TextStyle } from 'react-native';
type ColorSwatch = {
otherColor: string;
};
declare module 'react-native-elements' {
export interface Colors extends ColorSwatch {}
export interface TextProps {
h5Style: StyleProp<TextStyle>;
}
export interface FullTheme {
colors: RecursivePartial<Colors>;
Text: Partial<TextProps>;
}
}
Screenshots
Your Environment
"react-native-elements": "^3.4.2",
"react-native": "0.67.2",
Issue Analytics
- State:
- Created 2 years ago
- Comments:17 (13 by maintainers)
Top Results From Across the Web
Change the default font in Word - Microsoft Support
Change the default font in Word · Go to Home, and then select the Font Dialog Box Launcher Button image . · Select...
Read more >css - font-family not loading? - Stack Overflow
So, !important worked, I'm not sure why. One note, I took out the extra families, it looks like this now: body, body *...
Read more >wordpress 6 theme.json custom fonts are not working
Expand. but it doesn't work. when i go to the global styles and change the site fonts, nothing is changing. what am i...
Read more >font-face - CSS: Cascading Style Sheets - MDN Web Docs
Chrome Edge
@font‑face Full support. Chrome1. Toggle history Full support...
OpenType CBDT and CBLC rendering Full support. Chrome66. Toggle history Full support...
OpenType COLRv0 rendering Full...
Read more >How to use @font-face in CSS
Here's a nice breakdown of existing system fonts. ... @import url(//fonts.googleapis.com/css?family=Open+Sans);. Then we can use it to style ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Yeah, I have already created a PR https://github.com/react-native-elements/react-native-elements/pull/3324
@monk-lee I am working on that part.