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';34const 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};1314const styles = StyleSheet.create({15 textContainer: {16 flex: 1,17 justifyContent: 'center',18 padding: 2019 },20 text: {21 fontSize: 10,22 textAlign: 'center',23 lineHeight: 1,24 }25});2627export 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';34const LotsOfStyles = () => {5 return (6 <View style={styles.textContainer}>7 <Text style={[styles.text, {fontSize: 20}]}>Infinitbility</Text>8 </View>9 );10};1112const styles = StyleSheet.create({13 textContainer: {14 flex: 1,15 justifyContent: 'center',16 padding: 2017 },18 text: {19 fontSize: 10,20 textAlign: 'center',21 lineHeight: 10,22 }23});2425export 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';34const LotsOfStyles = () => {5 return (6 <View style={styles.textContainer}>7 <Text style={[styles.text, {fontSize: 20}]}>Infinitbility</Text>8 </View>9 );10};1112const styles = StyleSheet.create({13 textContainer: {14 flex: 1,15 justifyContent: 'center',16 padding: 2017 },18 text: {19 fontSize: 10,20 textAlign: 'center',21 lineHeight: 20,22 }23});2425export default LotsOfStyles;
Output

Thanks For Reading…