Friday, July 26, 2019

React Native Underline Text Using StyleSheet

This tutorial explains how To create underline text in react native app using css stylesheet. Sometime developers need to highlight the specify text by marking it as underline and for that we need to perform some modification in stylesheet design. textDecorationLine: 'underline' style property of Text component is used to create Underline Text in both Android and iOS react native application.

React Native Underline Text Using StyleSheet


How To Create Underline Text In React Native App 

Lets see the below steps that helps to create underline text in react native app using css stylesheet

Step 1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step 2: Open App.js File in your favorite code editor and erase all code and follow this tutorial.

Step 3: Through react , react-native packages import all required components.
import React, { Component } from 'react';
import { Text, StyleSheet, View } from 'react-native';

Step 4: Implement render method inside the App class and wrapped the below layout design inside the root View component.
export default class App extends Component {

  render() {
    return (
      <View style={styles.container} >
        <View style={styles.MainContainer}>
          <Text style={styles.TextStyle} >Sample Text Component Text</Text>
        </View>
      </View>
    );
  }
}

Step 5 : Apply the below style sheet design. 
const styles = StyleSheet.create(
  {
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      margin: 20
    },
    TextStyle: {
      fontSize: 20,
      textDecorationLine: 'underline',
      textAlign: 'center',
      color: "blue"
    }
  });

Complete Source Code for App.js 

Lets see the complete source code that helps to create underline text in react native app using css stylesheet in React Native.

import React, { Component } from 'react';
import { Text, StyleSheet, View } from 'react-native';


export default class App extends Component {

  render() {
    return (
      <View style={styles.container} >
        <View style={styles.MainContainer}>
          <Text style={styles.TextStyle} >Sample Text Component Text</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create(
  {
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      margin: 20
    },
    TextStyle: {
      fontSize: 20,
      textDecorationLine: 'underline',
      textAlign: 'center',
      color: "blue"
    }
  });

Screenshot :
React Native Underline Text Using StyleSheet

This is all about React Native Underline Text Using StyleSheetThank 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