Collecting text input

It turns out that there’s a lot to think about when it comes to implementing text inputs. For example, should it have placeholder text? Is this sensitive data that shouldn’t be displayed on the screen? Should you process text as it’s entered or when the user moves to another field?

In web apps, there is a special <input> HTML element that allows you to collect user inputs. In React Native, for that purpose, we use the TextInput component. Let’s build an example that renders several instances of the <TextInput> component:

function Input(props: InputProps) {
  return (
    <View style={styles.textInputContainer}>
      <Text style={styles.textInputLabel}>{props.label}</Text>
      <TextInput style={styles.textInput} {...props} />
    </View>
  );
}

We have implemented the Input component that we will reuse several times. Let’s take a look at a few use cases of text inputs...