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,

  },

});