TextInput component in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the output of this TextInput behavior?

Consider this React Native code snippet. What will the TextInput display after typing 'Hello' and then deleting the last letter?

React Native

import React, { useState } from 'react';
import { TextInput, View, Text } from 'react-native';

export default function App() {
  const [text, setText] = useState('');
  return (
    <View>
      <TextInput
        value={text}
        onChangeText={setText}
        placeholder="Type here"
      />
      <Text>{text}</Text>
    </View>
  );
}

A The TextInput shows 'Hell' and the Text below also shows 'Hell'.

B The TextInput shows 'Hello' but the Text below shows 'Hell'.

C The TextInput and Text below both show 'Hello'.

D The TextInput shows 'Hell' but the Text below shows 'Hello'.

💡 Hint

The TextInput's value is controlled by the state variable 'text'. When you delete a letter, the state updates accordingly.

The TextInput is controlled by the 'text' state. When you delete the last letter, the state updates to 'Hell', so both the input and the Text component show 'Hell'.

📝 Syntax

intermediate

Which option correctly sets a placeholder in TextInput?

You want to show a placeholder text 'Enter name' inside a TextInput. Which code snippet does this correctly?

A <TextInput placeholderText='Enter name' />

B <TextInput placeHolder='Enter name' />

C <TextInput placeholder='Enter name' />

D <TextInput placeholder-text='Enter name' />

💡 Hint

React Native uses camelCase props. Check the exact spelling of 'placeholder'.

The correct prop name is 'placeholder' all lowercase. Other variants like 'placeHolder' or 'placeholderText' are invalid and won't work.

❓ lifecycle

advanced

What happens when you set TextInput's editable prop to false?

If you set , what is the behavior of the input field?

A The TextInput becomes read-only; user cannot type or edit text.

B The TextInput disables only the placeholder text.

C The TextInput clears its content automatically.

D The TextInput hides the keyboard but still allows text editing.

💡 Hint

Think about what 'editable' means for a text input field.

Setting editable to false disables user interaction with the TextInput, making it read-only.

❓ navigation

advanced

How to dismiss the keyboard when pressing a button after typing in TextInput?

You have a TextInput and a Button. After typing, you want the keyboard to hide when the button is pressed. Which code snippet achieves this?

React Native

import React, { useState } from 'react';
import { TextInput, Button, View, Keyboard } from 'react-native';

export default function App() {
  const [text, setText] = useState('');
  return (
    <View>
      <TextInput value={text} onChangeText={setText} />
      <Button title="Submit" onPress={() => { /* What to do here? */ }} />
    </View>
  );
}

A onPress={() => TextInput.blur()}

B onPress={() => Keyboard.dismiss()}

C onPress={() => setText('')}

D onPress={() => Keyboard.show()}

💡 Hint

There is a Keyboard API in React Native to control the keyboard.

Keyboard.dismiss() hides the keyboard. Calling it inside onPress will close the keyboard when the button is pressed.

🔧 Debug

expert

Why does this TextInput not update the displayed text?

Look at this code. The user types but the TextInput does not show the typed text. What is the cause?

React Native

import React, { useState } from 'react';
import { TextInput, View } from 'react-native';

export default function App() {
  const [text, setText] = useState('');
  return (
    <View>
      <TextInput
        value={text}
        onChangeText={() => setText('')}
        placeholder="Type here"
      />
    </View>
  );
}

A The TextInput is missing a style, so text is invisible.

B The value prop is missing, so TextInput is uncontrolled.

C The placeholder prop is incorrectly used, causing no text display.

D The onChangeText handler resets text to empty string, so input never updates.

💡 Hint

Check what the onChangeText function does with the input value.

The onChangeText callback ignores the input and always sets text to empty string, so the input never shows typed characters.