Possible unhandled promise rejection

[karthiarjun]

Hi, We can pick up the image from local. However, a promise rejection warning has popped up with an empty screen.

Code:
/* eslint-disable react-native/no-inline-styles */
import React, { useState, useEffect } from "react";
import {
StyleSheet,
View,
Button,
SafeAreaView,
ScrollView,
Text,
Dimensions,
ActivityIndicator,
} from 'react-native';
import {
ImagePickerResponse,
launchImageLibrary,
} from 'react-native-image-picker';
import MlkitOcr, { MlkitOcrResult } from 'react-native-mlkit-ocr';

export default function App() {
const [loading, setLoading] = useState(false);
const [result, setResult] = useState(MlkitOcrResult);
const [image, setImage] = useState(ImagePickerResponse);

if (loading) {
return (



);
}
return (

{!!result?.length && (
<ScrollView
contentContainerStyle={{
alignItems: 'stretch',
padding: 20,
height: Dimensions.get('window').height,
}}
showsVerticalScrollIndicator
style={styles.scroll}
>
{result?.map((block) => {
return block.lines.map((line) => {
return (
<View
key={line.text}
style={{
backgroundColor: '#ccccccaf',
position: 'absolute',
top: fitHeight(line.bounding.top, image?.height ?? 0),
height: fitHeight(line.bounding.height, image?.height ?? 0),
left: fitWidth(line.bounding.left, image?.width ?? 0),
width: fitWidth(line.bounding.width, image?.width ?? 0),
}}
>
<Text style={{ fontSize: 10 }}>{line.text}

);
});
})}

)}

  <Button
    onPress={() => {
      setLoading(false);
      launchGallery(setResult, setImage, setLoading);
    }}
    title="Start"
  />
</SafeAreaView>

);
}

function fitWidth(value: number, imageWidth: number) {
const fullWidth = Dimensions.get('window').width;
return (value / imageWidth) * fullWidth;
}

function fitHeight(value: number, imageHeight: number) {
const fullHeight = Dimensions.get('window').height;
return (value / imageHeight) * fullHeight;
}

function launchGallery(
setResult: (result: MlkitOcrResult) => void,
setImage: (result: ImagePickerResponse) => void,
setLoading: (value: boolean) => void
) {
launchImageLibrary(
{
mediaType: 'photo',
},
async (response: ImagePickerResponse) => {
// response.uri = "../images/TextRead.png"
if (!response.uri) {
throw new Error('oh!');
}
try {
setImage(response);

    setResult(await MlkitOcr.detectFromUri(response.uri));
  } catch (e) {
    console.error(e);
  } finally {
    setLoading(false);
  }
}

);
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
scroll: {
flex: 1,
width: '100%',
borderColor: '#ccc',
borderWidth: 2,
},
});

[karthiarjun]

Fixes: In ios the response returns "{"assets": [{"fileName": "E13E8B4A-D760-4604-BEB1-2432B276635E.png",......

Below code can fix the error:
let jsonRes = response.assets[0].uri;
console.log("Image Picker Response: ", jsonRes);
if (jsonRes == null) {
throw new Error('oh!');
}
......