Display png image from native module in react native

Question

I have a slider component which I want to have a handle as png image pass as a prop. Now, I want that png image to pass through react native to native modules(android and ios both). The component is written at native side for both ios(Objective C) and android(Java).

How can I pass png image as a prop to native modules?
How can I use them at native Java part?(I am using Canvas to draw my slider as shown below).
How can I use them at native Objective C?(I am using CGContext to draw my slider).

What I have tried:

I resolved path of png image by following code at React Native side.

  const myImage = require('../assets/slider-handle.png');
  const resolveAssetSource = require('react-native/Libraries/Image/resolveAssetSource');
  const resolvedImage = resolveAssetSource(myImage);

Then pass the path of image as a prop imagePath={resolvedImage.uri}.

Then at Java part I do following:

public void drawImage(String imagePath, Canvas canvas, int x, int y) {
     Bitmap bitmap = BitmapFactory.decodeFile(imagePath);
     canvas.drawBitmap(bitmap, y, x, somePaintValue);
}

I am getting the path of image(the path is something like this: (http:/10.0.2.2:8081/assets/app/components/slider/assets/slider.png), I have verified that at native side by consoling the path.

Not sure if I need to pass only path of image or maybe there is a way to pass whole png. This is my first time working with Java and Objective C. This is the slider I am developing. Any help will be really appreciated.

Valentin Kisimov · Accepted Answer · 2023-04-07 18:41:59Z

1

I see that the thread is quite old, but this can be useful in the future.

A way that works for me is encoding the bitmap to Base64.

Java Side:

iconBase64 = Base64.encodeToString(byteArray, Base64.DEFAULT);

React-native side:

   <Image source={{uri: `data:image/png;base64,${props.item.iconBase64}`}}/>

If needed you can even compress the image:

bitmap.compress(Bitmap.CompressFormat.PNG, 10, byteArrayOutputStream);

answered Apr 7, 2023 at 18:41

Valentin Kisimov

111 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

M.Ubeyd Over a year ago

it was useful, here is a method in java ` private String convertBitmapToBase64(Bitmap bitmap) { ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream(); bitmap.compress(Bitmap.CompressFormat.PNG, 100, byteArrayOutputStream); byte[] byteArray = byteArrayOutputStream.toByteArray(); return Base64.encodeToString(byteArray, Base64.DEFAULT); } `

Collectives™ on Stack Overflow

Display png image from native module in react native

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related