Monday, April 1, 2019

How to insert line break in React Native

This tutorial explains How can we insert a line break into a <Text> component in React Native?. This is very simple and easy as well. you need use {'\n'} as line breaks in text component, whenever you need to add line break in react native application.



How to add new line in react native 

Lets see the below example, where we are using line break statement in Text component in react native application. This will display the text in new line and in organised manner.

App.js
import React, { Component } from 'react';
import { Platform, StyleSheet, View, Text } from 'react-native';


export default class App extends Component {

  render() {

    return (
      <View style={styles.container}>
        <Text style={styles.setFontSize}> Example one  demo {"\n"}</Text>        
        <Text style={styles.setFontSize}> Example two {"\n"} demo</Text>        
      </View>
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
 
});

Screenshot : 

How to insert line break in Reacti-Native

This is all about inserting the new line statement in Text component in react native application. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.

No comments:

Post a Comment