title: How do I hash and un-hash the image in react native
body: <p>I have created an app which captures images and upload to AWS s3. Currently, those are storing in the gallery. I want to hash/encrypt those images once I captured those and before uploading, I want to un-hash /decrypt those. How can I implement those in react native? I googled it but I did not find any way. </p>
  
  <p>My code is,</p>
  
  <pre><code>import React, {Component} from 'react';
  import {Platform, StyleSheet,Alert, Text,TouchableOpacity, View,Picker,Animated,Easing,Image, NetInfo,
    Dimensions,Button,ScrollView } from 'react-native';
  import ImagePicker from 'react-native-image-picker';
  import DeviceInfo from 'react-native-device-info';
  import { RNS3 } from 'react-native-aws3';
  import Form from './Form';
  const SIZE = 40;
  const { width } = Dimensions.get('window');
  
  class SecondScreen extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            SelectedClass : '',
            SelectedSection : '',
            SelectedSubject : '',
            serverTime : null,
            saveImages : [],
            testImage : [],
            isConnected :false,
            schoolId : 10,
            userId :9,
            connection_Status : "",
            logout:false
          }
        }
  
         getServerTime() {
          fetch('http://worldclockapi.com/api/json/utc/now')
            .then((response) =&gt; response.json())
            .then((responseJson) =&gt; {
                if (responseJson) {
                    this.setState({
                        serverTime: responseJson
                    })
                }
                console.log(responseJson);
                console.log(responseJson);
            })
            .catch((error) =&gt; {
                console.error(error);
            });
        }
  
        componentDidMount = () =&gt; {
             NetInfo.isConnected.addEventListener(
                'connectionChange',
                this._handleConnectivityChange
  
            );
            NetInfo.isConnected.fetch().done((isConnected) =&gt; {
  
              if(isConnected == true)
              {
                this.setState({connection_Status : "Online"})
              }
              else
              {
                this.setState({connection_Status : "Offline"})
              }
          });
        }
       componentWillUnmount = () =&gt; {
           NetInfo.isConnected.removeEventListener(
            'connectionChange',
            this._handleConnectivityChange
        );
       }
  
       _handleConnectivityChange = (isConnected) =&gt; {
  
        if(isConnected == true)
          {
            this.setState({connection_Status : 1})
          }
          else
          {
            this.setState({connection_Status : 0})
          }
      };
  
        //change state of class, sesssion and subject
        updateClass = (SelectedClass) =&gt; {
        this.setState({ SelectedClass: SelectedClass })
       }
        updateSession = (SelectedSection) =&gt; {
        this.setState({ SelectedSection: SelectedSection })
       }
        updateSubject = (SelectedSubject) =&gt; {
        this.setState({ SelectedSubject: SelectedSubject })
       }
  
      takePic = () =&gt; {
         if(this.state.connection_Status==="Online"){
          this.getServerTime();
            try{
                this.setState({capturedTime:this.state.serverTime.currentFileTime+'_'+time}, 
                  () =&gt; console.log(this.state.serverTime.currentFileTime)
                ); 
  
            } catch (err) {
                var date = new Date();
                var time = date.getTime();
                this.setState({capturedTime:time});
                console.log("localtime")
              }
          }
  
          const options = {
            quality: 1.0,
            maxWidth: 75,
            maxHeight: 75,
            base64: true,
            skipProcessing: true
        }
        ImagePicker.launchCamera(options,(responce)=&gt;{
  
          this.state.testImage.push({ uri: responce.uri });
            const file ={
              uri : responce.uri,
              name :responce.fileName,
              method: 'POST',
              width : 50,
              height : 50,
              path : responce.path,
              type :  responce.type,
              notification: {
                  enabled: true
                }
            } 
            this.setState(prevState =&gt; {
              // get the previous state values for the arrays
              let saveImages = prevState.saveImages;
              // add the values to the arrays like before
              saveImages.push(file);
              // return the new state
              return {
               saveImages
              }
            });
          })
      }
  
    _upload=()=&gt;{
      if(this.state.connection_Status==="Online"){
        const config ={
            keyPrefix :'uploads/',
            bucket : '***********',
            region :'********',
            accessKey:'************',
            secretKey :'*************',
            successActionStatus :201
          }
  
          this.state.saveImages.map((image) =&gt; {
               RNS3.put(image,config)
              .then((responce) =&gt; {
                console.log(image);
              });
          });
          if (this.state.saveImages &amp;&amp; this.state.saveImages.length) {
            Alert.alert('Successfully, saved');
            this.setState({saveImages:''});
            this.setState({testImage:''});
          } else {
            Alert.alert('No images captured');
          }
        } else {
          Alert.alert('Upload failed. User is in offline');
        }
    } 
  
    signout = () =&gt; {
         this.setState({
           logout: true
         })
     }
    render() {
        return (
          &lt;View&gt;
               {this.state.error ? &lt;Text&gt;Error: {this.state.error}&lt;/Text&gt; : null}
               &lt;View style={styles.Camera}&gt;
                  &lt;TouchableOpacity onPress={this.takePic.bind(this)}&gt;
                    &lt;Text&gt;Take Picture&lt;/Text&gt;
                  &lt;/TouchableOpacity&gt;
                &lt;/View&gt;
                &lt;View style={styles.Send}&gt;
                    &lt;TouchableOpacity onPress={() =&gt; this._upload()}&gt;
                      &lt;Text&gt;Send&lt;/Text&gt;
                    &lt;/TouchableOpacity&gt;
                  &lt;/View&gt;
               &lt;/View &gt;
              }&lt;/View&gt;
            );
          }
        }
  
  const styles = StyleSheet.create({
  });
  
  export default SecondScreen;
  </code></pre>