React Native Generate SHA256 Encoded Hash Key Android iOS Example

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.

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.

Screenshot:

3. Now open your project’s main App.js file and import SafeAreaView, Text, View, StyleSheet, TextInput, TouchableOpacity and Alert component.

4. Import SHA256 from react-native-sha256 library.

5. Creating our main export default function App. This is our main functional component.

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.

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.

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.

9. Creating Style.

10. Complete Source Code for App.js file class:

Screenshots in Android device:

Screenshots in iOS device:

2 Comments

  1. Can you please describe how can I generate ipa in react native in ios please describe

Leave a Reply

Your email address will not be published.