React Native

Using Base64 encode/decode in a React Native/Expo app

I can’t believe that I can’t easily encode and decode Base64 string in React Native without pulling my hair. I’m using Expo to manage my development workflow and it even adds more confusion. Thankfully, a little trick saves me from this madness.

So, here are the steps that I did:

Add the Base64 package to my project. This package is supposed to be used as polyfill for browsers that don’t support the atob and btoa functions. The React Native environment also don’t have this functions supported to we can also use this in our React Native project just like in node or web projects.

$ yarn add Base64

Then use it in my codes:

import Base64 from 'Base64';

const encoded = Base64.btoa('sample string');
const decoded = Base64.atob(encoded);

That’s it!

3 thoughts on “Using Base64 encode/decode in a React Native/Expo app”

  1. Hi,
    Thanks for your solution.

    But my problem is: When I install/add this package ‘Base64’ then it removes other existing packages which are required for my other functionality.
    So is there any way to add the package without removing existing packages?

    Thanks in advance…

  2. @Sumit Zade – I’m not aware of that behavior. It is possible that Base64 package has conflicts with your existing packages.

Leave a reply

Your email address will not be published. Required fields are marked *