Navigate back to the homepage

How to encode and decode base64 in react native

Infinitbility
React Native
August 10th, 2021 · 1 min read
How to encode and decode base64 in react native

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.

1npm 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.

1import React from 'react';
2import { View, Text } from 'react-native';
3import base64 from 'react-native-base64'
4
5class ReactNativeComponents extends React.Component {
6 constructor(props){
7 super(props);
8 }
9
10 componentDidMount() {
11 this.encodeString("Some string to encode to base64");
12 }
13
14 encodeString(text){
15 const encText = base64.encode(text);
16 console.log(encText)
17 // SW4gbXkgZXllcywgaW5kaXNwb3NlZA0KSW4gZGlzZ3Vpc2VzIG5vIG9uZSBrbm93cw0KUklQIEND==
18 }
19 render() {
20 return (
21 <View>
22 <Text>React Components</Text>
23 </View>
24 );
25 }
26}
27
28export 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.

1import React from 'react';
2import base64 from 'react-native-base64'
3
4class ReactNativeComponents extends React.Component {
5 constructor(props){
6 super(props);
7 }
8
9 componentDidMount() {
10 this.decodeString("SW4gbXkgZXllcywgaW5kaXNwb3NlZA0KSW4gZGlzZ3Vpc2VzIG5vIG9uZSBrbm93cw0KUklQIEND==");
11 }
12
13 decodeString(encText){
14 const text = base64.decode(encText);
15 console.log(text)
16 // Some string to encode to base64
17 }
18 render() {
19 return (
20 <article>
21 <h1>React Components</h1>
22 </article>
23 );
24 }
25}
26
27export default ReactNativeComponents;

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Tutorials

React Native

Categories

More articles from Infinitbility

How to create and use function in react native

How to create and use function in react native

React Native functions Example

August 9th, 2021 · 1 min read
How to enable multidex in react native

How to enable multidex in react native

React Native enable multidex Example

August 9th, 2021 · 1 min read
© 2020–2021 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]