TextInput with controlled state in React Native - Mini App: Build & Ship

Build: Controlled TextInput Screen

A screen with a text input field that shows the typed text below it in real time.

Target UI

-------------------------
| Controlled TextInput  |
|-----------------------|
| Enter text:           |
| [___________________] |
|                       |
| You typed:            |
|                       |
|                       |
-------------------------

Add a TextInput component with a placeholder 'Enter text:'

Use state to control the TextInput value

Display the typed text below the TextInput in a Text component

Update the displayed text as the user types

Starter Code

React Native

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

export default function ControlledTextInput() {
  // TODO: Add state for text input

  return (
    <View style={styles.container}>
      {/* TODO: Add TextInput with controlled value and onChangeText */}
      {/* TODO: Display typed text below */}
    </View>
  );
}

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

Task 1

Task 2

Task 3

Solution

React Native

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

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

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Enter text:"
        value={text}
        onChangeText={setText}
        accessibilityLabel="Text input field"
      />
      <Text style={styles.typedText} accessibilityLiveRegion="polite">
        You typed: {text}
      </Text>
    </View>
  );
}

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

We use React's useState hook to keep track of the text input's value. The TextInput component's value prop is set to this state, making it a controlled input. The onChangeText prop updates the state whenever the user types. Below the input, a Text component shows the current typed text, updating live as the user types. Accessibility labels and live region are added for screen reader support.

Final Result

Completed Screen

-------------------------
| Controlled TextInput  |
|-----------------------|
| Enter text:           |
| [Hello World______]   |
|                       |
| You typed:            |
| Hello World           |
|                       |
-------------------------

User taps the TextInput and types text

Typed text appears live below the input

Screen reader announces the input label and updates the typed text

Stretch Goal

Add a clear button inside the TextInput to erase all text

💡 Hint

Use a TouchableOpacity with an 'X' icon inside the TextInput container and clear the state on press