Quantcast
Channel: Active questions tagged react-native+android - Stack Overflow
Viewing all articles
Browse latest Browse all 29622

Display png image from native module in react native

$
0
0

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 myslider as shown below).
  3. How can I use them at native Objective C?(I am using CGContext todraw 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.


Viewing all articles
Browse latest Browse all 29622

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>