Is there a way i can download an image with text appended on it with react native

user_5332077 0
Viewed 503

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

react-native blob image download
1 Answers

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 :)

user_117581460
Related