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'45class ReactNativeComponents extends React.Component {6 constructor(props){7 super(props);8 }910 componentDidMount() {11 this.encodeString("Some string to encode to base64");12 }1314 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}2728export 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'34class ReactNativeComponents extends React.Component {5 constructor(props){6 super(props);7 }89 componentDidMount() {10 this.decodeString("SW4gbXkgZXllcywgaW5kaXNwb3NlZA0KSW4gZGlzZ3Vpc2VzIG5vIG9uZSBrbm93cw0KUklQIEND==");11 }1213 decodeString(encText){14 const text = base64.decode(encText);15 console.log(text)16 // Some string to encode to base6417 }18 render() {19 return (20 <article>21 <h1>React Components</h1>22 </article>23 );24 }25}2627export default ReactNativeComponents;
Follow me on Twitter
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.