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'.