How to add text to an image in React Native?

Question

I'm researching if it is easily possible with React Native or whether I should build a native app.

I want to edit an image from the photo library and add a text overlay to it. Think of it like a postcard with a greeting message on it.

How would I add text to and image and make a new copy of it in react native? I'm not looking for detailed code, just for an explanation on how to get started.

Update: Would it be a good alternative to just save the coordinates of the message on the picture instead of generating a new image?

Answer 1

You can go with 2 ways. You can either render the text on an image component and save the position of that text or you can process the image and get a new image with the text.

The first option brings up the problem of that position is relative to image's size. Means that if the image renders on a different sized screen the position and size of text should also be moved accordingly. This option needs a good calculation algorithm. Also, another problem could be the rendering times. Text component will render instantly but Image component needs to load the image first. This option also needs a good way of render algorithm.

The second option is not possible without a 3rd party library or some level of native code since react-native doesn't support image processing beyond the limits of CSS. A good and maintained image processing library is gl-react-native-v2. This library helps you to process and manipulate the image as you wish and then save the result with captureFrame(config). This option is more capable of processing file but needs you to save a new image.

Either way is good if the way you go is appropriate for your use case. The decision really depends on your case and preference.

Answer 2

You could use react-native's ImageBackground tag since using the Image tag as a container would give you a yellow box warning.

The sample code for it with overlay is as shown below

<ImageBackground source={SomeImage} style=  {SomeStyle} resizeMode='SomeMode'>
   {loader}
</ImageBackground>

It would be efficient if you work on the same image by changing the flex property in the styles of the image or you may set the position: absolute to the main image container and assign top , bottom, left, right to the nested container.

Helpful link may be found here