Navigate back to the homepage

Line height in React Native

Infinitbility
Style
May 5th, 2021 · 1 min read
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

  1. lineHeight Props
  2. lineHeight 1
  3. lineHeight 10
  4. lineHeight 20

lineHeight Props

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

TypeDefault
numberauto

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

react native lineHeight 1

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

react native lineHeight 1

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

react native lineHeight 20

Thanks For Reading…

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

More articles from Infinitbility

Letter spacing in React Native

Letter spacing in React Native

React Native Tutorial - letterSpacing in React Native

May 4th, 2021 · 1 min read
font weight in React Native

font weight in React Native

React Native Tutorial - fontWeight in React Native

May 3rd, 2021 · 1 min read
© 2021 Infinitbility
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]