Set Default Font Family

[AlphaJuliettOmega]

Search for Font in the Docs yields 0 results.

I'm guessing the place to look would be Theme Manager (where I'm trying to implement a font change)

This documentation for the Theme Manager does not mention fonts except for the standard thingos that only change font size: https://wix.github.io/react-native-ui-lib/foundation/theme-manager

I have a font in my project, 'Red Hat Display.ttf' as well as the snippet:

 ThemeManager.setComponentTheme('Text', {
    fontFamily: 'Red Hat Display',
    customTypography: true, // if you loaded a custom typography

    color: '#fff'
  });

As well as:

   Typography.loadTypographies({
    header: {
      fontFamily: 'Red Hat Display',
      fontSize: 58,
       customTypography: true, // if you loaded a custom typography

      // fontWeight: '300',
      lineHeight: 78
    },
    title: {
      fontFamily: 'Red Hat Display',
      fontSize: 46,
      customTypography: true, // if you loaded a custom typography

      // fontWeight: '300',
      lineHeight: 64
    },
    body: {
      color: '#fff',
      fontFamily: 'Red Hat Display',
      fontSize: 18,
      customTypography: true, // if you loaded a custom typography

      // fontWeight: '400',
      lineHeight: 22
    }
  });

React Native 0.63.3 react-native-ui-lib: "^5.17.3",

The font doesn't change at all. 'customTypography:true' looks like a hack to me, isn't mentioned in the docs but it's in the only other thread about fonts, available here: https://github.com/wix/react-native-ui-lib/issues/198

Any advice regarding changing the font of all text in the project would be appreciated.

[ethanshar]

Hi @AlphaJuliettOmega

Regarding this..

 ThemeManager.setComponentTheme('Text', {
    fontFamily: 'Red Hat Display',
    customTypography: true, // if you loaded a custom typography

    color: '#fff'
  });

This snippet won't work, Text doesn't have a fontFamily prop. If anything, you want to set the style prop with the fontFamily property.

 ThemeManager.setComponentTheme('Text', {
    style: styles.defaultTextStyle
  });

const styles = StyleSheet.create({
  defaultTextStyle: {
    fontFamily: 'Red Hat Display',
    color: '#fff'
  }  
})

Regardless, loading a custom typography and enable it by default in ThemeManager, doesn't seem like a hack to me. You can load the typographies as you did and then...

 ThemeManager.setComponentTheme('Text', {
    body: true
  });

or

 ThemeManager.setComponentTheme('Text', {
    style: Typography.body
  });

If you're going with setting a default style, I suggest doing the following:

 ThemeManager.setComponentForcedTheme('Text', (props) =>  {
  return {
        style: [Typography.body, props.style]
  }
});

This will allow merging a style that being passed with the default one

Good Luck!

[arjunghimire]

@ethanshar Its didn't work.

[ethanshar]

Hi @arjunghimire Can you share what you did? If you have a link to your code even better.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[aprilmintacpineda]

This doesn't work.

I've tried out all that I can do, setting a default font family is fundamental for UI libraries, why is it almost impossible if not completely impossible for RNUiLib?

I've tried this:

import { purple, text } from 'colors';
import { StyleSheet } from 'react-native';
import { ThemeManager } from 'react-native-ui-lib';

const styles = StyleSheet.create({
  defaultTextStyle: {
    fontFamily: 'Roboto',
    color: 'pink'
  }
});

ThemeManager.setComponentTheme('Button', {
  backgroundColor: purple,
  fontFamily: 'Roboto',
  fontWeight: '600',
  customTypography: true
});

ThemeManager.setComponentTheme('Text', {
  style: styles.defaultTextStyle
});

and this:

import { purple, text } from 'colors';
import { ThemeManager } from 'react-native-ui-lib';

ThemeManager.setComponentTheme('Button', {
  backgroundColor: purple,
  fontFamily: 'Roboto',
  fontWeight: '600',
  customTypography: true
});

ThemeManager.setComponentTheme('Text', {
  style: {
    fontFamily: 'Roboto',
    color: 'pink'
  }
});

and this:

import { purple, text } from 'colors';
import { ThemeManager } from 'react-native-ui-lib';

ThemeManager.setComponentTheme('Button', {
  backgroundColor: purple,
  fontFamily: 'Roboto',
  fontWeight: '600',
  customTypography: true
});

ThemeManager.setComponentTheme('Text', {
  fontFamily: 'Roboto', // font family doesn't work
  color: 'pink' // this works for the color
});

to no avail. Can we add "adding default font family" on the documentation?

[ethanshar]

Hi @aprilmintacpineda It looks like you're setting the Button theme in a wrong way. The setComponentTheme only accepts the component props, in your case there are no fontFamily or fontWeight props on the Button component

Try settings it like this

ThemeManager.setComponentTheme('Button', {
  backgroundColor: purple,
  labelStyle: {
    fontFamily: 'Roboto',
    fontWeight: '600',
  }
});

[sebastianjung]

Isn't it possible to have modifiers when using the following approach?

 ThemeManager.setComponentTheme('Text', (props) =>  {
  return {
        style: [Typography.body, props.style]
  }
});

It does work with modifiers if using the following format:

 ThemeManager.setComponentTheme('Text', (props) =>  {
  return {
       body: true
  }
});

The second approach has the disantvantage of not being able to apply body: true to some props other than style i think: For example in a button where i need to address the labelStyle:

ThemeManager.setComponentTheme('Button', props => {
    return {
      labelStyle: [Typography.button, props.labelStyle]
    };
  });

Or is it somehow possible like with:

ThemeManager.setComponentTheme('Button', props => {
    return {
      labelStyle: {
          body: true
      }
    };
  });

[sebastianjung]

Nevermind, it seems to work with overriding the buttonlabel style and have other modifiers on the button:

<Button bg-primary labelStyle={{ fontSize: 10 }} label="hello" />

[sebastianjung]

Why wouldn't this work?

ThemeManager.setComponentTheme('TextField', props => {
    return {
      preset: 'default',
      fieldStyle: { backgroundColor: 'red', borderBottomWidth: 0, paddingBottom: 2 },
      labelStyle: { fontSize: FONT_SIZES[14] },
      validationMessageStyle: { fontSize: FONT_SIZES[14] },
      labelColor: { focus: '', error: Colors.$textDangerLight },
      containerStyle: {
        backgroundColor: Colors.gray6,
        borderRadius: BORDER_RADIUS['100']
      },
      style: {
        paddingLeft: 20,
        backgroundColor: Colors.gray6,
        borderRadius: BORDER_RADIUS[40],
        height: 45
      },
      color: Colors.gray6,
      placeholderTextColor: Colors.gray3
    };
  });