title: React Native - How to convert image to Base64 and Visa versa in android
body: <p>I have created an app which takes photo and uploads to AWS s3. Once I captured those, I need to hash those. There I used Base64 hash method and the captured photos get encrypted. But I am not able to open that and I am not sure whether I have done it in a proper way or not. </p>
  
  <p>Before uploading, I want to un-hash those. That is, they must be stored as a hashed image in the gallery. But,  I want to convert them as the original image before uploading. So, I can store the real image in the cloud.</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 RNFS from 'react-native-fs';
  
      class SecondScreen extends React.Component {
  
          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
                  }
                });
  
                const base64 = RNFS.writeFile(responce.path, 'base64');
                return base64;
  
              })
          }
  
        _upload=()=&gt;{
          if(this.state.connection_Status==="Online"){
            const config ={
                keyPrefix :aws_keyPrefix,
                bucket : aws_bucketName,
                region :aws_region,
                accessKey:aws_accessKey,
                secretKey :aws_secretKey,
                successActionStatus :201
              }
              //store captured images in an array
              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, uploaded");
                //reset the arrays
                this.setState({saveImages:''});
                this.setState({testImage:''});
              } else {
                Alert.alert('No images captured');
              }
            } else {
              Alert.alert('Upload failed. User is in offline');
            }
        } 
  
        render() {
            return (
                &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 style={styles.Send}&gt;
                     &lt;TouchableOpacity onPress={() =&gt; this._upload()}&gt;
                        &lt;Text&gt;Send&lt;/Text&gt;
                     &lt;/TouchableOpacity&gt;
                &lt;/View&gt;
                );
              }
            }
  
      const styles = StyleSheet.create({
        Camera :{
          justifyContent: 'center',
          alignItems: 'center',
          marginTop : 20,
          backgroundColor : '#48a4ff',
          alignItems : 'center',
          padding : 1,
          borderWidth : 1,
          borderColor : '#48a4ff',
        },
        Send :{
          justifyContent: 'center',
          alignItems: 'center',
          marginTop : 20,
          backgroundColor : '#48a4ff',
          alignItems : 'center',
          padding : 3,
          borderWidth : 1,
          borderColor : '#48a4ff',
        }
      });
  export default SecondScreen;
  </code></pre>
  
  <p>This code I am using to hash the image,</p>
  
  <pre><code>const base64 = RNFS.writeFile(responce.path, 'base64');
                return base64;
  </code></pre>
  
  <p>After hashing image properties will be as below,</p>
  
  <p><a href="https://i.stack.imgur.com/9TaC1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9TaC1.png" alt="enter image description here"></a></p>
  
  <p>How to convert it into the real image before uploading?</p>
  
  <p>Can anyone assist me, since a day I am trying. I did not any document as such to implete this functionality.</p>