How to Convert Any Input Value in Md5 using React Native?

Published On: 15/07/2022 | Category: React Native

Hi Guys,

This article will provide some of the most important example how to convert any input value in md5 in react native. I would like to share with you react native convert any input value in md5 example. I would like to show you how to use md5 in react native. I explained simply about how to implement any input value convert to md5 in react native. Here, Creating a basic example of example to convert any input value in md5 in react native.

Let's start following example:

Step 1: Download Project

In the first step run the following command to create a project.

expo init ExampleApp
Step 2: Install and Setup

First of all you have to install md5 package and react-native-paper.

npm install md5 --save
npm install react-native-paper
Step 3: App.js

In this step, You will open the App.js file and put the code.

import React, { useState } from 'react';
import {
} from 'react-native';
import md5 from 'md5';
import { Card } from 'react-native-paper';

const App = () => {
    const [inputText, setInputText] = useState('');
    const [text, setText] = useState('');

    const convertMD5 = () => {
        let encodedVal = md5(inputText);

    return (
        <View style={styles.container}>
            <Text style={styles.title}>
                React Native Any Value Convert to Md5
            <Card style={{ paddingVertical: 30 }}>

                    {text ?
                        <Text style={styles.textStyle}>{text}</Text>

                            (inputText) => setInputText(inputText)
                        placeholder="Enter Any Value"
                        <Text style={styles.buttonTextStyle}>
                            Convert to MD5

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#5deed9',
        justifyContent: 'center',
        padding: 10,
    title: {
        textAlign: 'center',
        fontSize: 20,
        marginBottom: 10,
        fontWeight: 'bold',
    textStyle: {
        textAlign: 'center',
        margin: 10,
        fontSize: 18,
    textInputStyle: {
        padding: 10,
        marginLeft: 35,
        marginRight: 35,
        margin: 10,
        borderWidth: 1,
        borderColor: '#c3c1c1',
    buttonStyle: {
        backgroundColor: '#07b507',
        color: '#FFFFFF',
        borderColor: '#51D8C7',
        alignItems: 'center',
        borderRadius: 5,
        marginLeft: 35,
        marginRight: 35,
    buttonTextStyle: {
        color: '#FFFFFF',
        paddingVertical: 10,
        fontSize: 16,

export default App;
Run Project

In the last step run your project using the below command.

expo start

You can QR code scan in Expo Go Application on mobile.

Output :

It will help you...