SHA256 also known as Secure Hash Algorithm 256 is used to encrypt the given Text or Number into a secure hash key format. It is a type of cryptography function which can convert the password or message into 256 bit format. In react native the SHA256 hash key is used to secure password or mobile chatting applications for end to end data encryption. The SHA256 is used in mobile applications, web applications for password encryption. Using the SHA key developer can store the password in Database and incase if someone reads then then it will not be decoded again. Today we’re using react-native-sha256 NPM package in our tutorial to convert the entered text in Text Input component into SHA256 key. So in this tutorial we would learn about React Native Generate SHA256 Encoded Hash Key Android iOS Example.
Contents in this project React Native Generate SHA256 Encoded Hash Key Android iOS Example:
1. First step is to download and install the react-native-sha256 NPM package in your current react native project. So open your react native project Root directory in CMD or Terminal and execute below command.
|
1
|
npm install react–native–sha256 —save
|
Screenshot:
Screenshot after done installation:
2. In Window we do not need to execute any other command but for MacOS we have to run below Pods install command to link the SHA256 library to our project.
|
1
|
cd ios && pod install
|
Screenshot:
3. Now open your project’s main App.js file and import SafeAreaView, Text, View, StyleSheet, TextInput, TouchableOpacity and Alert component.
|
1
2
3
|
import React, {useState} from ‘react’;
import { SafeAreaView, Text, View, StyleSheet, TextInput, TouchableOpacity, Alert } from ‘react-native’;
|
4. Import SHA256 from react-native-sha256 library.
|
1
|
import {sha256} from ‘react-native-sha256’;
|
5. Creating our main export default function App. This is our main functional component.
|
1
2
3
4
5
|
export default function App(){
}
|
6. Creating 2 States named as result and input with 2 State update methods setResult and setInput.
- result : result state is used to hold the encrypted SHA256 key.
- input : input state is used to hold the typed text inside Text Input component.
|
1
2
|
const [result, setResult] = useState(‘Hash Key Show Here’);
const [input, setInput] = useState(”);
|
7. Creating a function named as convertToSHA(). Inside the function we would convert the Text Input component inside entered text into SHA 256 hash key and store the encrypted result into result State.
|
1
2
3
4
5
6
7
|
const convertToSHA =()=> {
sha256(input).then((hash) => {
setResult(hash);
});
};
|
8. Creating return block. Now first we would make the SafeAreaView -> Root View -> Text component to show encrypted hash on screen -> Text Input -> Touchable Opacity component.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
return (
<SafeAreaView style={{flex: 1}}>
<View style={styles.mainContainer}>
<Text style={{fontSize:25, textAlign: ‘center’, color: ‘#D50000’}}>
Generate SHA256 Encoded Hash in React Native
</Text>
<Text style={{margin: 12, fontSize: 22}}> {result} </Text>
<TextInput
style={styles.textInputStyle}
onChangeText={
(text) => setInput(text)
}
placeholder=“Enter Value”
value={input}
/>
<TouchableOpacity
style={styles.touchableOpacityStyle}
onPress={convertToSHA}>
<Text style={styles.touchableOpacityText}> Click Here To Convert to SHA 256 </Text>
</TouchableOpacity>
</View>
</SafeAreaView>
);
|
9. Creating Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
const styles = StyleSheet.create({
mainContainer: {
flex: 1,
alignItems: ‘center’,
padding: 12,
},
textInputStyle: {
height: 40,
width: 300,
textAlign: ‘center’,
borderWidth: 2,
borderColor: ‘#000’,
borderRadius: 8,
marginTop: 20,
marginBottom: 20
},
touchableOpacityStyle: {
backgroundColor: ‘#33691E’,
height: 42,
alignItems: ‘center’,
borderRadius: 7,
justifyContent:‘center’,
alignItems: ‘center’,
width: ‘100%’
},
touchableOpacityText: {
color: ‘#FFFFFF’,
fontSize: 22,
},
});
|
10. Complete Source Code for App.js file class:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
import React, {useState} from ‘react’;
import { SafeAreaView, Text, View, StyleSheet, TextInput, TouchableOpacity, Alert } from ‘react-native’;
import {sha256} from ‘react-native-sha256’;
export default function App(){
const [result, setResult] = useState(‘Hash Key Show Here’);
const [input, setInput] = useState(”);
const convertToSHA =()=> {
sha256(input).then((hash) => {
setResult(hash);
});
};
return (
<SafeAreaView style={{flex: 1}}>
<View style={styles.mainContainer}>
<Text style={{fontSize:25, textAlign: ‘center’, color: ‘#D50000’}}>
Generate SHA256 Encoded Hash in React Native
</Text>
<Text style={{margin: 12, fontSize: 22}}> {result} </Text>
<TextInput
style={styles.textInputStyle}
onChangeText={
(text) => setInput(text)
}
placeholder=“Enter Value”
value={input}
/>
<TouchableOpacity
style={styles.touchableOpacityStyle}
onPress={convertToSHA}>
<Text style={styles.touchableOpacityText}> Click Here To Convert to SHA 256 </Text>
</TouchableOpacity>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
mainContainer: {
flex: 1,
alignItems: ‘center’,
padding: 12,
},
textInputStyle: {
height: 40,
width: 300,
textAlign: ‘center’,
borderWidth: 2,
borderColor: ‘#000’,
borderRadius: 8,
marginTop: 20,
marginBottom: 20
},
touchableOpacityStyle: {
backgroundColor: ‘#33691E’,
height: 42,
alignItems: ‘center’,
borderRadius: 7,
justifyContent:‘center’,
alignItems: ‘center’,
width: ‘100%’
},
touchableOpacityText: {
color: ‘#FFFFFF’,
fontSize: 22,
},
});
|
Screenshots in Android device:
Screenshots in iOS device:
Also Read :
React Native Set Alpha Opacity of View Image Background Android iOS
React Native Calculate Square Cube and Square Root Cube Root
React Native JSON Parsing ListView From MySQL Database Android iOS
Example of Creating Pre Populated SQLite Database For React Native
React Native Create Custom TextArea Component iOS Android Tutorial
