CODEWITHSUNDEEP
react-nativereact-native-share
khalifathul
khalifathul

Reputation: 668

convert image url into base64 format for react native share

I am trying to share something in react-native-share. I am getting image url from service that is here response url

then here is my code what I tried. 

_shareTextWithTitle () {
const { title, shareImage } = this.props;
console.log(shareImage);
const shareOptions = {
        title: 'Ubud on Tap',
        message: `${title}  onTap. More http://www.example.com`,
        url:  shareImage,
        type: 'image/png',
        subject: 'hello world' //  for email
};
Share.open(shareOptions);
}

here the issue is after I can share this content and the url (which contains the image) in remainder app as what I expected that is i can share the image and content.

But when i tried to share in hangouts and whatsapp its not sending with image instead it sending as the image url and content like below

http://35.185.176.191:8001/images/medias/152180604.png sample. More http://www.example.com

I want this to happen like remainder. I want to share the image and content in all the social applications.

based on my research I think the imageurl should convert into base64 format. But i don't know how to do that

thanks in advance

Upvotes: 4

Views: 6761

Answers (1)

Kodie Grantham
Kodie Grantham

Reputation: 2041

You can use react-native-fetch-blob to download the image and convert it to base64. I've written a sample application for you:

import React, { Component } from 'react';
import {
  Button,
  StyleSheet,
  View
} from 'react-native';

import RNFetchBlob from 'react-native-fetch-blob';
import Share from 'react-native-share';

export default class App extends Component {
  state = {
    loading: false
  }

  _downloadImageAndShare(title, message, url) {
    this.setState({ loading: true });

    var self = this;

    RNFetchBlob.config({ fileCache: false })
      .fetch('GET', url)
      .then(resp => {
        return resp.readFile('base64')
          .then(base64 => {
            return { resp, base64 };
          })
      })
      .then(obj => {
        var headers = obj.resp.respInfo.headers;
        var type = headers['Content-Type'];
        var dataUrl = 'data:' + type + ';base64,' + obj.base64;
        return { title, message, url: dataUrl };
      })
      .then(opts => {
        self.setState({ loading: false });
        return Share.open(opts);
      })
      .catch(err => {
        self.setState({ loading: false });
        console.log(err);
      })
  }

  constructor(props) {
    super(props);
    this._downloadImageAndShare = this._downloadImageAndShare.bind(this);
  }

  render() {
    return (
      <View style={ styles.container }>
        <Button
          disabled={ this.state.loading }
          onPress={ () => this._downloadImageAndShare('My image', 'Check out my image!', 'http://35.185.176.191:8001/images/medias/1521806024.png') }
          title={ this.state.loading ? 'Loading image...' : 'Share image' }
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }
});

Upvotes: 2

Related Questions