TextInput component in React Native - Mini App: Build & Ship

Build: Simple Text Input

This screen lets the user type text into a box and shows the typed text below it.

Target UI

-------------------------
| Simple Text Input      |
|-----------------------|
| [___________________] |
|                       |
| Typed text appears here|
-------------------------

Add a TextInput where the user can type text.

Show the typed text below the TextInput in real time.

Use a placeholder text 'Type here...'.

Ensure the TextInput has a border and some padding.

Starter Code

React Native

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

export default function SimpleTextInput() {
  // TODO: Add state to store typed text

  return (
    <View style={styles.container}>
      {/* TODO: Add TextInput here */}
      {/* TODO: Show typed text here */}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    justifyContent: 'center',
  },
});

Task 1

Task 2

Task 3

Task 4

Solution

React Native

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

export default function SimpleTextInput() {
  const [text, setText] = useState('');

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Type here..."
        onChangeText={setText}
        value={text}
        accessibilityLabel="Text input field"
      />
      <Text style={styles.displayText}>{text}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    justifyContent: 'center',
  },
  input: {
    borderWidth: 1,
    borderColor: '#888',
    padding: 10,
    borderRadius: 5,
    fontSize: 16,
  },
  displayText: {
    marginTop: 20,
    fontSize: 18,
    color: '#333',
  },
});

We use React's useState hook to keep track of the text the user types. The TextInput component has a placeholder to show a hint. The onChangeText updates the state whenever the user types. The typed text is shown below in a Text component. Styles add a border and padding for a clear input box. Accessibility label helps screen readers.

Final Result

Completed Screen

-------------------------
| Simple Text Input      |
|-----------------------|
| [Type here...       ] |
|                       |
| Hello world           |
-------------------------

User taps the input box and types text.

Typed text appears instantly below the input box.

Stretch Goal

Add a clear button that erases the typed text when pressed.

💡 Hint

Use a button next to the TextInput that calls setText('') when pressed.

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