how to transform image from gallery or camera into base64? - react-native

Question

I have a function that takes the image from the gallery or camera and sends it to an area where the user can view it.
import React, {useState} from 'react';
import {View, TouchableOpacity, Text, StyleSheet, Image} from 'react-native';
import ImagePicker from 'react-native-image-picker';
export default function Upload() {
const [avatar, setAvatar] = useState();
function imagePickerCallback(data) {
if (data.didCancel) {
return;
}
if (data.error) {
return;
}
if (data.customButton) {
return;
}
if (!data.assets[0].uri) {
return;
}
setAvatar(data.assets[0]);
}
return (
<View style={styles.container}>
<Image
source={{
uri: avatar
? avatar.uri
: 'https://mltmpgeox6sf.i.optimole.com/w:761/h:720/q:auto/https://redbanksmilesnj.com/wp-content/uploads/2015/11/man-avatar-placeholder.png',
}}
style={styles.avatar}
/>
<TouchableOpacity
style={styles.button}
onPress={() =>
ImagePicker.launchCamera(imagePickerCallback)
}>
<Text style={styles.buttonText}>camera</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() =>
ImagePicker.launchImageLibrary(imagePickerCallback)
}>
<Text style={styles.buttonText}>galery</Text>
</TouchableOpacity>
</View>
);
}
I'm filling the image source with the URI. I would like to know how to take this image and make it base64 to send it to firebase storage.
If I need to install a library, tell me which one to install.

Answer 1

If you read the library definition for options which is the first parameter. You can tell the library to return the base64 string. options: { includeBase64: true }
https://github.com/react-native-image-picker/react-native-image-picker#options
And that will return the below object with base64
https://github.com/react-native-image-picker/react-native-image-picker#asset-object
See below example:
import React, {useState} from 'react';
import {View, TouchableOpacity, Text, StyleSheet, Image} from 'react-native';
import ImagePicker from 'react-native-image-picker';
export default function Upload() {
const [avatar, setAvatar] = useState();
function imagePickerCallback(data) {
if (data.didCancel) {
return;
}
if (data.error) {
return;
}
if (data.customButton) {
return;
}
if (!data.assets[0].uri) {
return;
}
if((data.assets?.length ?? 0) > 0 && data.assets[0].base64){
//Here is my base64 string of assets[0]
}
setAvatar(data.assets[0]);
}
const options = {
includeBase64: true
}
return (
<View style={styles.container}>
<Image
source={{
uri: avatar
? avatar.uri
: 'https://mltmpgeox6sf.i.optimole.com/w:761/h:720/q:auto/https://redbanksmilesnj.com/wp-content/uploads/2015/11/man-avatar-placeholder.png',
}}
style={styles.avatar}
/>
<TouchableOpacity
style={styles.button}
onPress={() =>
ImagePicker.launchCamera(options, imagePickerCallback)
}>
<Text style={styles.buttonText}>camera</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() =>
ImagePicker.launchImageLibrary(options, imagePickerCallback)
}>
<Text style={styles.buttonText}>galery</Text>
</TouchableOpacity>
</View>
);
}