Text | NativeBase | Universal Components for React and React Native

Playground
const Example = () => {
  return <VStack space={2} alignItems="center">
      <Text fontSize="xs">Extra Small</Text>
      <Text fontSize="sm">Small</Text>
      <Text fontSize="md">Medium</Text>
      <Text fontSize="lg">Large</Text>
      <Text fontSize="xl">Extra Large</Text>
      <Text fontSize="2xl">2 Extra Large</Text>
      <Text fontSize="3xl">3 Extra Large</Text>
      <Text fontSize="4xl">4 Extra Large</Text>
      <Text fontSize="5xl">5 Extra Large</Text>
      <Text fontSize="6xl">6 Extra Large</Text>
    </VStack>;
};
const Example = () => {
  return <VStack space={2} alignItems="center">
      <Text fontSize="xs">Extra Small</Text>
      <Text fontSize="sm">Small</Text>
      <Text fontSize="md">Medium</Text>
      <Text fontSize="lg">Large</Text>
      <Text fontSize="xl">Extra Large</Text>
      <Text fontSize="2xl">2 Extra Large</Text>
      <Text fontSize="3xl">3 Extra Large</Text>
      <Text fontSize="4xl">4 Extra Large</Text>
      <Text fontSize="5xl">5 Extra Large</Text>
      <Text fontSize="6xl">6 Extra Large</Text>
    </VStack>;
};

Playground
const Example = () => {
  return <VStack space={2} alignItems="center" width="100%">
      <Heading mt={3}>Truncated </Heading>
      <Text isTruncated w="80%">
        Lorem ipsum is placeholder text commonly used in the graphic, print, and
        publishing industries for previewing layouts and visual mockups.
      </Text>
      <Heading mt={3}>With Two lines </Heading>
      <Text noOfLines={2}>
        "The quick brown fox jumps over the lazy dog" is an English-language
        pangram—a sentence that contains all of the letters of the English
        alphabet. Owing to its existence, Chakra was created.
      </Text>
    </VStack>;
};
const Example = () => {
  return <VStack space={2} alignItems="center" width="100%">
      <Heading mt={3}>Truncated </Heading>
      <Text isTruncated w="80%">
        Lorem ipsum is placeholder text commonly used in the graphic, print, and
        publishing industries for previewing layouts and visual mockups.
      </Text>
      <Heading mt={3}>With Two lines </Heading>
      <Text noOfLines={2}>
        "The quick brown fox jumps over the lazy dog" is an English-language
        pangram—a sentence that contains all of the letters of the English
        alphabet. Owing to its existence, Chakra was created.
      </Text>
    </VStack>;
};

Playground
const Example = () => {
  return <Text>
      This is the <Text bold>nested</Text> example.
    </Text>;
};
const Example = () => {
  return <Text>
      This is the <Text bold>nested</Text> example.
    </Text>;
};

Playground
const Example = () => {
  return <VStack space={2} alignItems="center">
      <Text fontSize={20}>Custom font-size value for this text</Text>
      <Text bold>Bold</Text>
      <Text italic>Italic</Text>
      <Text underline>Underline</Text>
      <Text highlight>Highlighted</Text>
      <Text>
        H<Text sub>2</Text>O
      </Text>
      <Text underline>Underline</Text>
      <Text strikeThrough>StrikeThrough</Text>
      <Text bold italic underline>
        Bold, Italic & Underline
      </Text>
    </VStack>;
};
const Example = () => {
  return <VStack space={2} alignItems="center">
      <Text fontSize={20}>Custom font-size value for this text</Text>
      <Text bold>Bold</Text>
      <Text italic>Italic</Text>
      <Text underline>Underline</Text>
      <Text highlight>Highlighted</Text>
      <Text>
        H<Text sub>2</Text>O
      </Text>
      <Text underline>Underline</Text>
      <Text strikeThrough>StrikeThrough</Text>
      <Text bold italic underline>
        Bold, Italic & Underline
      </Text>
    </VStack>;
};