Example to Convert any Input Value in MD5 in React Native

This tutorial explains how to convert input text value to MD5 in react native application. This example we are going to use MD5 function to convert our Input Text into MD5, in another word it will hashing messages with MD5.

MD5 stands for ‘Message-Digest algorithm 5’. The MD5 algorithm is used as a cryptographic hash function or a file fingerprint. It is non-reversible and very safe for password security.

This type of hashing technique helps to encrypt the  password of user from password textinput field.

Installation of Dependency

To use md5() we have to install md5 package, in our project directory first.

npm install md5 --save

 Convert any Input Value in MD5 in React Native

Lets see the complete source code App.js component that helps to Convert any Input Value in MD5 in React Native.

Step 1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step 2: Open your react native project folder in CMD or Terminal and execute the below command to install the MD5 library.

npm install md5 --save

Step 3: Open App.js File in your favorite code editor and erase all code and follow this tutorial.

Step 4: Through react , react-native  packages import all required components.

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

Step 5: create constructor block inside your App component and set the TextInput component value in the state variable.

constructor(props) {
    super(props);
    //initial value of Text
    this.state = {
      text: '',
    };
  }

Step 6: Implement render method inside the App class and wrapped the below layout design inside the root View component.

render() {
    return (
      <View style={styles.container} >
        <Text>
          {this.state.text == ''
            ? 'Please insert any value to convert in md5'
            : md5(this.state.text) 
          }
        </Text>
        <TextInput
          style={styles.inputStyle}
          onChangeText={text => this.setState({ text })}
          placeholder="Please Enter Any Value"
          value={this.state.text}
        />
      </View>
    );
  }

Step 7 : Apply the below style sheet design. 

const styles = StyleSheet.create(
  {
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      margin: 20
    },
    inputStyle: {
      height: 40,
      width:'100%',
      marginTop: 16,
      textAlign: 'center',
      borderColor: '#03a9f4',
      backgroundColor: '#ecf0f1',
      borderWidth: 1,
    },
  });

Complete Source Code for App.js 

Lets see the complete source code that helps to Convert any Input Value in MD5 in React Native application.

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


export default class App extends Component {

  constructor(props) {
    super(props);
    //initial value of Text
    this.state = {
      text: '',
    };
  }

  render() {
    return (
      <View style={styles.container} >
        <Text>
          {this.state.text == ''
            ? 'Please insert any value to convert in md5'
            : md5(this.state.text) 
          }
        </Text>
        <TextInput
          style={styles.inputStyle}
          onChangeText={text => this.setState({ text })}
          placeholder="Please Enter Any Value"
          value={this.state.text}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create(
  {
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      margin: 20
    },
    inputStyle: {
      height: 40,
      width:'100%',
      marginTop: 16,
      textAlign: 'center',
      borderColor: '#03a9f4',
      backgroundColor: '#ecf0f1',
      borderWidth: 1,
    },
  });

Screenshot : 

This is all about  Example to Convert any Input Value in MD5 in React Native. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.