How to Add base64 Image In React Native?

Aug 08, 2022 . Admin



This article will provide some of the most important example how to add base64 image in react native app. In this article, we will implement a convert image uri to base64 react native. if you have question about react native base64 then I will give simple example with solution. it's simple example of convert image to base64 in react-native.

In this example, we will add new variable "myImage" with base64 string. then we will display image from that string. so let's see below example.

Step 1: Download Project

In the first step run the following command to create a project.

expo init ExampleApp
Step 2: App.js

In this step, You will open the App.js file and put the code.

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

export default function App() {

    const myImage = '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';

    return (
      <View style={styles.container}>
        <Image source={{uri: `data:image/png;base64,${myImage}`}}  style={styles.img}/>
      </View>
    );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  
  img: {
    height: 200,
    width: 200
  }
});
Step 3: Run Project

In the last step run your project using the below command.

expo start

You can QR code scan in Expo Go Application on mobile.

Output:

It will help you...

#React Native