Text component in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What will this Text component display?

Consider this React Native code snippet:

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

export default function App() {
  return Hello World;
}

What will the user see on the screen?

React Native

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

export default function App() {
  return <Text style={{fontWeight: 'bold', fontSize: 20}}>Hello World</Text>;
}

A The text 'Hello World' in bold and larger font size

B The text 'Hello World' in normal font weight and default size

C An error because fontWeight cannot be 'bold' in React Native

D The text 'Hello World' but invisible because no color is set

💡 Hint

Check the style properties applied to the Text component.

The style prop sets fontWeight to 'bold' and fontSize to 20, so the text appears bold and larger than default.

📝 Syntax

intermediate

Which option correctly renders multi-line text in React Native?

You want to display this text with line breaks:

Hello
World

Which code snippet will show the text on two lines?

A <Text>Hello\nWorld</Text>

B

<Text>Hello
World</Text>

C

<Text>Hello{'
'}World</Text>

D <Text>{'Hello\nWorld'}</Text>

💡 Hint

In JSX, how do you insert a newline character inside text?

Using {'\n'} inside Text inserts a newline. Plain '\n' inside JSX text is not interpreted as newline.

❓ lifecycle

advanced

What happens if you update state inside a Text component's onPress?

Given this code:

const [count, setCount] = React.useState(0);

return  setCount(count + 1)}>Count: {count};

What will happen when the user taps the text multiple times?

React Native

const [count, setCount] = React.useState(0);

return <Text onPress={() => setCount(count + 1)}>Count: {count}</Text>;

A The number after 'Count:' increases by 1 each tap

B The text does not change because Text cannot handle onPress

C The app crashes because setCount is called inside Text

D The number resets to 0 after each tap

💡 Hint

Text supports onPress and state updates cause re-render.

Text supports onPress. Each tap calls setCount to increase count, updating the displayed number.

🔧 Debug

advanced

Why does this Text component not show the expected color?

Look at this code:

Hello
World

Both texts appear black on the screen. Why?

React Native

<Text style={{color: 'red', fontSize: 18}}>Hello</Text>
<Text style={{color: 'blue'}}>World</Text>

A React Native does not support color style on Text components

B The parent component has a style overriding text color to black

C The color property must be set using 'textColor' instead of 'color'

D The styles are correct; the problem is the device's dark mode

💡 Hint

Check if any parent container styles affect text color.

A parent container style can override child text colors. React Native supports color on Text. 'textColor' is invalid.

🧠 Conceptual

expert

How does React Native handle nested Text components?

Consider this code:

  Hello World

What will be the visual result on the screen?

React Native

<Text style={{fontSize: 20}}>
  Hello <Text style={{fontWeight: 'bold'}}>World</Text>
</Text>

A Only 'Hello' is shown, 'World' is ignored inside nested Text

B Both 'Hello' and 'World' are bold and font size 20

C The entire text is normal weight and default font size

D The word 'Hello' is normal weight, 'World' is bold, both font size 20

💡 Hint

Nested Text inherits styles but can override some properties.

The outer Text sets fontSize 20 for all text. The inner Text overrides fontWeight to bold only for 'World'.

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