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.

Practice

1. What is the main purpose of the TextInput component in React Native?

easy

A. To display images

B. To create buttons

C. To let users type text in the app

D. To navigate between screens

Solution

1. Step 1: Understand the role of TextInput

   The TextInput component is designed to allow users to enter text data in the app interface.

2. Step 2: Compare with other components

   Other options like displaying images or creating buttons are done by different components, not TextInput.

3. Final Answer:

   To let users type text in the app -> Option C

4. Quick Check:

   TextInput = user text entry [OK]

Hint: TextInput is for typing text only [OK]

Common Mistakes:

• Confusing TextInput with Image or Button components
• Thinking TextInput handles navigation
• Assuming TextInput displays static content

2. Which of the following is the correct way to update the text state when using TextInput?

easy

A. setText(text)} value={text} />

B. setText(text)} value={text} />

C. setText(text)} value={text} />

D. setText(text)} />

Solution

1. Step 1: Identify the correct event prop for text change

   The correct prop to handle text changes in TextInput is onChangeText.

2. Step 2: Check the syntax for updating state

   The function should receive the new text and call the state setter like setText(text).

3. Final Answer:

   <TextInput onChangeText={(text) => setText(text)} value={text} /> -> Option A

4. Quick Check:

   Use onChangeText to update state [OK]

Hint: Use onChangeText, not onChange or others [OK]

Common Mistakes:

• Using onChange instead of onChangeText
• Using wrong prop names like onTextChange
• Not passing the text parameter correctly

3. What will be displayed when the following code runs?

const [text, setText] = React.useState('Hello');

return (
  <TextInput
    value={text}
    onChangeText={setText}
    placeholder="Type here"
  />
);

medium

A. An input box showing 'Type here' as text

B. An input box showing 'Hello' with placeholder 'Type here'

C. An empty input box with placeholder 'Type here'

D. A blank screen with no input box

Solution

1. Step 1: Check initial state value

   The state variable text is initialized with 'Hello', so the input shows this text.

2. Step 2: Understand placeholder behavior

   The placeholder text 'Type here' only shows when the input is empty, but here the input has 'Hello'.

3. Final Answer:

   An input box showing 'Hello' with placeholder 'Type here' -> Option B

4. Quick Check:

   Value overrides placeholder if not empty [OK]

Hint: Value text shows over placeholder if not empty [OK]

Common Mistakes:

• Thinking placeholder text shows even if value exists
• Confusing placeholder with default value
• Expecting empty input when state has text

4. Identify the error in this code snippet:

const [input, setInput] = React.useState('');

return (
  <TextInput
    value={input}
    onChange={(text) => setInput(text)}
  />
);

medium

A. setInput should not be called inside onChange

B. Missing value prop

C. State variable should be named text

D. Using onChange instead of onChangeText

Solution

1. Step 1: Check event handler prop name

   The TextInput component uses onChangeText to handle text changes, not onChange.

2. Step 2: Confirm other props are correct

   The value prop is present and state usage is correct.

3. Final Answer:

   Using onChange instead of onChangeText -> Option D

4. Quick Check:

   Use onChangeText for text input changes [OK]

Hint: Remember: onChangeText, not onChange [OK]

Common Mistakes:

• Using onChange instead of onChangeText
• Forgetting to pass value prop
• Misnaming state variables

5. You want to create a controlled TextInput that clears its text when the user submits. Which approach is correct?

const [text, setText] = React.useState('');

return (
  <TextInput
    value={text}
    onChangeText={setText}
    onSubmitEditing={() => setText('')}
    placeholder="Enter text"
  />
);

hard

A. This code clears the input text on submit correctly

B. onSubmitEditing should update state with current text, not empty

C. Need to use onEndEditing instead of onSubmitEditing

D. Cannot clear text on submit with controlled TextInput

Solution

1. Step 1: Understand controlled TextInput behavior

   The input text is controlled by the text state and updated by onChangeText.

2. Step 2: Check onSubmitEditing handler

   The onSubmitEditing callback sets the text state to empty string, clearing the input on submit.

3. Final Answer:

   This code clears the input text on submit correctly -> Option A

4. Quick Check:

   onSubmitEditing can clear controlled input [OK]

Hint: Use onSubmitEditing to reset state for clearing input [OK]

Common Mistakes:

• Using wrong event like onEndEditing
• Trying to clear input without updating state
• Assuming uncontrolled input clears automatically