TextInput component in React Native - Cheat Sheet & Quick Revision

Recall & Review

beginner

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

The <TextInput> component allows users to enter and edit text in a React Native app, similar to a text box in web forms.

beginner

How do you capture the text entered by a user in a <TextInput>?

You use the onChangeText prop to provide a function that receives the current text value whenever it changes.

beginner

Which prop controls the placeholder text shown inside a <TextInput> before the user types?

The placeholder prop sets the light text shown inside the input when it is empty, guiding the user what to enter.

intermediate

How can you make a <TextInput> secure for entering passwords?

Set the secureTextEntry prop to true to hide the text input, showing dots or asterisks instead of the actual characters.

intermediate

What is the difference between controlled and uncontrolled <TextInput> components?

A controlled <TextInput> has its value managed by React state via the value prop, while an uncontrolled one manages its own internal state without React controlling it.

Which prop do you use to update React state when the user types in a <TextInput>?

A value

B onChangeText

C placeholder

D secureTextEntry

The onChangeText prop is a function called with the new text whenever the user types.

How do you show a hint inside a <TextInput> before the user types?

A placeholder

B defaultValue

C hintText

D label

The placeholder prop displays light text inside the input as a hint.

What prop makes a <TextInput> hide the entered text for passwords?

A secureTextEntry

B password

C hidden

D maskText

secureTextEntry=true hides the text input for password fields.

Which prop sets the current text shown inside a controlled <TextInput>?

A text

B content

C value

D defaultValue

The value prop controls the text shown in a controlled .

What happens if you omit the onChangeText prop in a controlled <TextInput>?

A The input shows placeholder text

B The input clears automatically

C The input crashes the app

D The input becomes read-only

Without onChangeText updating state, the controlled input cannot change and acts read-only.

Explain how to create a controlled in React Native and why it is useful.

Think about how React state keeps the input text in sync.

Describe how to make a password input field using and what prop you need.

It’s a simple boolean prop that changes how text is displayed.