Text component in React Native - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the <Text> component in React Native?

The <Text> component is used to display text on the screen in a React Native app. It can show simple or styled text and supports nesting other <Text> components.

beginner

How do you apply styles to a <Text> component in React Native?

You apply styles by passing a style object or array to the style prop of the component, for example: Hello.

intermediate

Can you nest <Text> components inside each other in React Native? Why?

Yes, nesting <Text> components is allowed and useful to apply different styles to parts of the text or to combine text with inline elements.

intermediate

What accessibility feature should you consider when using <Text> components?

Use the accessibilityLabel prop to provide a descriptive label for screen readers, especially if the text is not clear or is an icon substitute.

intermediate

How does the <Text> component handle long text that doesn't fit on one line?

By default, <Text> wraps text to the next line. You can control this with props like numberOfLines to limit lines or ellipsizeMode to show '...' when text is cut off.

Which prop is used to style a <Text> component in React Native?

A className

B textStyle

C css

D style

The style prop is used to apply styles to React Native components, including .

What happens if you nest multiple <Text> components inside each other?

A You can apply different styles to parts of the text

B Only the outermost text is shown

C It causes an error

D Text components cannot be nested

Nesting components allows styling different parts of the text separately.

How do you limit a <Text> component to show only 2 lines of text?

A Use maxLines={2}

B Use lineLimit={2}

C Use numberOfLines={2}

D Use lines={2}

The numberOfLines prop limits how many lines the text can occupy.

Which prop helps screen readers understand the purpose of a <Text> component?

A accessibilityLabel

B ariaLabel

C label

D screenReaderText

accessibilityLabel provides a description for screen readers in React Native.

What is the default behavior of <Text> when the text is too long for one line?

A It cuts off the text

B It wraps the text to the next line

C It scrolls horizontally

D It shows an error

wraps long text to the next line by default.

Explain how you would display a styled sentence with one word in bold using the component.

Think about putting a <Text> inside another <Text> and styling the inner one.

Describe how to make text accessible for screen readers in React Native using the component.

Consider what helps a screen reader understand what the text means.