React Native | Text Component

Hello React Native Friends,

In this comprehensive guide, we’ll delve into the depths of React Native Text, exploring its attributes, and examples for leveraging it to create captivating user interfaces.

React Native Text is a fundamental component for displaying text in React Native applications. One of the key advantages of React Native Text is its flexibility in styling. Similar to CSS in web development, React Native Text allows developers to apply styles such as font size, color, alignment, and text decorations effortlessly. These styles can be applied inline using the style prop or defined externally and referenced within the component.

Attributes of React Native Text Component:

In React Native, the Text component has various attributes (props) that you can use to control its appearance and behavior. Here are some of the most commonly used attributes of the Text component:

ellipsizeMode: 

Determines how the text content should be truncated if it overflows its container. Options include ‘head’, ‘middle’, ‘tail’, and ‘clip’.

<Text numberOfLines={1} ellipsizeMode='tail'>Long text that will be truncated at the end.</Text>

numberOfLines:

Specifies the maximum number of lines for the text to display before truncating.

<Text numberOfLines={2}>This text will be truncated after two lines.</Text>

onPress:

Allows you to specify a function to be called when the text is pressed, enabling touch events.

<Text onPress={() => alert('Text pressed!')}>Press me</Text>

style:

Allows you to apply styles to the text, either using inline styles or referencing a style object.

<Text style={{ fontSize: 20, color: 'red' }}>Styled text</Text>

minimumFontScale:

Specifies the minimum scale factor for the text when adjustsFontSizeToFit is enabled.

<Text adjustsFontSizeToFit={true} minimumFontScale={0.5}>This text will adjust its font size, but won't go below 50% of its original size.</Text>

adjustsFontSizeToFit:

Determines whether the text should automatically adjust its font size to fit within its container.

<Text adjustsFontSizeToFit={true}>This text will adjust its font size to fit its container.</Text>

allowFontScaling:

Specifies whether the text should automatically scale with the system’s font size settings.

<Text allowFontScaling={false}>This text won't scale with the system font size.</Text>

Example of React Native Text Component:

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

const TextInANest = () => {
  const [titleText, setTitleText] = useState("Bird's Nest");
  const bodyText = 'This is not really a bird nest.';

  const onPressTitle = () => {
    setTitleText("Bird's Nest [pressed]");
  };

  return (
    <Text style={styles.baseText}>
      <Text style={styles.titleText} onPress={onPressTitle}>
        {titleText}
        {'\n'}
        {'\n'}
      </Text>
      <Text numberOfLines={5}>{bodyText}</Text>
    </Text>
  );
};

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

export default TextInANest;

Conclusion:

React Native Text is a powerful and versatile component for rendering text in React Native applications. By understanding the intricacies of React Native Text and leveraging its features effectively, developers can elevate the quality of their applications and deliver exceptional user interfaces that captivate and engage users.

Alternatively, the React Native TextInput component allows the user to input text.

Happy Coding!