Skip to main content
Text is the fundamental component for displaying text. The Text component supports nesting, styling, and touch handling.

​
Import

import { Text } from 'react-native';

​
Basic Usage

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

function BasicText() {
  return <Text style={styles.text}>Hello World</Text>;
}

const styles = StyleSheet.create({
  text: {
    fontSize: 16,
    color: '#333',
  },
});

​
Props

​
Content Props

​
children
React.Node
The text content to display.

​
Styling Props

​
style
TextStyle
Text styling including font properties, color, and text decoration. Supports all text-specific style properties.

​
Display Props

​
numberOfLines
number
Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number.
​
ellipsizeMode
'head' | 'middle' | 'tail' | 'clip'
default:"'tail'"
When numberOfLines is set, this prop defines how text will be truncated.
  • head - The line is displayed so that the end fits in the container and the missing text at the beginning is indicated by an ellipsis. e.g., “…wxyz”
  • middle - The line is displayed so that the beginning and end fit in the container and the missing text in the middle is indicated by an ellipsis. “ab…yz”
  • tail - The line is displayed so that the beginning fits in the container and the missing text at the end is indicated by an ellipsis. e.g., “abcd…”
  • clip - Lines are not drawn past the edge of the text container (iOS only)

​
Font Props

​
allowFontScaling
boolean
default:"true"
Whether fonts should scale to respect Text Size accessibility settings.
​
maxFontSizeMultiplier
number
Specifies largest possible scale a font can reach when allowFontScaling is enabled.
  • null/undefined (default): inherit from the parent node or the global default (0)
  • 0: no max, ignore parent/global default
  • >= 1: sets the maxFontSizeMultiplier of this node to this value

​
Interaction Props

​
selectable
boolean
Lets the user select text, to use the native copy and paste functionality.
​
onPress
(event: GestureResponderEvent) => void
This function is called on press. Text intrinsically supports press handling with a default highlight state.
​
onLongPress
(event: GestureResponderEvent) => void
This function is called on long press.
​
pressRetentionOffset
Insets
Defines how far your touch may move off of the button, before deactivating the button.
​
disabled
boolean
Specifies the disabled state of the text view for testing purposes.

​
Identification Props

​
id
string
Used to reference react managed views from native code.
​
nativeID
string
Used to locate this view from native code.
​
testID
string
Used to locate this view in end-to-end tests.

​
Event Handlers

​
onLayout
(event: LayoutEvent) => void
Invoked on mount and layout changes with {nativeEvent: { layout: {x, y, width, height}}}.
​
onTextLayout
(event: TextLayoutEvent) => void
Called when the text layout changes.

​
Platform-Specific Props

​
adjustsFontSizeToFit
boolean
Specifies whether font should be scaled down automatically to fit given style constraints.
​
suppressHighlighting
boolean
When true, no visual change is made when text is pressed down. By default, a gray oval highlights the text on press down.
​
lineBreakStrategyIOS
'none' | 'standard' | 'hangul-word' | 'push-out'
Set line break strategy on iOS.
​
dynamicTypeRamp
string
The Dynamic Type scale ramp to apply to this element on iOS. Options include: ‘caption2’, ‘caption1’, ‘footnote’, ‘subheadline’, ‘callout’, ‘body’, ‘headline’, ‘title3’, ‘title2’, ‘title1’, ‘largeTitle’.

​
Examples

​
Nested Text with Styles

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

function NestedText() {
  return (
    <Text style={styles.baseText}>
      I am bold
      <Text style={styles.innerText}> and red</Text>
    </Text>
  );
}

const styles = StyleSheet.create({
  baseText: {
    fontWeight: 'bold',
    fontSize: 16,
  },
  innerText: {
    color: 'red',
  },
});

​
Truncated Text

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

function TruncatedText() {
  return (
    <Text 
      style={styles.text}
      numberOfLines={2}
      ellipsizeMode='tail'
    >
      This is a very long text that will be truncated after two lines.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </Text>
  );
}

const styles = StyleSheet.create({
  text: {
    fontSize: 14,
  },
});

​
Pressable Text

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

function PressableText() {
  return (
    <Text 
      style={styles.link}
      onPress={() => Alert.alert('Text pressed!')}
    >
      Click me
    </Text>
  );
}

const styles = StyleSheet.create({
  link: {
    color: '#007AFF',
    textDecorationLine: 'underline',
  },
});

​
Selectable Text

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

function SelectableText() {
  return (
    <Text style={styles.text} selectable={true}>
      You can select and copy this text.
    </Text>
  );
}

const styles = StyleSheet.create({
  text: {
    fontSize: 16,
  },
});

Build docs developers (and LLMs) love

Get started for freeTalk to us