Convert static image to Base64 in ReactNative

Question

I have static image which i need to convert in Base64 and then send it to Android/iOS native code.

If i select an image from file i am able to send it to native code and convert that to Base64.

But what if i have static image and then send it to native code.

<Image source={require('./img/icon.png')}/>

I want icon.png to be sent in Android/iOS native module.

I have done native coding, it is something like this

@ReactMethod
public void filterBase64(String base64, Callback stringCallback) {

}

But stucked at how to send Base64

I have checked react-native-image-to-base64 but not able to get solution, when i use

NativeModules.RNImageToBase64.getBase64String(uri, (err, base64) => {
    // Do something with the base64 string 
})

It shows error undefined is not an object

I've used: https://github.com/wkh237/react-native-fetch-blob — Samuli Hakoniemi, Apr 11 '17 at 06:52
Did you try rebuilding after installing react-native-image-to-base64 ? I got the same error because i hadn't rebuilt it — Muaz, May 07 '20 at 18:48

score 3 · Answer 1 · edited Feb 20 '19 at 20:58

3

With the help of RNFS plugin you can access React Native assets and convert them to Base64.

var RNFS = require('react-native-fs')
base64data = await RNFS.readFile('./img/icon.png', 'base64').then();
console.log(base64data);

edited Feb 20 '19 at 20:58

Reid

answered Apr 11 '17 at 06:55

Amit Sharma

its shows `ENOENT: no such file or directory, open './img/android.png'` even though path is correct – Ravi Apr 11 '17 at 09:14
Confirm your directory using `process.cwd()` – Amit Sharma Apr 11 '17 at 09:53
It is same, even i have used same path in `` and it is showing that image. – Ravi Apr 11 '17 at 10:32
Have you given read & write permissions in your manifest file ? Like this : ` ` Also if API version is > Android L Please give run time permissions . – Amit Sharma Apr 11 '17 at 11:51
Hi @RaviRupareliya: The path "./img/android.png" may lack of something, so the image cannot be found. In my case, when I use the image path "./../../../../images/dialog/cross.png", the same error appear. Then I use "file:///storage/emulated/0/DCIM/IMG_20171206_104414.jpg" (local image file), everything work like a charm with the same code. Hope it may help you – Luong Truong Dec 06 '17 at 03:47
@RaviRupareliya any luck on this? am trying to access images in assets folder its giving me `Error: ENOENT` . Did u succeed in this ? – suja Nov 19 '19 at 05:43
For converting to base 64, you must read from the file.. Static image won't work. – Rishav Kumar Apr 06 '20 at 15:13

1 Answers1