React Native TextInput

Summary: in this tutorial, you will learn how to use the React Native TextInput component to create text inputs for your apps.

Introduction to the React Native TextInput component

The TextInput component allows you to create a text input field. Here are the steps for using the TextInput component:

First, import the TextInput component from react-native library:

import TextInput from 'react-native';Code language: JavaScript (javascript)

Second, add the TextInput to a React Native component:

const App = () => {
  return (
    <SafeAreaView>
      <TextInput />
    </SafeAreaView>
  )
}Code language: JavaScript (javascript)

Here’s the complete app:

import { StyleSheet, SafeAreaView, TextInput } from 'react-native'

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <TextInput />
    </SafeAreaView>
  )
}

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

});

export default App;Code language: JavaScript (javascript)

Output:

By default, the TextInput component has no style so it’s difficult to recognize. Let’s add some styles to the TextInput component to make it usable.

Styling TextInput

To change the appearance of the TextInput component, you can use the style prop.

The style prop allows you to apply custom styles to the text input like adding borders and changing font size.

For example:

import { StyleSheet, SafeAreaView, TextInput } from 'react-native'

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <TextInput style={styles.input} />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 16
  },
  input: {
    borderWidth: 1,
    borderRadius: 8,
    borderColor: '#ccc',
    paddingHorizontal: 16,
    paddingVertical: 8,
    marginVertical: 12,
    fontSize: 16,
  },
});

export default App;Code language: JavaScript (javascript)

Output:

Adding placeholders

A placeholder appears on the TextInput when it has no value. To add a placeholder to the TextInput component, you can use the placeholder prop:

import { StyleSheet, SafeAreaView, TextInput } from 'react-native'

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Enter your name" />
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 16
  },
  input: {
    borderWidth: 1,
    borderRadius: 8,
    borderColor: '#ccc',
    paddingHorizontal: 16,
    paddingVertical: 8,
    marginVertical: 12,
    fontSize: 16,
  },
});

export default App;Code language: JavaScript (javascript)

Output:

Tracking user input

To track user input, you use the useState hook. For example, the following app tracks the text input and shows it on a Text component:

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

const App = () => {
  const [name, setName] = useState('');

  return (
    <SafeAreaView style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Enter your name"
        value={name}
        onChangeText={setName} />
      <Text style={styles.output}>You entered: {name}</Text>
    </SafeAreaView>
  );

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 16
  },
  input: {
    borderWidth: 1,
    borderRadius: 8,
    borderColor: '#ccc',
    paddingHorizontal: 16,
    paddingVertical: 8,
    marginVertical: 12,
    fontSize: 16,
  },
  output: {
    fontSize: 16,
  }
});

export default App;Code language: JavaScript (javascript)

How it works.

First, define a state variable name using the useState hook:

const [name, setName] = useState('');Code language: JavaScript (javascript)

Second, set the value prop value to the name variable and onChange prop to the setName function:

<TextInput
   style={styles.input}
   placeholder="Enter your name"
   value={name}
   onChangeText={setName} />Code language: JavaScript (javascript)

Third, display the input text in a Text component:

<Text style={styles.output}>You entered: {name}</Text>Code language: HTML, XML (xml)

Output:

Adding a label

Typically, a TextInput component comes with a label. To do that, you can combine the TextInput with a Text component like this:

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

const App = () => {
  const [name, setName] = useState('');

  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.label}>Name:</Text>
      <TextInput
        style={styles.input}
        placeholder="Enter your name"
        value={name}
        onChangeText={setName} />
    </SafeAreaView>
  );

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 16
  },
  label: {
    fontWeight: 'bold',
    fontSize: 16,
  },
  input: {
    borderWidth: 1,
    borderRadius: 8,
    borderColor: '#ccc',
    paddingHorizontal: 16,
    paddingVertical: 8,
    marginVertical: 12,

    fontSize: 16,
  },
  output: {
    fontSize: 16,
  }
});

export default App;Code language: JavaScript (javascript)

Display keyboard

When you move focus to a TextInput, a default keyboard appears. To change the keyboard type, you can use the keyboardType prop. The keyboardType prop accepts the following value:

Here’s the list of keyboard types on Android and iOS.

For example, the following shows TextInput components with various keyboard type:

import { StyleSheet, SafeAreaView, TextInput, Text } from 'react-native'

const TextInputDemo = () => {

  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.label}>Name:</Text>
      <TextInput
        style={styles.input}
        placeholder="Enter your name"
      />

      <Text style={styles.label}>Email:</Text>
      <TextInput
        style={styles.input}
        placeholder="Enter your work email"
        keyboardType="email-address"
      />

      <Text style={styles.label}>Phone:</Text>
      <TextInput
        style={styles.input}
        placeholder="Enter your work email"
        keyboardType="phone-pad"
      />


      <Text style={styles.label}>Website:</Text>
      <TextInput
        style={styles.input}
        placeholder="Enter your homepage"
        keyboardType="url"
      />

    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 16
  },
  label: {
    fontWeight: 'bold',
    fontSize: 16,
  },
  input: {
    borderWidth: 1,
    borderRadius: 8,
    borderColor: '#ccc',
    paddingHorizontal: 16,
    paddingVertical: 8,
    marginVertical: 12,
    fontSize: 16,
  },
  output: {
    fontSize: 16,
  }
});

export default TextInputDemo;Code language: JavaScript (javascript)

Secure input

To hide sensitive text like passwords, you set the secureTextEntry prop to true. For example:

import { StyleSheet, SafeAreaView, TextInput, Text } from 'react-native'

const App = () => {

  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.label}>Email:</Text>
      <TextInput
        style={styles.input}
        placeholder="Enter your email"
        keyboardType="email-address"
      />

      <Text style={styles.label}>Password:</Text>
      <TextInput
        style={styles.input}
        placeholder="Enter your pasword"
        secureTextEntry={true}
      />

    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 16
  },
  label: {
    fontWeight: 'bold',
    fontSize: 16,
  },
  input: {
    borderWidth: 1,
    borderRadius: 8,
    borderColor: '#ccc',
    paddingHorizontal: 16,
    paddingVertical: 8,
    marginVertical: 12,
    fontSize: 16,
  },

});

export default App;Code language: JavaScript (javascript)

Output:

Multiline input

To let users enter multiple lines, you set the multiline prop to true. You can also specify the number of lines for the TextInput using the numberOfLines prop:

import { StyleSheet, SafeAreaView, TextInput, Text } from 'react-native'

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.label}>Address:</Text>
      <TextInput
        style={styles.textarea}
        multiline={true}
        numberOfLines={5}
        placeholder="400 North 5th Street"

      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 16
  },
  label: {
    fontWeight: 'bold',
    fontSize: 16,
  },
  textarea: {
    borderWidth: 1,
    borderRadius: 8,
    borderColor: '#ccc',
    paddingHorizontal: 16,
    paddingVertical: 8,
    marginVertical: 12,
    fontSize: 16,

  },
  output: {
    margin: 32,
    fontSize: 16,
  }
});

export default App;Code language: JavaScript (javascript)

Output:

Auto-correct

By default, the TextInput component has auto-correct enabled. In some cases, like a username field, you want to disable it by setting the autoCorrect prop to false. For example:

<TextInput autoCorrect={false} />Code language: HTML, XML (xml)

Auto-capitalize

To instruct TextInput to automatically capitalize input text, you can set the autoCapitalize prop to one of the following values:

For example, the following shows how to define a TextInput that has the autoCapitalize prop set to “none”

import { StyleSheet, SafeAreaView, TextInput, Text } from 'react-native'

const App = () => {

  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.label}>Username:</Text>
      <TextInput
        style={styles.input}
        autoCapitalize="none"
        autoCorrect={false}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 16
  },
  label: {
    fontWeight: 'bold',
    fontSize: 16,
  },
  input: {
    borderWidth: 1,
    borderRadius: 8,
    borderColor: '#ccc',
    paddingHorizontal: 16,
    paddingVertical: 8,
    marginVertical: 12,
    fontSize: 16,
  },
});

export default App;
Code language: JavaScript (javascript)

Output:

Auto-complete

When you specify autocomplete hints for a TextInput, the platform (i.e., Android or iOS) will provide autofill.

To set the hints, you use the autoComplete prop with a specific value. To disable autocomplete, you set its value to off.

For example, the following sets the autocomplete to email:

<TextInput autoCompleteType="email" />Code language: HTML, XML (xml)

Summary

• Use the TextInput component to create text inputs for your apps.
• Use the style prop to add styles to the TextInput component.
• Use the placeholder prop to display text when the TextInput component has no value.
• Use the useState hook to track user input.