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.

Practice

1. What is the primary purpose of the Text component in React Native?

easy

A. To create buttons for user interaction

B. To handle navigation between screens

C. To display readable text on the screen

D. To load images from the internet

Solution

1. Step 1: Understand the role of Text component

   The Text component is designed to show text content in the app UI.

2. Step 2: Compare with other components

   Buttons handle clicks, navigation manages screens, images show pictures, so they are different.

3. Final Answer:

   To display readable text on the screen -> Option C

4. Quick Check:

   Text component = display text [OK]

Hint: Text component always shows text content [OK]

Common Mistakes:

• Confusing Text with Button
• Thinking Text handles navigation
• Using Text for images

2. Which of the following is the correct way to apply a style to a Text component in React Native?

easy

A. Hello

B. Hello

C. Hello

D. Hello

Solution

1. Step 1: Identify correct style prop syntax

   React Native uses style={{key: value}} with double curly braces for inline styles.

2. Step 2: Check each option

   Hello uses correct syntax. Options A, B, C have wrong prop names or wrong value formats.

3. Final Answer:

   <Text style={{fontSize: 20}}>Hello</Text> -> Option D

4. Quick Check:

   Style prop = double curly braces object [OK]

Hint: Use style={{key: value}} for styling Text [OK]

Common Mistakes:

• Using 'styles' instead of 'style'
• Passing style as string
• Using array without brackets

3. What will be displayed on the screen when this code runs?

const name = 'Anna';
return <Text>Hello, {name}!</Text>

medium

A. Hello, {name}!

B. Hello, Anna!

C. Hello, name!

D. Syntax Error

Solution

1. Step 1: Understand JSX expression inside Text

   Curly braces inside Text allow embedding JavaScript variables.

2. Step 2: Substitute variable value

   The variable name is 'Anna', so it replaces {name} with 'Anna'.

3. Final Answer:

   Hello, Anna! -> Option B

4. Quick Check:

   JSX variable inside Text = replaced value [OK]

Hint: Use curly braces to show variables inside Text [OK]

Common Mistakes:

• Showing variable name as string
• Forgetting curly braces
• Syntax errors in JSX

4. Identify the error in this React Native code snippet:

return <Text style={{fontSize: 18, color: 'blue'}}>Welcome</Text>;

medium

A. No error, code is correct

B. Extra semicolon after Text component

C. Missing closing tag for Text

D. Incorrect style object syntax

Solution

1. Step 1: Check JSX syntax

   The Text component is properly opened and closed with correct style prop syntax.

2. Step 2: Verify semicolon usage

   Semicolon after JSX return is allowed in JavaScript; no syntax error.

3. Final Answer:

   No error, code is correct -> Option A

4. Quick Check:

   Valid JSX with style and semicolon [OK]

Hint: JSX can end with semicolon; style object must be valid [OK]

Common Mistakes:

• Thinking semicolon breaks JSX
• Missing closing tag
• Wrong style syntax

5. You want to display a greeting that changes based on the time of day inside a Text component. Which code correctly shows "Good morning" if before noon, otherwise "Good afternoon"?

hard

A. {new Date().getHours() < 12 ? 'Good morning' : 'Good afternoon'}

B. new Date().getHours() < 12 ? 'Good morning' : 'Good afternoon'

C. {if (new Date().getHours() < 12) 'Good morning' else 'Good afternoon'}

D. {new Date().getHours() < 12 && 'Good morning'}

Solution

1. Step 1: Use JavaScript expression inside Text

   Curly braces allow embedding JS expressions like ternary operator.

2. Step 2: Check syntax correctness

   {new Date().getHours() < 12 ? 'Good morning' : 'Good afternoon'} uses correct ternary syntax. new Date().getHours() < 12 ? 'Good morning' : 'Good afternoon' misses braces, so shows text literally. {if (new Date().getHours() < 12) 'Good morning' else 'Good afternoon'} uses invalid if-else inside JSX. {new Date().getHours() < 12 && 'Good morning'} uses logical operators incorrectly and shows nothing in the afternoon.

3. Final Answer:

   <Text>{new Date().getHours() < 12 ? 'Good morning' : 'Good afternoon'}</Text> -> Option A

4. Quick Check:

   Ternary inside Text with braces = correct [OK]

Hint: Use ternary operator inside braces for conditional Text [OK]

Common Mistakes:

• Missing braces for JS expression
• Using if-else directly inside JSX
• Using && and || incorrectly