5 Useful Regex for React Native

Regular expressions (regex) are powerful tools for pattern matching and data manipulation. When working with React Native, regex can be incredibly useful for validating input, extracting specific data, and performing text manipulation. In this article, we will explore five useful regex patterns that can enhance your React Native development workflow. Let's dive in!

1. Email Validation

Validating email addresses is a common requirement in many applications. Here's a regex pattern that can help you validate email addresses in React Native:

const emailRegex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;

Usage:

const isValidEmail = emailRegex.test(email);

Explanation:

- `^` and `$` ensure that the entire string is matched from start to end.

- `[A-Z0-9._%+-]` matches any uppercase letter, lowercase letter, digit, or special character in the email address.

- `@[A-Z0-9.-]+` matches the "@" symbol followed by one or more uppercase letters, lowercase letters, digits, dots, or hyphens.

- `\.[A-Z]{2,}` matches a dot followed by two or more uppercase letters, indicating the top-level domain.

2. URL Validation

Validating URLs can be essential when working with web content or handling user-provided links. Here's a regex pattern for validating URLs in React Native:

const urlRegex = /^(ftp|http|https):\/\/[^ "]+$/;

Usage:

const isValidUrl = urlRegex.test(url);

Explanation:

- `^` and `$` ensure that the entire string is matched from start to end.

- `^(ftp|http|https):\/\/` matches the protocol part of the URL, allowing either "ftp," "http," or "https" at the beginning.

- `[^ "]+` matches one or more characters that are not space or double quote, representing the domain and path of the URL.

3. Phone Number Formatting

When dealing with phone numbers, it's often helpful to format them consistently. Here's a regex pattern that can help you format phone numbers in a standard way in React Native:

const phoneRegex = /(\d{3})(\d{3})(\d{4})/;

Usage:

const formattedPhoneNumber = phoneNumber.replace(phoneRegex, '($1) $2-$3');

Explanation:

- `(\d{3})` matches and captures the first three digits of the phone number.

- `(\d{3})` matches and captures the next three digits.

- `(\d{4})` matches and captures the last four digits.

- In the usage example, the `replace` method replaces the matched pattern with the desired format, using the captured groups as placeholders.

4. Numeric Input Validation

Validating numeric input can be necessary when accepting user input for quantities, prices, or any numerical data. Here's a regex pattern for validating numeric input in React Native:

const numericRegex = /^\d+$/;

Usage:

const isValidNumber = numericRegex.test(input);

Explanation:

- `^` and `$` ensure that the entire string is matched from start to end.

- `\d+` matches one or more digits. This pattern ensures that the input consists only of digits (0-9).

5. Username Validation

When creating user accounts or handling usernames, it's often necessary to enforce specific rules, such as allowed characters or length restrictions. Here's a regex pattern for validating usernames in React Native:

const usernameRegex = /^[a-zA-Z0-9_-]{3,16}$/;

Usage:

const isValidUsername = usernameRegex.test(username);

Explanation:

- `^` and `$` ensure that the entire string is matched from start to end.

- `[a-zA-Z0-9_-]` matches any uppercase letter, lowercase letter, digit, underscore, or hyphen.

- `{3,16}` specifies the minimum and maximum length of the username (between 3 and 16 characters).

Regular expressions (regex) are powerful tools that can greatly enhance your React Native development workflow. In this article, we explored five useful regex patterns for tasks such as email validation, URL validation, phone number formatting, numeric input validation, and username validation. By utilizing these regex patterns effectively, you can improve the user experience and ensure data consistency in your React Native applications.