How to add email validation with React Native?

Sometimes, we want to add email validation with React Native.

In this article, we’ll look at how to add email validation with React Native.

How to add email validation with React Native?

To add email validation with React Native, we can use the regex test method.

For instance, we write:

import * as React from 'react';
import { View, TextInput } from 'react-native';
import Constants from 'expo-constants';
import { Card } from 'react-native-paper';

export default function App() {
  const validate = (text) => {
    const reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w\w+)+$/;
    console.log(text, reg.test(text));
  };

  return (
    <View>
      <TextInput placeholder="Email" onChangeText={validate} />
    </View>
  );
}

to create the validate function that calls reg.test with the text to validate.

reg is the pattern for emails.

We check if text is a string with groups of characters separated by periods combined with an @.

Then we set the onChangeText prop to validate to validate the email as we type.

Conclusion

To add email validation with React Native, we can use the regex test method.