4 Ways to Implement Email Validation in React Native

Email validation is a key step for data quality in React Native applications. We will explore four ways to implement it, from local regex patterns to a full API check. You'll get working code for each, see the pitfalls of traditional methods, and learn how Abstract API offers a more complete solution.

How to Implement Email Validation in React Native

Here are a few ways to implement email validation in your React Native application. Each method offers a different approach to check user input on the client side.

Manual Regex in the Component

This method involves a controlled "TextInput" component where a regular expression evaluates the input each time the text field mutates. For production, prefer an RFC 5322-level pattern because it covers quoted strings, domain-literals, and unusual local-part characters.

The code sets up state for the email and its validity. The "onChange" function updates the email value and tests it against the "emailPattern" to set the validity state. This approach provides immediate, client-side feedback, a common method for React Native apps.

const [email, setEmail] = useState('');
const [valid, setValid] = useState(false);

const emailPattern =
  /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/i;

const onChange = txt => {
  setEmail(txt);
  setValid(emailPattern.test(txt.trim()));
};

Use of validator.js

The library "validator.js" includes an "isEmail" helper function. This function encapsulates a well-maintained regex pattern and handles dozens of edge-case flags, as detailed in guides on the topic.

You can add it to your project with "npm i validator". After tree-shaking, its bundle size is approximately 21 KB. The code shows how to import and use the "isEmail" function inside the "onChange" handler. Because the check is a pure function, you can memoize it or move it to a form context without side effects.

import isEmail from 'validator/lib/isEmail';

const onChange = txt => {
  setEmail(txt);
  setValid(isEmail(txt, { allow_utf8_local_part: false, require_tld: true }));
};

Formik and Yup Schema Validation

This approach combines Formik for state management and Yup for declarative schema validation. Yup provides a pre-built "email()" method for this purpose. Validation triggers on change or blur events, and Formik propagates any errors through its props.

The code demonstrates how to define a schema object with Yup. This schema specifies that the email field is a string, must be a valid email format, and is required. The "Formik" component then wraps the "TextInput" to connect the schema and state.

A key benefit is that the schema is portable. You can share it between your mobile and web applications to prevent validation logic from drift, a feature highlighted in React Native tutorials.

import { Formik } from 'formik';
import * as Yup from 'yup';

const schema = Yup.object({
  email: Yup.string().email('Invalid').required('Required')
});

<Formik initialValues={{ email: '' }}
        validationSchema={schema}>
  {({ handleChange, values, errors, touched }) => (
    <TextInput
      value={values.email}
      onChangeText={handleChange('email')}
    />
  )}
</Formik>

Challenges of Email Validation in React Native

Client-side validation methods present several hidden complexities. These issues range from inconsistent regex behavior across platforms to fundamental limitations that affect the reliability of your data and the user experience.

• A regex pattern that fully supports RFC 5322 grammar is complex and hard to maintain. Simpler patterns used in manual regex or Formik and Yup often produce false positives with real-world emails.
• Regex behavior differs across JavaScript engines like JavaScriptCore and Hermes. A pattern in a manual regex or validator.js check might work on iOS but fail on an updated Android device.
• Native device features create unexpected problems. Some predictive keyboards can freeze the UI or crash the app during rapid re-renders from on-change validation events used in manual regex or Formik setups.
• Client-side checks only confirm format, not deliverability. Methods like manual regex, validator.js, or Yup cannot detect typos in domains or disposable addresses, which affects overall data quality.