Line height in React Native

Hi Devs’,

Welcome to infinitbility,

This article help you to use lineHeight in react native with their output example.

React Native provide lineHeight style props to make vertical space between text.

let’s start today topic lineHeight in React Native Or how to use lineHeight in react native

lineHeight default value is 0 use if developer not defined lineHeight for text.

Table of contents

lineHeight Props
lineHeight 1
lineHeight 10
lineHeight 20

lineHeight Props

Increase or decrease the spacing between text vertical height. By default lineHeight depend upon fontSize.

Type	Default
number	auto

lineHeight 1 example

below example show 1 num vertical space between texts.

lineHeight1.js

1import React from 'react';
2import { StyleSheet, Text, View } from 'react-native';
3
4const LotsOfStyles = () => {
5    return (
6      <View style={styles.textContainer}>
7        <Text style={[styles.text, {fontSize: 20}]}>Infinitbility</Text>
8        <Text style={[styles.text, {fontSize: 20}]}>Infinitbility</Text>
9        <Text style={[styles.text, {fontSize: 20}]}>Infinitbility</Text>
10      </View>
11    );
12};
13
14const styles = StyleSheet.create({
15  textContainer: {
16    flex: 1,
17    justifyContent: 'center',
18    padding: 20
19  },
20  text: {
21    fontSize: 10,
22    textAlign: 'center',
23    lineHeight: 1,
24  }
25});
26
27export default LotsOfStyles;

Output

lineHeight 10 example

below example show 10 num vertical space between texts.

lineHeight10.js

1import React from 'react';
2import { StyleSheet, Text, View } from 'react-native';
3
4const LotsOfStyles = () => {
5    return (
6      <View style={styles.textContainer}>
7        <Text style={[styles.text, {fontSize: 20}]}>Infinitbility</Text>
8      </View>
9    );
10};
11
12const styles = StyleSheet.create({
13  textContainer: {
14    flex: 1,
15    justifyContent: 'center',
16    padding: 20
17  },
18  text: {
19    fontSize: 10,
20    textAlign: 'center',
21    lineHeight: 10,
22  }
23});
24
25export default LotsOfStyles;

Output

lineHeight 20 example

below example show 20 num vertical space between texts.

lineHeight20.js

1import React from 'react';
2import { StyleSheet, Text, View } from 'react-native';
3
4const LotsOfStyles = () => {
5    return (
6      <View style={styles.textContainer}>
7        <Text style={[styles.text, {fontSize: 20}]}>Infinitbility</Text>
8      </View>
9    );
10};
11
12const styles = StyleSheet.create({
13  textContainer: {
14    flex: 1,
15    justifyContent: 'center',
16    padding: 20
17  },
18  text: {
19    fontSize: 10,
20    textAlign: 'center',
21    lineHeight: 20,
22  }
23});
24
25export default LotsOfStyles;

Output

Thanks For Reading…

Line height in React Native

lineHeight Props

lineHeight 1 example

lineHeight1.js

Output

lineHeight 10 example

lineHeight10.js

Output

lineHeight 20 example

lineHeight20.js

Output

Join our email list and get notified about new content

Looking For React Native Tutorial?

More articles from Infinitbility

Letter spacing in React Native

font weight in React Native