React Native - MD5 -Mobile Application development

Hello everyone, In this article, we would be going to Convert any Input Value in MD5 in React Native

The MD5 message-digest algorithm is a widely used hash function producing a 128-bit hash value. Although MD5 was initially designed to be used as a cryptographic hash function, it has been found to suffer from extensive vulnerabilities. It can still be used as a checksum to verify data integrity, but only against unintentional corruption. It remains suitable for other non-cryptographic purposes, for example for determining the partition for a particular key in a partitioned database.

Implementation:

First, You must set up your local development environment. Follow the below link to set up your local environment.

https://www.knowledgefactory.net/2021/01/react-native-environment-setup-create-demo.html

After executing the commands mentioned in this link, a folder with a specified name is created with the following contents.

Install MD5

npm install md5 --save

Next, we are going to edit the App.js file and write the below code.

Import md5, Alert, Button, StyleSheet, Text, View, ScrollView, TextInput, Keyboard, TouchableOpacity component in our project.

import React, { Component } from 'react';
import md5 from 'md5';
import {
  Alert, Button, StyleSheet, Text, View, ScrollView, TextInput,
  Keyboard, TouchableOpacity
} from 'react-native';

Create constructor()

constructor(props) {
    super(props);
    this.state = { text: '' }
    this.handleTextChange = this.handleTextChange.bind(this);
    this.md5handleSubmit = this.md5handleSubmit.bind(this);

  }

Engender handleTextChange() and md5handleSubmit()

 handleTextChange(text) {
    this.setState({ text });
  }
  md5handleSubmit() {
    Alert.alert("md5:: " + md5(this.state.text))
  }

View

 render() {
    return (
      <View style={styles.container}>
        <View>
          <Text style={styles.header}>MD5</Text>

        </View>

        <ScrollView>
          <View style={styles.inputContainer}>
            <TextInput
              style={styles.textInput}
              placeholder="Enter Text...."
              maxLength={30}
              onBlur={Keyboard.dismiss}
              value={this.state.text}
              onChangeText={this.handleTextChange}
            />
          </View>
        </ScrollView>

        <View style={styles.inputContainer}>
          <TouchableOpacity
            style={styles.saveButton}
            onPress={this.md5handleSubmit}> 
            <Text style={styles.saveButtonText}>MD5</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

Style Sheet

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 45,
    backgroundColor: 'purple',
  },
  header: {
    fontSize: 25,
    textAlign: 'center',
    margin: 10,
    fontWeight: 'bold'
  },
  inputContainer: {
    paddingTop: 15

  },
  textInput: {
    borderColor: 'green',
    borderTopWidth: 1,
    borderBottomWidth: 1,
    height: 50,
    fontSize: 25,
    paddingLeft: 20,
    paddingRight: 20
  },
  saveButton: {
    borderWidth: 1,
    borderColor: 'black',
    backgroundColor: 'black',
    padding: 15,
    margin: 5
  },
  saveButtonText: {
    color: '#FFFFFF',
    fontSize: 20,
    textAlign: 'center'
  }
});

Complete source code for App.js File

import React, { Component } from 'react';
import md5 from 'md5';
import {
  Alert, Button, StyleSheet, Text, View, ScrollView, TextInput,
  Keyboard, TouchableOpacity
} from 'react-native';

export default class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = { text: '' }
    this.handleTextChange = this.handleTextChange.bind(this);
    
    this.md5handleSubmit = this.md5handleSubmit.bind(this);

  }

  handleTextChange(text) {
    this.setState({ text });
  }
  md5handleSubmit() {
    Alert.alert("md5:: " + md5(this.state.text))
  }
  
  render() {
    return (
      <View style={styles.container}>
        <View>
          <Text style={styles.header}>MD5</Text>

        </View>

        <ScrollView>
          <View style={styles.inputContainer}>
            <TextInput
              style={styles.textInput}
              placeholder="Enter Text...."
              maxLength={30}
              onBlur={Keyboard.dismiss}
              value={this.state.text}
              onChangeText={this.handleTextChange}
            />
          </View>
        </ScrollView>

        <View style={styles.inputContainer}>
          <TouchableOpacity
            style={styles.saveButton}
            onPress={this.md5handleSubmit}> 
            <Text style={styles.saveButtonText}>MD5</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 45,
    backgroundColor: 'purple',
  },
  header: {
    fontSize: 25,
    textAlign: 'center',
    margin: 10,
    fontWeight: 'bold'
  },
  inputContainer: {
    paddingTop: 15

  },
  textInput: {
    borderColor: 'green',
    borderTopWidth: 1,
    borderBottomWidth: 1,
    height: 50,
    fontSize: 25,
    paddingLeft: 20,
    paddingRight: 20
  },
  saveButton: {
    borderWidth: 1,
    borderColor: 'black',
    backgroundColor: 'black',
    padding: 15,
    margin: 5
  },
  saveButtonText: {
    color: '#FFFFFF',
    fontSize: 20,
    textAlign: 'center'
  }
});