How to set font-size to "larger" or 140% of system default

Question

I want to provide to my users a possibility to display certain <Text/> elements with a larger font-size, than a system default. The documentation provides a number only for that style.

I want to display texts either with web-css "large" or "larger" values or maybe with 140% of the original font size.

I found couple of questions on SO and 3rd party libs, like responsive-fontsize, but they all seem not relavant to me.

What's the easiest way to do what I want?

Answer 1

1. You define styles for each component, such as <Text /> you described. Here is an article
2. You can set your fontSize as kind of formula, example: style={{fontSize: 10*1.4}} or style={{fontSize: x*1.4}} where x is your global variable.

P.S. Normally, you can't just make font bigger in %

Answer 2

You can use em for a relative size.

With em, you can say how many times bigger or smaller you want your text to be. For example:

0.5em will be half of your initial size, 1em will be the same size, 2em will be twice the size.

<Text style={{fontSize: `${relativeSize}em`}}>
      I am {relativeSize} times bigger than I was supposed to be
</Text>

Here is a working example: https://snack.expo.io/@andrpr/bigger-text-example

If you want to use percentages, you can convert them to how much bigger you want the text to be:

const percentage = 140;
const relativeSize = percentage/100;

https://snack.expo.io/@andrpr/percentage-bigger-text-example

Answer 3

I think what you're looking for is PixelRatio which let you more control on your fonts sizes. Or else it could help someone who reached your post.

PixelRatio gives you access to the device's pixel density and font scale.

So after you got the informations you want you can play with it.

You can find exemples on this answer

For exemple :

var React = require('react-native');

var {StyleSheet, PixelRatio} = React;

var FONT_BACK_LABEL   = 18;

if (PixelRatio.get() <= 2) {
  FONT_BACK_LABEL = 14;
}

var styles = StyleSheet.create({
  label: {
    fontSize: FONT_BACK_LABEL
  }
});

Answer 4

I would create a custom Text component that translates the defined textSize style to the adjusted scale. The scale you can get from a Context-Provider, Redux or Recoil, etc.

something like this (untested):

export function MyText(props) {
  const { fontScale } = useContext(TextContext);

  return (
    <Text {...props} style={[...style, { fontSize: style.fontSize ? style.fontSize * fontScale : undefined }] />
  );
}