react native view shot capturing blur screenshots

Question

I am using react-native-snap-shot library for sharing my screen. It's working fine for the small content but for the detail view long scrollview its blur and the text unreadable.

<ViewShot ref="viewShot" options={{ format: 'jpg',
            quality: 0.8,height:100}}>
//content and images here from server
</ViewShot>

The function where i am calling sharing image

captureScreenIos = () => {
     console.log("Clicked for IOS");
     this.changeLoaderStatus();
     var thisFun = this;
      this.refs.viewShot.capture({width: 2048 / PixelRatio.get(), height: 2048 / PixelRatio.get()}).then(res => {
        RNFetchBlob.fs.readFile(res, 'base64').then((base64data) => {
          console.log("base64data",base64data)
          let base64Image = `data:image/jpeg;base64,${base64data}`;
          const shareOptions = {
            title: "My Beauty Squad",
            //message: "Download my beauty squad with below link."+ "\n" + "https://itunes.apple.com/uk/app/my-beauty-squad/id1454212046?mt=8" ,
            url: base64Image,
            subject: "Share news feed"
          };
          Share.open(shareOptions);
          thisFun.changeLoaderStatus();
        })
      }).catch(error => {
        console.log(error, 'this is error');
        this.changeLoaderStatus();
      })
     }

Anyone have a suggestion then please share...Thanks

Do you have a sample for this implementation – Sagar Nov 12 '19 at 05:07 — Sagar, Nov 12 '19 at 05:07
One minute let me add answer here in few minutes. – Rahul Mishra Nov 12 '19 at 05:32 — Rahul Mishra, Nov 12 '19 at 05:32
Please let me know if any issue. – Rahul Mishra Nov 12 '19 at 05:51 — Rahul Mishra, Nov 12 '19 at 05:51

score 1 · Answer 1 · answered Nov 12 '19 at 05:50

It's very difficult to solve this because I didn't get any solution for this so I have used it my way. I am sharing all the related code here:

This will capture a specific area and it's in render

I import all the below libraries:

import ViewShot, { capture, captureScreen, captureRef} from "react-native-view-shot";
import RNFetchBlob from 'react-native-fetch-blob';
import Share, {ShareSheet} from 'react-native-share';

I added this.screenshot = {}; in the constructor and bind my separate functions for iOS and Android.

constructor(props) {
    super(props);
    this.screenshot = {};
    this.state = {
      newsListArray: [],
      loading:false,
      alertMsg:'',
      errorMsg:'',
      refreshing: false,
    },
    this._captureScreenIos = this._captureScreenIos.bind(this);
    this._captureScreenAndroid = this._captureScreenAndroid.bind(this);
  }

After that in render are I used below code:

renderRowItem = (itemData) => {
   return (
    <View collapsable={false} ref={(shot) => { this.screenshot[itemId] = shot; }} >
      // Add you code here
    </View>
   )
  }

This is my button to capture the perticular area:

<TouchableOpacity onPress={ () => {
                Platform.OS === 'ios' ?
                this._captureScreenIos(itemData.item._id) :
                this._captureScreenAndroid(itemData.item._id)
              }}>
                <View style={{flexDirection:'row'}}>
                  <Icon name="share-alt" size={16} color="#ffb6cf" />
                  <Text style={{paddingLeft:6,fontSize:12,fontWeight:'500'}}>Share News</Text>
                </View>
              </TouchableOpacity>

I faced lots of issues with call same function for both iOS and Android so i call separate function for both like below example:

Android:

_captureScreenAndroid(itemId) {
  this.changeLoaderStatus();
  captureRef(this.screenshot[itemId],{format: 'png',quality: 0.8}).then(res => {
    const granted =  PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
      {
        title: '<Project Name> Storage Permission',
        message: '<Project Name> needs access to your storage ' +
          'so you can save your photos',
      },
    );
    if (PermissionsAndroid.RESULTS.GRANTED) {
      var promise = CameraRoll.saveToCameraRoll(res);
      var thisFun = this;
      promise.then(function(result) {
        RNFetchBlob.fs.readFile(result, 'base64').then((base64data) => {
          console.log("base64data",base64data)
          let base64Image = `data:image/jpeg;base64,${base64data}`;
          let shareOptions = {
            title: "title here",
            message: "add your message here" ,
            url: base64Image,
            subject: "subject here"  //  for email
          };
          Share.open(shareOptions);
          thisFun.changeLoaderStatus();
        })
      }).catch(function(error) {
        this.changeLoaderStatus();
      });
    }else{
      this.changeLoaderStatus();
    }
 })
}

iOS:

_captureScreenIos(itemId) {
  this.changeLoaderStatus();
  var thisFun = this;
  var viewShotRef = itemId;
   captureRef(this.screenshot[itemId],{format: 'jpg',quality: 0.8}).then(res => {
     RNFetchBlob.fs.readFile(res, 'base64').then((base64data) => {
       let base64Image = `data:image/jpeg;base64,${base64data}`;
       const shareOptions = {
         title: "<Project-Name>",
         message: "Download <Project-Name> "+ "\n" + <MY APP STORE URL> ,
         url: "file://"+res,
         subject: "<Project-Name>"
       };
       Share.open(shareOptions);
       thisFun.changeLoaderStatus();
     })
   }).catch(error => {
     console.log(error, 'this is error');
     this.changeLoaderStatus();
   })
}

react native view shot capturing blur screenshots

1 Answers1

Linked