Convert image to base64 React Native

Question

I am trying to implement an avatar for my react native application in which convert the picture into base64 to store in the MongoDb using GraphQL. The furthest I got was using the imagePicker which stores the img uri path but want the string.

I have tried encoding and decoding the image but kept getting error and the app breaks

import React, { useContext, useState } from 'react'
import {
    SafeAreaView,
    Text,
    StyleSheet,
    View,
    Keyboard,
    KeyboardAvoidingView,
    TouchableWithoutFeedback,
    Platform
} from 'react-native'
import { useFonts } from 'expo-font';
import colors from '../../config/colors'
import CustomButton from '../../components/CustomButton';
import { useForm } from 'react-hook-form'
import { useNavigation } from '@react-navigation/core'
import BlueTextInput from '../../components/BlueTextInput';
import AddPicButton from '../../components/AddPicButton';
import * as ImagePicker from 'expo-image-picker';
import AuthContext from '../../context/auth-context'
import { logIn } from '../../util'


const CreateFanProfile = ({ route }) => {
    const [image, setImage] = useState(null);
    const choosePhotoFromLibrary = async () => {
        const permissionResult = await ImagePicker.requestMediaLibraryPermissionsAsync();
        if (permissionResult.granted === false) {
            alert("Permission to access camera roll is required!");
            return;
        }
        const pickerResult = await ImagePicker.launchImageLibraryAsync();
        if (!pickerResult.cancelled) {
            setImage(pickerResult.uri);
        }
    }
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const onNextPressed = async (data) => {
        const username = route.params.username;
        setEmail(route.params.email);
        setPassword(route.params.password);
        const role = route.params.role;

        const { name, bio } = data;
        let requestBody = {
            query: `
                mutation {
                    createUser (userInput: {username: "${username}", password: "${password}",
                        email: "${email}", role: "${role}", name: "${name}", bio: "${bio}", 
                        avatar: "${image}", subscription: false}) {
                        _id
                    }
                }
            `
        };
    }
    if (!loaded) {
        return null;
    }
    return (
        <SafeAreaView style={styles.container}>
            <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
                <View style={styles.picContainer}>
                        <AddPicButton
                            onPress={choosePhotoFromLibrary}
                            image={image}
                        />
                        <Text style={styles.bottomText}>ADD A PICTURE</Text>

                    </View>
            </TouchableWithoutFeedback>
        </SafeAreaView>
    )
}
export default CreateFanProfile

Answer 1

After installing react-native-image-base64 import ImgToBase64 from 'react-native-image-base64';

ImgToBase64.getBase64String('file://youfileurl') //is is where you put image url from the ImagePicker
  .then(base64String => doSomethingWith(base64String))
  .catch(err => doSomethingWith(err));

ofcourse all from the docs