After making an API call, my react-native component is supposed to return some SVG. Despite using an async function with await, the function still returns a promise that has not resolved yet.
I have seen similar questions asked before, but I am puzzled as to why my return statement doesn't return the resolved promise even with 'await' in place.
const getQRCode = async () => {
try {
const response = await qrFetch;
const responseText = await response.text();
// console.log(responseText)
return responseText;
} catch(error){
console.error(error);
}
}
const xml = getQRCode()
console.log("--XML DATA HERE--")
console.log(xml)
export default function QRCodeScreen({ navigation }) {
return (
<SafeAreaView style={styles.safeAreaContainer}>
<SvgXml xml={xml} width="100%" height="100%" />;
</SafeAreaView>
);
}
Update
I have now wrapped my code in an asynchronous function, but encountered a new error.
async function main(){
const getQRCode = async () => {
try {
const response = await qrFetch;
const responseText = await response.text();
return responseText;
} catch(error){
console.error(error);
}
}
const xml = await getQRCode()
return xml
}
export default function QRCodeScreen({ navigation }) {
return (
<SafeAreaView style={styles.safeAreaContainer}>
<SvgXml xml={main()} width="100%" height="100%" />
</SafeAreaView>
);
}
Error
TypeError: source.split is not a function. (In 'source.split('\n')', 'source.split' is undefined)
The issue may be related to the react-native-svg package I am using. Checking the type of the 'xml' variable confirms it is indeed a string. I might consider reaching out for help or reporting this on the package's GitHub repository.