Wsrtjtyk

I've been struggling to find a supported solution to encode images (from assets) and photo picker to base64string.

I can do this via Swift in a straight native app.

func convertImageTobase64(format: ImageFormat, image:UIImage) -> String? {

var imageData: Data?

switch format {

case .png: imageData = image.pngData()

case .jpeg(let compression): imageData = image.jpegData(compressionQuality: compression)

}

return imageData?.base64EncodedString()

}

var mylogo: UIImage? = UIImage.init(named: "DFU-180x180")

let base64String = convertImageTobase64(format: .png, image: mylogo!)

let dataString = "data:image/jpg;base64," + base64String!

I tried to do this via NativeModules, but I get errors for RCTConvert being run on background thread instead of main.
Images.h

#import <Foundation/Foundation.h>

#import <React/RCTBridgeModule.h>





@interface Images : NSObject <RCTBridgeModule>

@end

Images.m

#import <Foundation/Foundation.h>

#import <UIKit/UIKit.h>

#import "Images.h"



@implementation Images

RCT_EXPORT_MODULE()



// All the methods are implemented in a Swift extension, see FileBridgeExtension.swift

RCT_EXTERN_METHOD(convertImageTobase64:(nonnull NSString*)format image:(nonnull UIImage*)image callback:(RCTResponseSenderBlock))



@end

ImagesExtension.swift

import UIKit



public enum ImageFormat {

    case png

    case jpeg(CGFloat)

}



@objc extension Images {



    @objc func convertImageTobase64(_ format: NSString, image:UIImage, callback: @escaping ([Any]?)->Void) {

        var imageData: Data?

        print("convertImageTobase64_line 1")

        print("convert format: " + (format as! String))

        switch format {

        case ".png": imageData = UIImagePNGRepresentation(image)

        print("convertImageTobase64_line 2")

        case ".jpeg": imageData = UIImageJPEGRepresentation(image, 1.0)

        print("convertImageTobase64_line 3")

        default:

            print("convertImageTobase64_line 4")

            let error = RCTMakeError("Invalid image format", nil, nil)

            callback([[error], ]);

        }

        let base64string = imageData?.base64EncodedString()

        print("convertImageTobase64_line 5 = " + base64string!)

        callback([[NSNull()], [base64string]]);

    }



}

I've tried 4 different React Native libraries and nothing works. I get errors that the library doesn't exist, even thought I do the npm install and confirm the library exists in node_modules. I even remove the node_modules folder, and rebuild it with npm install.

2 of the libraries that I've tried.

npm version that I'm using is: 6.4.1
node version that I'm using is: 8.12.0
Xcode v10
react-native-image-base64

react-native-image-to-base64

You can use this package rn-fetch-blob, it has this function File Stream which will serve your purpose.

Hope this helps you.

If you want further assistance, do ping me by commenting this post.