How to convert an image into base64 in React Native

Introduction

Converting images to base64 in React Native can be useful for various purposes, such as sending images over APIs or storing them locally. This article will guide you through the process of converting images to base64 format in React Native.

What is Base64?

Base64 is a binary-to-text encoding scheme that represents binary data in an ASCII string format. It’s commonly used to encode binary data, including images, to be safely transmitted over text-based protocols.

Steps to Convert Image to Base64 in React Native

1. Install Required Libraries

First, you’ll need to install the ‘react-native-fs’ library. Run the following command in your project directory:

npm install react-native-fs

2. Import the Library

In your React Native component file, import the library:

import RNFS from 'react-native-fs';

3. Convert Image to Base64

Use the following function to convert an image to base64:

const convertImageToBase64 = async (imagePath) => {

try {

const base64 = await RNFS.readFile(imagePath, 'base64');

return base64;

} catch (error) {

console.error('Error converting image to base64:', error);

return null;

}

};

4. Usage Example

Here’s an example of how to use the conversion function:

import React, { useState } from 'react';

import { View, Button, Image } from 'react-native';

import RNFS from 'react-native-fs';

const ImageConverter = () => {

const [base64Image, setBase64Image] = useState(null);

const handleConversion = async () => {

const imagePath = RNFS.DocumentDirectoryPath + '/example.jpg';

const base64 = await convertImageToBase64(imagePath);

if (base64) {

setBase64Image(base64);

}

};

return (

<View>

<Button title="Convert Image" onPress={handleConversion} />

{base64Image && (

<Image

source={{ uri: `data:image/jpeg;base64,${base64Image}` }}

style={{ width: 200, height: 200 }}

/>

)}

</View>

);

};

export default ImageConverter;

5. Using Expo FileSystem

If you’re using Expo in your React Native project, you can use the Expo FileSystem module to convert images to base64. Here’s how:

First, import the FileSystem module:

import * as FileSystem from 'expo-file-system';

Then, use the following code to convert an image to base64:

const convertImageToBase64 = async (fileUri) => {

try {

const base64Data = await FileSystem.readAsStringAsync(fileUri, {

encoding: FileSystem.EncodingType.Base64,

});

return base64Data;

} catch (error) {

console.error('Error converting image to base64:', error);

return null;

}

};

This method is simpler and doesn’t require additional libraries if you’re already using Expo in your project.

6. Using Base64 Image in React Native Expo

Once you have converted your image to base64, you can use it directly in the Image component in React Native Expo. Here’s how:

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

const Base64Image = ({ base64String }) => {
  return (
    <View>
      <Image
        source={{ uri: `data:image/jpeg;base64,${base64String}` }}
        style={{ width: 200, height: 200 }}
      />
    </View>
  );
};

export default Base64Image;

In this example, replace ‘base64String’ with your actual base64-encoded image data. You can use this component like this:

import React, { useState, useEffect } from 'react';
import { View } from 'react-native';
import * as FileSystem from 'expo-file-system';
import Base64Image from './Base64Image';

const ImageDisplay = () => {
  const [base64Image, setBase64Image] = useState(null);

  useEffect(() => {
    const loadImage = async () => {
      const imageUri = FileSystem.documentDirectory + 'example.jpg';
      const base64 = await convertImageToBase64(imageUri);
      setBase64Image(base64);
    };

    loadImage();
  }, []);

  return (
    <View>
      {base64Image && <Base64Image base64String={base64Image} />}
    </View>
  );
};

export default ImageDisplay;

This approach allows you to easily display base64-encoded images in your React Native Expo application.

Considerations

• Ensure you have the necessary permissions to access the file system on both Android and iOS.
• Consider large image files, as converting them to base64 can significantly increase the data size.
• Consider using image compression techniques before converting to base64 if file size is a concern.

Conclusion

Converting images to base64 in React Native is a straightforward process using the ‘react-native-fs’ library. This technique can be advantageous when working with APIs requiring base64-encoded image data or storing image data as strings in your application.

Remember to handle errors appropriately and consider the performance implications when dealing with large images or a high volume of conversions.