Display png image from native module in react native

Viewed 514

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

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

What I have tried:

  1. 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.

0 Answers
Related