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)
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)
.