Text

<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #008800; font-weight: bold">import</span> <span style="color: #333333">*</span> <span style="color: #008800; font-weight: bold">as</span> React <span style="color: #008800; font-weight: bold">from</span> <span style="background-color: #fff0f0">&#39;react&#39;</span>;
<span style="color: #008800; font-weight: bold">import</span> { Text, View, StyleSheet } <span style="color: #008800; font-weight: bold">from</span> <span style="background-color: #fff0f0">&#39;react-native&#39;</span>;

export default <span style="color: #008800; font-weight: bold">class</span> <span style="color: #BB0066; font-weight: bold">App</span> extends React<span style="color: #333333">.</span>Component {
  render() {
    <span style="color: #008800; font-weight: bold">return</span> (
      <span style="color: #333333">&lt;</span>View style<span style="color: #333333">=</span>{styles<span style="color: #333333">.</span>container}<span style="color: #333333">&gt;</span>
        <span style="color: #333333">&lt;</span>Text style<span style="color: #333333">=</span>{styles<span style="color: #333333">.</span>bold}<span style="color: #333333">&gt;</span>Hello Am Bold<span style="color: #333333">&lt;/</span>Text<span style="color: #333333">&gt;</span>
        <span style="color: #333333">&lt;</span>Text style<span style="color: #333333">=</span>{styles<span style="color: #333333">.</span>italic}<span style="color: #333333">&gt;</span>Hello Am Italic<span style="color: #333333">&lt;/</span>Text<span style="color: #333333">&gt;</span>
        <span style="color: #333333">&lt;</span>Text style<span style="color: #333333">=</span>{styles<span style="color: #333333">.</span>underline}<span style="color: #333333">&gt;</span>Hello Am UnderLine<span style="color: #333333">&lt;/</span>Text<span style="color: #333333">&gt;</span>
        <span style="color: #333333">&lt;</span>Text style<span style="color: #333333">=</span>{styles<span style="color: #333333">.</span>big}<span style="color: #333333">&gt;</span>Helo Iam Big<span style="color: #333333">&lt;/</span>Text<span style="color: #333333">&gt;</span>
        <span style="color: #333333">&lt;</span>Text style<span style="color: #333333">=</span>{styles<span style="color: #333333">.</span>bigColor}<span style="color: #333333">&gt;</span>Helo Iam Big And Have Color<span style="color: #333333">&lt;/</span>Text<span style="color: #333333">&gt;</span>
      <span style="color: #333333">&lt;/</span>View<span style="color: #333333">&gt;</span>
    );
  }
}

const styles <span style="color: #333333">=</span> StyleSheet<span style="color: #333333">.</span>create({
  container: {
    flex: <span style="color: #0000DD; font-weight: bold">1</span>,
    justifyContent: <span style="background-color: #fff0f0">&#39;center&#39;</span>,
    paddingTop: <span style="color: #0000DD; font-weight: bold">20</span>,
    backgroundColor: <span style="background-color: #fff0f0">&#39;#ecf0f1&#39;</span>,
    padding: <span style="color: #0000DD; font-weight: bold">8</span>,
  },
  bold: {
    fontSize: <span style="color: #0000DD; font-weight: bold">14</span>,
    fontWeight: <span style="background-color: #fff0f0">&#39;bold&#39;</span>,
    textAlign: <span style="background-color: #fff0f0">&#39;center&#39;</span>,
  },
  italic: {
    fontStyle: <span style="background-color: #fff0f0">&#39;italic&#39;</span>,
    textAlign: <span style="background-color: #fff0f0">&#39;center&#39;</span>,
  },
  underline: {
    fontSize: <span style="color: #0000DD; font-weight: bold">14</span>,
    textAlign: <span style="background-color: #fff0f0">&#39;center&#39;</span>,
    textDecorationLine: <span style="background-color: #fff0f0">&#39;underline&#39;</span>,
  },
  big: {
    fontSize: <span style="color: #0000DD; font-weight: bold">25</span>,
    textAlign: <span style="background-color: #fff0f0">&#39;center&#39;</span>,
  },
  bigColor: {
    fontSize: <span style="color: #0000DD; font-weight: bold">25</span>,
    textAlign: <span style="background-color: #fff0f0">&#39;center&#39;</span>,
    color: <span style="background-color: #fff0f0">&#39;blue&#39;</span>,
  },
});
</pre></div>