How to Convert Any Input Value in Md5 using 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:

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

expo init ExampleApp

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

npm install md5 --save

npm install react-native-paper

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

import React, { useState } from 'react';
import {
    Text,
    View,
    StyleSheet,
    TextInput,
    TouchableOpacity,
} 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);
        setText(encodedVal);
    };

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

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

                    <TextInput
                        style={styles.textInputStyle}
                        onChangeText={
                            (inputText) => setInputText(inputText)
                        }
                        placeholder="Enter Any Value"
                        value={inputText}
                    />
                    <TouchableOpacity
                        style={styles.buttonStyle}
                        onPress={convertMD5}
                    >
                        <Text style={styles.buttonTextStyle}>
                            Convert to MD5
                        </Text>
                    </TouchableOpacity>
                </Card.Content>
            </Card>
        </View>
    );
}

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;

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

expo start

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

It will help you...