The TextInput component

We will use this component often in the next section. The general idea is to be able to pass data from a smartphone keyboard. TextInput is used in login and registration forms and many other places where the user needs to send text data to an application.

Let's extend the HelloWorld example from Chapter 1, React Component Patterns, to accept a name:

// Chapter 2 / Example 6 / src / TextInputExample.js
export default class TextInputExample extends React.Component {
    state = {
        name: null
    };

    render = () => (
        <View style={styles.container}>
            {this.state.name && (
                <Text style={styles.text}>
                    Hello {this.state.name}
                </Text>
            )}
            <Text>Hands-On Design Patterns with React Native</Text>
            <Text>Chapter 2: View Patterns</Text>
            <Text style={styles.text}>
                Enter your name below and see what happens.
            </Text>
 <TextInput
 style={styles.input}
                onChangeText={name => this.setState({name})}
            />
        </View>
    );
}
// ... styles skipped for clarity in a book, check source files.

If a user enters text in the TextInput component, then we display the entered text in a short greeting. Conditional rendering uses state to check whether the name has been defined or not. As the user types, the onChangeText event handler is invoked, and the function we passed updates the state with the new name.