Beginner React-Native projects

Introduction

Passwords help keep our online accounts safe, but coming up with a strong password can be tricky. So, I decided to build a Password Generator App using React Native and Expo. In this article, I’ll share how I made it, the tools I used, and the key features I added.

What I Used

For this project, I used:

React Native with Expo for easy development and testing.
TypeScript for better code structure.
Formik and Yup for handling user input and validation.
Bouncy Checkbox for easy selection of options.

The app lets users create a password based on:

Password length.
Uppercase letters.
Lowercase letters.
Numbers.
Special characters (symbols).

How It Works

The app takes input from the user and generates a random password based on their choices. Users can select the type of characters they want, and the app creates a secure password for them.

Here’s the function that makes the password:

const generatePasswordString = (passwordLength: number) => {
  let characterList = ''

  const upperCaseChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
  const lowerCaseChars = 'abcdefghijklmnopqrstuvwxyz';
  const digitChars = "0123456789";
  const specialChars = '!@#$%^&*()_+';

  if (upperCase) characterList += upperCaseChars;
  if (lowerCase) characterList += lowerCaseChars;
  if (numbers) characterList += digitChars;
  if (symbols) characterList += specialChars;

  const passwordResult = createPassword(characterList, passwordLength);
  setPassword(passwordResult);
  setIsPassGenerated(true);
};

This function dynamically constructs a character list based on user selections and generates a random password.

Making Sure the Input is Correct

To ensure users enter a valid password length, I used Formik and Yup for validation. The app only accepts password lengths between 4 and 20 characters.

Example validation:

const PasswordSchema = Yup.object().shape({
  passwordLength: Yup.number()
    .min(4, 'Minimum length is 4')
    .max(20, 'Maximum length is 20')
    .required('Password length is required')
});

One challenge was making sure the password was truly random and secure. I solved this by:

Using Math.random() to pick random characters.
Making sure the password doesn’t repeat patterns too often.

Another issue was managing the app’s state. I used React’s useState hook to store and update the password dynamically.

Future Improvements

I plan to add:

Dark mode for better readability at night.
A copy button to quickly copy the password.
A password strength meter to show how strong the generated password is.

Final Thoughts

Building this app with Expo and React Native was a great learning experience. I improved my skills in React Native, form validation, and state management. If you’re interested, check out my GitHub repository [Password-Generation].

Password Generator App with React Native and Expo