How to create email id input field and keyboard in React Native?

Apart from normal input text field, we need to have a different keyboard layout for email fields. This is because an email is made up of letters, numbers, periods and @. All the email ids must have @ and period.

So, it is a good practice to provide these two characters in easy accessibility. Android and iOS has a separate layout of keyboard for email fields.

To open email layout of keyboard in React Native, we can use keyboardType=email-address. The <TextInput> component supports this.

Code Example

import React from "react";
import { SafeAreaView, StyleSheet, TextInput, View, Text } from "react-native";

const EmailTextInput = () => {
  const [number, onChangeNumber] = React.useState(null);

  return (
    <SafeAreaView>
      <View style={styles.container}>
        <Text>keyboardType = email-address</Text>
        <TextInput
          style={styles.input}
          onChangeText={onChangeNumber}
          value={number}
          keyboardType="email-address"
        />
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    marginTop: 40
  },
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
    padding: 10,
  },
});

export default EmailTextInput;

Output –

The first image is of iOS phone and second of Android. You can see how the keyboard looks like for email field. Both phones are showing @ and . buttons in the front view.

In line 15 we are setting keyboardType=email-address in our code.

Live Demo

Conclusion

To create an email input field with keyboard, you need to set TextInput prop keyboardType=email-address. It works with both Android and iOS apps.