How to Convert Input Value in Md5 using React Native ?
In this article, we’ll explore how to convert an input value to MD5 using React Native. Hashing, a fundamental technique in computer science, involves converting data of any size into a fixed-size value for security or integrity purposes. One widely used hashing algorithm is MD5 (Message Digest Algorithm 5), although its vulnerabilities render it insecure. Despite this limitation, MD5 can still serve non-cryptographic functions like simple data integrity checks or non-sensitive applications.
React Native, a popular platform, simplifies native mobile app development for both iOS and Android. It achieves this by utilizing a single codebase. To start using React Native, developers need to configure their development setup. This involves installing Node.js and utilizing the Expo CLI edition. Expo, a JavaScript and React-based platform, provides tools and services that streamline the entire mobile app development process.
Prerequisites:
Steps to Create React Native Application:
Step 1: Create a react native application by using this command
npx create-expo-app MD5ConverterApp
Step 2: After creating your project folder, i.e. MD5ConverterApp, use the following command to navigate to it:
cd MD5ConverterApp
Project Structure:
Step 3: Install Dependencies
To handle the MD5 hashing, we’ll use the md5
library. Install it by running:
npm install md5
Approach:
This code enables the functionality of a React Native app by importing the necessary components and libraries. It takes user input, performs MD5 hash calculations using the ‘md5’ library, and displays the resulting hash value. The app’s user interface consists of an input field, a “Convert to MD5” button, and a visually appealing area to display the generated hash. The ‘useState’ hook is utilized to effectively manage state variables for both the input value and the calculated hash. Furthermore, styling enhancements are achieved through the implementation of the ‘StyleSheet’ module. The code ensures responsive design with its flexible layout (‘flex: 1’), rounded input corners, and a visually prominent MD5 result.
Example:
- App.js file
Javascript
import React, { useState } from 'react' ; import { View, TextInput, Button, Text, StyleSheet } from 'react-native' ; import md5 from 'md5' ; const App = () => { const [inputValue, setInputValue] = useState( '' ); const [md5Hash, setMd5Hash] = useState( '' ); const convertToMd5 = () => { const hash = md5(inputValue); setMd5Hash(hash); }; return ( <View style={styles.container}> <TextInput placeholder= "Enter a value" value={inputValue} onChangeText={text => setInputValue(text)} style={styles.input} /> <Button title= "Convert to MD5" onPress={convertToMd5} /> {md5Hash !== '' && <Text style={styles.md5Text}> MD5 Hash: {md5Hash} </Text>} </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center' , alignItems: 'center' , backgroundColor: '#f0f0f0' , }, input: { padding: 10, borderWidth: 1, borderColor: '#ccc' , width: 250, marginBottom: 15, borderRadius: 8, }, md5Text: { marginTop: 20, fontSize: 16, fontWeight: 'bold' , }, }); export default App; |
Steps to run:
Step 5: Run react native application using the Terminal command.
npx expo start
To run on Android:
npx react-native run-android
To run on Ios:
npx react-native run-ios
Output:
Contact Us