How to Generate Random Password in React Native ?

In this article, we'll explore the process of building a simple random password generator app using React Native­.

• The Math.random() me­thod is utilized to obtain a pseudo-random floating-point number ranging from 0 (inclusive­) to 1 (exclusive).
• The Math.floor() me­thod is used to round down a number, finding the ne­arest integer that is le­ss than or equal to the given value­ and removing any decimal fraction.

To give you a better idea of what we’re going to create, let’s watch a demo video.

Demo Video

Prerequisites:

• Introduction to React Native
• React Native Components
• React useState
• React hooks
• Expo CLI
• Node.js and npm (Node Package Manager)

Step-by-Step Implementation

Step 1: Create a React Native Project

Now, create a project with the following command.

npx create-expo-app app-name --template

Note: Replace the app-name with your app name for example : react-native-demo-app

Next, you might be asked to choose a template. Select one based on your preference as shown in the image below. I am selecting the blank template because it will generate a minimal app that is as clean as an empty canvas in JavaScript.

It completes the project creation and displays a message: "Your Project is ready!" as shown in the image below.

Now go into your project folder, i.e., react-native-demo

cd app-name

Project Structure:

Step 2: Run  Application

Start the server by using the following command.

npx expo start

Then, the application will display a QR code.

• For the Android users,
  • For the Android Emulator, press "a" as mentioned in the image below.
  • For the Physical Device, download the "Expo Go" app from the Play Store. Open the app, and you will see a button labeled "Scan QR Code." Click that button and scan the QR code; it will automatically build the Android app on your device.
• For iOS users, simply scan the QR code using the Camera app.
• If you're using a web browser, it will provide a local host link that you can use as mentioned in the image below.

Step 3: Start Coding

Approach:

The password ge­neration logic is implemente­d using Math.random() and Math.floor(). This ensures that the ge­nerated passwords are truly random. To manage­ user input and prefere­nces effective­ly, React hooks or state manageme­nt can be utilized. The application provide­s users with the ability to customize the­ir password settings, such as length and character type­s (symbols, numbers, lowercase, uppe­rcase). It effective­ly utilizes React hooks to manage state­s and the Clipboard API to facilitate password copying. By simply clicking the "Generate­ Password" button, users can obtain a randomly generate­d password based on their prefe­rences. Furthermore­, they can easily copy this password to their clipboard by pre­ssing the "Copy" button.

- : Import required libraries at the top of the file.

- : Create a StyleSheet to style components like container, header, subHeader, etc.

Develop UI

- : Here is the code to display the title and subtitle of the app using a Text component, which conveys who is providing the app (for ex: "Geeksforgeeks") and its purpose (for ex: "Random Password Generator").

- : The Below code is for getting the password length from the user. It uses a TextInput component where the user can type the length, and a Text component that says "Password Length" to explain what the TextInput is for. Both the Text and TextInput are inside a View component. The passwordLength state variable is linked to the TextInput, so when the user types a number, it updates the passwordLength value using setPasswordLength from useState. We set the default value of passwordLength to "12," so when the app starts, the user will see "12" displayed.

- : We are adding four switches to our user interface: Symbols, Numbers, LowerCase, and UpperCase. These switches allow users to choose whether they want to include them in their password or not. We used a Switch component for the switching function and a Text component to explain what each switch does. both are wrapped in a View component to hold them together.

By default, all the switches are set to true, meaning they are on. We have state variables like useSymbols, useNumbers, useLowerCase, and useUpperCase assigned for value prop for each switch respectively. When a user taps a switch, we update the state using functions like setUseSymbols, setUseNumbers, setUseLowerCase, and setUseUpperCase. These functions are connected to the onValueChange prop of each switch respectively.

- : This button is used to generate a password, designed by wrapping a Text component of some text like "Generate Password" with TouchableOpacity component to make the text acts like a button and when user taps on it, it will call generatePassword function.

- : This function is designed to generate a password using certain choices. It checks if you want to include Symbols, Numbers, LowerCase, and UpperCase. If these options are selected, the function will add them to the password. It then uses Math.random and Math.floor to generate a new password randomly. Finally, it updates the password state variable with the new password using the setPassword useState function. By default, the password state variable starts as an empty string using useState.

- : The program will show a generated password using the password state variable, as long as it is not empty. It uses a Text component to display the password. Besides the password, there is a Copy button made with a TouchableOpacity component. When the user taps this button, it calls the copyToClipboard function to copy the password.

- : This function copies the generated password to the clipboard. It uses the setString method from the Clipboard component. Then, it updates the SuccessMessage state variable to say, "Password copied to clipboard!" This lets the user know that the password has been copied successfully. We also show this message below the generated password using a Text component.

Now, wrap all design code with a View component, return it from the App component, and place all methods and useStates within the App component. Ensure to export the App.

Complete Source Code

App.js:

Output