Search code examples
iosreactjsreact-nativereact-native-fs

How to convert PNG image to base64 - React Native


I have stored some PNG images inside my app folder. And now I want to convert that PNG images to base64.

Image file path :

app > assets > images > sample.png

I have tried react-native-fs library and it gives me a warning like this

Error: ENOENT: no such file or directory, open '/private/var/containers/Bundle/Application/4BE270A4-01B2-41D6-8488-15741E9E47CF/Wapp.app/assets/app/assets/images/sample.png

Some PNG files are working.. And this PNG is not working.

NOTE: I only want this work on the iOS side.

My CodeBase :

  const imageData = await RNFS.readFile(
      RNFS.MainBundlePath + '/assets/app/assets/images/sample.png',
      'base64',
    ).then();

Solution

  • Finally, I found a solution to this issue.

    Basically, the issue was I need to bundle assets with the iOS build and also need to add assets folder into Xcode and link it.

    Steps :

    Bundle all assets with iOS build using this command

    react-native bundle  --minify --dev false --assets-dest ./ios --entry-file index.js --platform ios --bundle-output ios/main.jsbundle
    

    After this add the assets folder which contains all the images into Xcode.

    enter image description here