question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Extend default font styles doesn't work

See original GitHub issue

Is 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

image

Your Environment

"react-native-elements": "^3.4.2",
"react-native": "0.67.2",

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:17 (13 by maintainers)

github_iconTop GitHub Comments

4reactions
arpitBhallacommented, Mar 3, 2022
3reactions
arpitBhallacommented, Mar 2, 2022

@monk-lee I am working on that part.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found