How to create a simple text in React Native? Code Example

In order to create text in React Native we need to use <Text> component. This is one of the most useful component and highly customizable.

Text component supports various styles related to fonts like font-family, weight, size, style, color etc.

Code Example

import React, { useState } from "react";
import { Text, StyleSheet } from "react-native";

const TextExample = () => {
  
  return (
    <Text style={[styles.baseText, styles.titleText]}>
      This is a simple text
    </Text>
  );
};

const styles = StyleSheet.create({
  baseText: {
    fontFamily: "Cochin"
  },
  titleText: {
    fontSize: 20,
    fontWeight: "bold"
  }
});

export default TextExample;

Output –

In the code we are setting the Text block in line 7.

Live Demo

Conclusion

A text block can be added to the application in React Native using <Text> component. We can customize it’s styles and various other properties. In the upcoming articles we will cover all those things.