React Native Text is a React component for displaying text. Text supports nesting, styling, and touch handling. This component can be nested and it can inherit properties from parent to child. This can be useful in many ways.

 

Example

import React, {Component} from 'react';

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

 

export default class TextExample extends Component {

  render() {

    return (

      <View style={styles.container}>

        <View style={styles.header}>

          <Text>Text Component</Text>

        </View>

        <View style={styles.body}>

          <Text style={styles.text}>

            <Text style={styles.capitalLetter}>TEXT COMPONENT</Text>

 

            <Text>The React NAtive Text Component</Text>

 

            <Text>

              is used to <Text style={styles.wordBold}>Display </Text> text.

            </Text>

 

            <Text style={styles.italicText}>

              We can apply different styles for Text with Style Props.

            </Text>

          </Text>

          <Text style={styles.textShadow}>

            This Is Out side text component with Italic and Shadow .

          </Text>

        </View>

      </View>

    );

  }

}

 

const styles = StyleSheet.create({

  container: {

    backgroundColor: '#FAFAFA',

    flex: 1,

  },

  header: {

    alignItems: 'center',

    padding: 10,

    backgroundColor: 'cyan',

  },

  body: {

    backgroundColor: 'grey',

    padding: 16,

    flex: 1,

  },

  text: {

    color: 'yellow',

  },

  capitalLetter: {

    color: 'red',

    fontSize: 20,

  },

  wordBold: {

    fontWeight: 'bold',

    color: 'black',

  },

  italicText: {

    color: 'brown',

    fontStyle: 'italic',

  },

  textShadow: {

    color: 'red',

    textShadowColor: 'white',

    textShadowOffset: {width: 2, height: 2},

    textShadowRadius: 5,

    fontSize: 16,

  },

});

 

 

Output

React Native Text Component

 


Subscribe For Daily Updates