Convert Image to base64 in react native

ONLINECAST

3 min read

·

06-10-2024

9

0

Share

Converting Images to Base64 in React Native: A Comprehensive Guide

The Problem:

You're working on a React Native app and need to send an image to a server. The server expects the image data in Base64 format. How do you convert an image captured from the device's camera or selected from the gallery into Base64?

Rephrased:

Imagine you're building a social media app where users can upload profile pictures. When they take a picture or choose one from their phone, your app needs to convert that image into a special code (Base64) so it can be sent to the server. This article will show you how to do that in your React Native app.

Scenario and Original Code:

Let's say you have a button that triggers the camera or gallery selection. Once an image is chosen, you need to convert it to Base64. Here's a basic example using the react-native-image-picker library:

import React, { useState } from 'react';
import { Button, View, Text } from 'react-native';
import ImagePicker from 'react-native-image-picker';

const App = () => {
  const [imageBase64, setImageBase64] = useState(null);

  const handleImageSelection = () => {
    ImagePicker.launchImageLibrary({}, (response) => {
      if (response.didCancel) {
        console.log('User cancelled image picker');
      } else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
      } else if (response.customButton) {
        console.log('User tapped custom button: ', response.customButton);
      } else {
        const source = { uri: response.uri };
        // Here, you need to convert 'source' into Base64
        setImageBase64(// ... Base64 Conversion Logic ... );
      }
    });
  };

  return (
    <View>
      <Button title="Select Image" onPress={handleImageSelection} />
      {imageBase64 && <Text>Image Base64: {imageBase64}</Text>}
    </View>
  );
};

export default App;

Explanation and Insights:

1. Import Necessary Library: react-native-image-picker allows users to select images from their device.
2. Image Selection: The handleImageSelection function uses ImagePicker.launchImageLibrary to open the image picker.
3. Base64 Conversion: The code snippet above focuses on the selection part. We need to convert the response.uri into Base64.
4. Using RNFS: The react-native-fs library provides the readFile function that allows you to read the image file from the device's storage and convert it to Base64.

Complete Example:

import React, { useState } from 'react';
import { Button, View, Text } from 'react-native';
import ImagePicker from 'react-native-image-picker';
import RNFS from 'react-native-fs';

const App = () => {
  const [imageBase64, setImageBase64] = useState(null);

  const handleImageSelection = () => {
    ImagePicker.launchImageLibrary({}, (response) => {
      if (response.didCancel) {
        console.log('User cancelled image picker');
      } else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
      } else if (response.customButton) {
        console.log('User tapped custom button: ', response.customButton);
      } else {
        const source = { uri: response.uri };
        RNFS.readFile(response.uri, 'base64')
          .then((base64Data) => {
            setImageBase64(base64Data);
          })
          .catch((err) => {
            console.log('Error reading file: ', err);
          });
      }
    });
  };

  return (
    <View>
      <Button title="Select Image" onPress={handleImageSelection} />
      {imageBase64 && <Text>Image Base64: {imageBase64}</Text>}
    </View>
  );
};

export default App;

Additional Value:

• Error Handling: The code includes error handling to catch issues during image selection and file reading.
• Sending Base64 to Server: You can now use the imageBase64 state to send the image data to your server in a request.

Important Considerations:

• Image Size: Be mindful of the size of your image. Base64 encoding can significantly increase the size of the image data. Consider compressing the image before converting it to Base64.
• Alternative Methods: If you're using other libraries for image handling, explore their specific methods for converting images to Base64.

References:

• react-native-image-picker: https://github.com/react-native-community/react-native-image-picker
• react-native-fs: https://github.com/itinance/react-native-fs

This guide provides a comprehensive understanding of converting images to Base64 in React Native, equipping you with the knowledge to seamlessly handle image data within your applications.