Edit

Text

A React component for displaying text which supports nesting, styling, and touch handling. In the following example, the nested title and body text will inherit the fontFamily from styles.baseText, but the title provides its own additional styles. The title and body will stack on top of each other on account of the literal newlines:

renderText: function() {
  return (
    <Text style={styles.baseText}>
      <Text style={styles.titleText} onPress={this.onPressTitle}>
        {this.state.titleText + '\n\n'}
      </Text>
      <Text numberOfLines={5}>
        {this.state.bodyText}
      </Text>
    </Text>
  );
},
...
var styles = StyleSheet.create({
  baseText: {
    fontFamily: 'Cochin',
  },
  titleText: {
    fontSize: 20,
    fontWeight: 'bold',
  },
};

Props

• numberOfLines
• onLayout
• onPress
• style
• testID
• suppressHighlighting

Methods

• onStartShouldSetResponder
• handleResponderTerminationRequest
• handleResponderGrant
• handleResponderMove
• handleResponderRelease
• handleResponderTerminate

---

Reference

Props

numberOfLines

Used to truncate the text with an elipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number.

Type	Required
number	No

---

onLayout

Invoked on mount and layout changes with

{nativeEvent: {layout: {x, y, width, height}}}

Type	Required
function	No

---

onPress

This function is called on press.

Type	Required
function	No

---

style

Type	Required
style	No

• View Style Props...

• textAlign: enum('auto', 'left', 'right', 'center', 'justify')

  Specifies text alignment. The value 'justify' is only supported on iOS.

• color: string

• fontSize: number

• fontStyle: enum('normal', 'italic')

• fontWeight: enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')

  Specifies font weight. The values 'normal' and 'bold' are supported for most fonts. Not all fonts have a variant for each of the numeric values, in that case the closest one is chosen.

• lineHeight: number

• fontFamily: string

• letterSpacing: number (iOS)

• textDecorationColor: string (iOS)

• textDecorationLine: enum('none', 'underline', 'line-through', 'underline line-through') (iOS)

• textDecorationStyle: enum('solid', 'double', 'dotted', 'dashed') (iOS)

• writingDirection: enum('auto', 'ltr', 'rtl') (iOS)

---

testID

Used to locate this view in end-to-end tests.

Type	Required
string	No

---

suppressHighlighting

When true, no visual change is made when text is pressed down. By default, a gray oval highlights the text on press down.

Type	Required	Platform
bool	No	iOS

Methods

onStartShouldSetResponder()

onStartShouldSetResponder():

---

handleResponderTerminationRequest()

handleResponderTerminationRequest():

---

handleResponderGrant()

handleResponderGrant((e: SyntheticEvent), (dispatchID: string));

---

handleResponderMove()

handleResponderMove((e: SyntheticEvent));

---

handleResponderRelease()

handleResponderRelease((e: SyntheticEvent));

---

handleResponderTerminate()

handleResponderTerminate((e: SyntheticEvent));