Hello Friends 👋,

Welcome To Infinitbility! ❤️

This tutorial is based on React Native base64 ( https://www.npmjs.com/package/react-native-base64 ) package where we can try to encode and decode base64 string in react native.

Let’s first install the react-native-base64 package on our react-native.

npm install --save react-native-base64

After installing react-native-base64 we will try to use it in our react native application.

base64 encode in react native

On Below example, we are imported react-native-base64 and created function to encode string in base64 using base64.encode() method.

import React from 'react';
import { View, Text } from 'react-native';
import base64 from 'react-native-base64'

class ReactNativeComponents extends React.Component {
    constructor(props){
        super(props);
    }

	componentDidMount() {
		this.encodeString("Some string to encode to base64");
	}

    encodeString(text){
        const encText = base64.encode(text);
        console.log(encText)
        // SW4gbXkgZXllcywgaW5kaXNwb3NlZA0KSW4gZGlzZ3Vpc2VzIG5vIG9uZSBrbm93cw0KUklQIEND==
    }
   render() {
      return (
         <View>
             <Text>React Components</Text>
         </View>
      );
   }
}

export default ReactNativeComponents;

base64 decode in react native

In the Below example, we are imported the react-native-base64 and created a function to decode a string in react native where we using base64 using the base64.decode() method.

import React from 'react';
import base64 from 'react-native-base64'

class ReactNativeComponents extends React.Component {
    constructor(props){
        super(props);
    }

	componentDidMount() {
		this.decodeString("SW4gbXkgZXllcywgaW5kaXNwb3NlZA0KSW4gZGlzZ3Vpc2VzIG5vIG9uZSBrbm93cw0KUklQIEND==");
	}

    decodeString(encText){
        const text = base64.decode(encText);
        console.log(text)
        // Some string to encode to base64 
    }
   render() {
      return (
         <article>
             <h1>React Components</h1>
         </article>
      );
   }
}

export default ReactNativeComponents;