react-native

Setting line height as multiplier in react native


In CSS line height can be set as follows

div {
    line-height: 20px; // absolute value
    line-height: 1.5; // multiplier
}

In native Android the same can be set as

<TextView
    lineSpacingMultiplier:'1.5'
    ...

How can the same be achieved in React Native. The docs dont have any information on line height multiplier. lineHeight property can be used to set absolute line heights only.

Any information on workarounds or how to custom add this functionality would be helpful.

My text component

import React from 'react';
import {
    Text,
    StyleSheet
} from 'react-native';

const line_height_multiplier = 1.5
const default_font_size = 13

export default TextNode = ({style={}, children}) => {
    return(
        <Text style={[styles.text_style, parent_style]}>{children}</Text>
    )
}

const styles = StyleSheet.create({
    text_style: {
        fontFamily: 'OpenSans',
        fontSize: default_font_size,
        color: '#333',
        lineHeight: default_font_size * line_height_multiplier
    }
})

Here if parent_style contains a fontSize different than the default fontSize 13, how can I dynamically change the lineHeight. I am unable to access parent_style.fontSize to detect if it contains 'fontSize' (parent_style can be an object or an array)


Solution

  • Most examples I've come across usually define a lineHeight as a function of fontSize this way:

    function lineHeight(fontSize) {
      const multiplier = (fontSize > 20) ? 1.5 : 1;
      return parseInt(fontSize + (fontSize * multiplier), 10);
    }
    

    You can fit whatever value for the multiplier.

    The important formula here is that lineHeight = fontSize + (fontSize * multiplier).

    https://snack.expo.io/By_BJq_TW