title: react-native-camera convert Image base64 to jpeg
body: <p>I've managed to use <code>react-native-camera</code> to take an image then display it in the <code>&lt;Image&gt;</code> element, then send the image's <strong>base64</strong> string back to my back-end, however, I can't manage to display the image once it is on my back-end because it's in base64, the image is displayed properly in the <code>&lt;Image&gt;</code> element with the <code>src</code> attribute set in the <code>data:image/jpeg;base64,{BASE64_HERE}</code> format.</p>
  
  <p>Could you guide me through to make this work?</p>
  
  <p>Here's my code</p>
  
  <pre><code>'use strict';
  
  import React, { PureComponent } from 'react';
  import {
    AppRegistry,
    StyleSheet,
    Text,
    TouchableOpacity,
    View,
    Image,
  } from 'react-native';
  import {RNCamera} from 'react-native-camera';
  import RNFS from 'react-native-fs';
  
  class App extends PureComponent {
  
      state = {
          img: false,
          b64: null,
      }
  
    render() {
      return (
  
        &lt;View style={styles.container}&gt;
  
          &lt;RNCamera
            ref={ref =&gt; {
              this.camera = ref;
            }}
            style={styles.preview}
            type={RNCamera.Constants.Type.front}
            flashMode={RNCamera.Constants.FlashMode.off}
            androidCameraPermissionOptions={{
              title: 'Permission to use camera',
              message: 'We need your permission to use your camera',
              buttonPositive: 'Ok',
              buttonNegative: 'Cancel',
            }}
            androidRecordAudioPermissionOptions={null}
            onGoogleVisionBarcodesDetected={null}
          /&gt;
  
          &lt;View style={{flex: 0, flexDirection: 'row', justifyContent: 'center'}}&gt;
            &lt;TouchableOpacity
              onPress={this.takePicture.bind(this)}
              style={styles.capture}&gt;
              &lt;Text style={{fontSize: 14}}&gt; SNAP &lt;/Text&gt;
            &lt;/TouchableOpacity&gt;
  
          &lt;/View&gt;
  
          {this.state.img ? (
                  &lt;Image
                      source={{
                          isStatic: true,
                          uri: this.state.b64,
                      }}
                      style={{height: 100, width:100}}
          /&gt; ) : null }
  
        &lt;/View&gt;
      );
    }
  
      takePicture = async () =&gt; {
          if (this.camera) {
              const options = {quality: 0.5, base64: true};
              const data = await this.camera.takePictureAsync(options);
  
              var request = new XMLHttpRequest();
  
              request.onreadystatechange = (e) =&gt; {
                  if (request.readyState !== 4) {
                      return;
                  }
  
                  if (request.status === 200) {
                      alert('success');
                  } else {
                      alert('error' + JSON.stringify(e));
                  }
              };
  
  
  
              request.open('POST', 'http://myurl/get_img.php');
              request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  
  
              var filepath = data.uri.split('//')[1];
              var imageUriBase64 = await RNFS.readFile(filepath, 'base64');
  
  
              this.setState({b64: 'data:image/jpeg;base64,' + imageUriBase64, img: true});
  
              request.send('data=' + imageUriBase64);
  
  
  
          }
  
      }
  
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      flexDirection: 'column',
      backgroundColor: 'black',
    },
    preview: {
      justifyContent: 'flex-end',
      alignItems: 'center',
      width: 200,
      height: 200,
    },
    capture: {
      flex: 0,
      backgroundColor: '#fff',
      borderRadius: 5,
      padding: 15,
      paddingHorizontal: 20,
      alignSelf: 'center',
      margin: 20,
    },
  });
  
  
  export default App;
  
  
  </code></pre>