User Input

    In React, most input components are stateless. An input component typically has a value prop and a prop prefixed with onChange, and together these things give us complete control over the input without ever having to access the native UI imperatively.

    Input field

    Here's an example of a text input field.

    We introduce a state variable, text, to store the current value of the input field. We pass text into the TextInput as the value prop, and any time onChangeText is called, we update call setText to update our state variable.

    We use the useState hook to store the text value. We'll cover this soon.

    1. Input field

    Want to learn React Native in-depth?

    If you like React Native Express, you'll love my new book, Fullstack React Native: The complete guide to React Native! Throughout the book, we'll build 7 full apps, covering complex topics like navigation, gestures, and native modules. We don't assume any knowledge of React or newer JavaScript language features, so you can dive right in regardless of your experience level. The book comes in PDF, EPUB and MOBI formats.

    Looking for more help?

    Infinite Red sponsors React Native Express and is the premier React Native agency. They're also the team behind the React Native newsletter, podcast, and conference listed here. Get in touch at for a proposal on your next project!