WHAT I NEED :
I take a base64 string from react-native-canvas-signature library. However, I have to send it to api while converting svg xml format. The example format is:
<svg xmlns="http://www.w3.org/2000/svg" width="17.397" height="17.397" viewBox="0 0 17.397 17.397"><path d="m6.705 11.653 4.948-4.948h5.065a.68.68 0 0 0 .68-.68V.68a.68.68 0 0 0-.68-.68h-5.346a.68.68 0 0 0-.68.68v1.993H6.705V.68A.68.68 0 0 0 6.026 0H.68A.68.68 0 0 0 0 .68v5.346a.68.68 0 0 0 .68.68h5.346a.68.68 0 0 0 .68-.68V4.032h3.987v1.712l-4.949 4.948H.68a.68.68 0 0 0-.68.68v5.346a.68.68 0 0 0 .68.68h5.346a.68.68 0 0 0 .68-.68v-1.994h3.987v1.993a.68.68 0 0 0 .68.68h5.346a.68.68 0 0 0 .68-.68v-5.345a.68.68 0 0 0-.68-.68h-5.347a.68.68 0 0 0-.68.68v1.993H6.705zM5.346 5.346H1.359V1.359h3.987zm6.705 6.705h3.987v3.987h-3.987zm0-10.692h3.987v3.987h-3.987zM5.346 16.038H1.359v-3.987h3.987z" style="fill:#557ce6"/>this is a kind of url icon. when I draw a sign in react native app I take a base64 string and I have to convert it to this format. I research all stackoverflow pages. I found something but it does not work completely.The Link is : How to print svg element with base64 format in React?
answere by @Man he suggests to use XMLHTTPRequest in React. If I am not wrong the class is not working on React Native on android properly. In ios It converts base64 to the example svg format but not on android. I expect ev.target.response gives me that format because it does that on ios.Also I am open another solutions to convert base64 to svg.
MY CODE :
import { View, Text, StyleSheet, TouchableOpacity, Image } from 'react-native'import { Image as Image2 } from 'react-native-svg';import React from 'react'import RNFS, { UploadBeginCallbackResult, UploadProgressCallbackResult } from 'react-native-fs'import SignatureScreen, { SignatureViewRef,} from "react-native-signature-canvas";import { Global } from '../../constants/Global';import { CustomBlueColor } from '../../constants/StyleConstants';import { getFilesPath } from '../ActivityStatement/CameraHelper';import { decode as atob, encode as btoa } from 'base-64'interface Props { text: string; handleOK: (signature: any) => void;}const Sign: React.FC<Props> = ({ text, handleOK }) => { const ref = React.useRef<SignatureViewRef>(null); const handleSignature = (signature: any) => { try { const loadSVG = () => { var xhr = new XMLHttpRequest(); xhr.open("GET", atob(btoa(signature))); xhr.addEventListener("load", function (ev: any) { var xml = ev.target.response; console.log('xml',xml); }); xhr.removeEventListener('load', console.log) xhr.send(null); }; loadSVG() handleOK(signature); } catch (error) { console.log('21 error', error); } }; const handleClear = () => { console.log("clear success!"); ref.current?.clearSignature(); }; const handleConfirm = () => { console.log("end"); ref.current?.readSignature(); }; const handleEnd = () => { ref.current?.readSignature(); }; return (<View style={styles.container}><SignatureScreen ref={ref} imageType={"image/svg+xml"} onOK={handleSignature} /><View style={styles.row}><TouchableOpacity onPress={handleClear} style={{ backgroundColor: CustomBlueColor, padding: 10, borderRadius: 5, }}><Text style={{ color: 'white' }}>Cancel</Text></TouchableOpacity><TouchableOpacity onPress={handleConfirm} style={{ backgroundColor: CustomBlueColor, padding: 10, borderRadius: 5, }}><Text style={{ color: 'white' }}>Confirm</Text></TouchableOpacity></View></View> )}