2

Im building a react-native app and the screen so far loads an image from a uri into a BackgroundImage and there is also some text loading on top of the image, please see the attached image: enter image description here

So what i want is to get this image and text downloaded to the device, merge them if you will?

Any suggestions are welcome..

Thanks

Peter Snee
  • 129
  • 1
  • 11

1 Answers1

0

I would recommend you to use the ViewShot component from here.

Here's an example of how you would be able to integrate it with your project (keep in mind this uses the ES6 arrow function syntax):

class CaptureImage extends Component {
  capturePic = () => {
    this.refs.viewShot.capture().then(uri => {
      console.log("Path to the image: ", uri);  // do what you want with the url
    })
  };

  render() {
    return (
      <View
        <ViewShot ref="viewShot">

          // your background image components go here (the image with the text you want to capture)

        </ViewShot>

        // rest of your code goes here

        <Button onClick= {() => capturePic()} />  // button just for demonstration purpose
      </View>
    );
  }
}

Hope you understood :)

Sahith Kurapati
  • 1,617
  • 10
  • 14
  • This looks perfect for what i need, ill let you know how i get on , thanks – Peter Snee Jun 03 '20 at 12:13
  • Glad to know it's what you need! – Sahith Kurapati Jun 03 '20 at 12:16
  • That's almost working, im able to get the base64 string on the image but is there a way to convert it to a blob and download it to the device? – Peter Snee Jun 03 '20 at 14:02
  • To save the base64 string as image see [this](https://stackoverflow.com/questions/48134397/react-native-save-base64-image-to-album) reference. It seems to answer your question. – Sahith Kurapati Jun 03 '20 at 14:59
  • Did this answer you question? – Sahith Kurapati Jun 03 '20 at 15:29
  • not really , i have a function that downloads the imageurl from the api and that works perfect, the reference i get from the viewshot is this "file:///data/user/0/com.quoteapp/cache/ReactNative-snapshot-image7939597279417791785.jpg" , thn i get the error that i can only download http or https – Peter Snee Jun 03 '20 at 17:03
  • According to the reference, the image is already in your phone files. Go to internal storage > android > data > com.quoteapp > cache > image. The image should be there already locally. – Sahith Kurapati Jun 03 '20 at 17:11
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/215253/discussion-between-peter-snee-and-sahith02). – Peter Snee Jun 03 '20 at 17:23