I’ve a react native mission and inside this mission. I need to combine the abillity for the person to take a photograph or choose a photograph from their library. As soon as the picture is chosen, I need to then extract all the textual content from the picture and have it present up as textual content. I get errors and I’ve tried 4 completely different npm packages simply to get this easy idea to work and it doesn’t matter what I strive, It is not going to work for some purpose. Proper now the bundle I’m testing is @react-native-ml-kit/text-recognition. I’ve it put in and imported. When I attempt to course of the picture, I preserve getting the next error:
ERROR Error: The bundle '@react-native-ml-kit/text-recognition' would not appear to be linked. Be certain that:
- You might have run 'pod set up'
- You rebuilt the app after putting in the bundle
- You aren't utilizing Expo managed workflow
, js engine: hermes
I went by and ran 10 instructions and tried so many various issues to repair the error as a result of the bundle is just not linked to react-native. I attempted:
react-native hyperlink @react-native-ml-kit/text-recognition and it didn’t work. I attempted npx pod set up and that didn’t work. I reset the cache and reset the simulator however nothing mounted this difficulty.
Right here is my code (the problems is coming from the performOCR operate proper above the jsx):
import React, {useState} from 'react';
import {Picture, Textual content, TouchableOpacity, View} from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import * as ImageManipulator from 'expo-image-manipulator';
import TextRecognition from '@react-native-ml-kit/text-recognition';
const NewTransactionScreen = () => {
const [ocrResult, setOcrResult] = useState('');
const [galleryPermission, setGalleryPermission] = useState(
ImagePicker.useMediaLibraryPermissions(),
);
const [cameraPermission, setCameraPermission] = useState(
ImagePicker.useCameraPermissions(),
);
const [preprocessedImage, setPreprocessedImage] = useState('');
...
const performOCR = () => {
TextRecognition.acknowledge(preprocessedImage)
.then(outcomes => {
console.log('Acknowledged textual content:', outcomes.textual content);
for (let block of outcomes.blocks) {
console.log('Block textual content:', block.textual content);
console.log('Block body:', block.body);
for (let line of block.strains) {
console.log('Line textual content:', line.textual content);
console.log('Line body:', line.body);
}
}
})
.catch(error => {
console.error(error);
});
};
return (
<View>
<Textual content>Add new transaction: choices under</Textual content>
{cameraPermission ? (
<TouchableOpacity
onPress={() => {
processCameraImage();
}}>
<Textual content>Digicam</Textual content>
</TouchableOpacity>
) : (
<TouchableOpacity
onPress={() => {
grantCameraAccess();
}}>
<Textual content>Grant Digicam Entry</Textual content>
</TouchableOpacity>
)}
{galleryPermission ? (
<TouchableOpacity
onPress={() => {
processLibraryImage();
}}>
<Textual content>Picture Library</Textual content>
</TouchableOpacity>
) : (
<TouchableOpacity
onPress={() => {
grantLibraryAccess();
}}>
<Textual content>Grant Digicam Entry</Textual content>
</TouchableOpacity>
)}
{preprocessedImage ? (
<Picture
type={{width: 320, top: 400, margin: 10}}
supply={{uri: preprocessedImage}}
/>
) : null}
{preprocessedImage ? (
<TouchableOpacity
onPress={() => {
performOCR();
}}>
<Textual content>Scan Receipt</Textual content>
</TouchableOpacity>
) : null}
</View>
);
};
export default NewTransactionScreen;
You may solely name the performOCR fucntion if there’s a URI in preprocessedImage.
Right here is my bundle.json file:
{
...
"dependencies": {
"@react-native-async-storage/async-storage": "^1.19.3",
"@react-native-community/masked-view": "^0.1.11",
"@react-native-community/viewpager": "^5.0.11",
"@react-native-ml-kit/text-recognition": "^1.5.1",
"@react-navigation/bottom-tabs": "^6.5.11",
"@react-navigation/native": "^6.1.9",
"@react-navigation/stack": "^6.3.19",
"expo": "^49.0.16",
"expo-image-manipulator": "11.3.0",
"expo-image-picker": "^14.5.0",
"expo-status-bar": "^1.7.1",
"firebase": "^10.5.0",
"react": "^18.2.0",
"react-native": "0.72.6",
"react-native-gesture-handler": "^2.13.3",
"react-native-image-picker": "^7.0.2",
"react-native-image-resizer": "^1.4.5",
"react-native-reanimated": "^3.5.4",
"react-native-safe-area-context": "^4.7.3",
"react-native-screens": "^3.26.0",
"react-native-vector-icons": "^10.0.0"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"@babel/preset-env": "^7.20.0",
"@babel/runtime": "^7.20.0",
"@react-native/eslint-config": "^0.72.2",
"@react-native/metro-config": "^0.72.11",
"@tsconfig/react-native": "^3.0.0",
"@sorts/react": "^18.0.24",
"@sorts/react-native-vector-icons": "^6.4.16",
"@sorts/react-test-renderer": "^18.0.0",
"babel-jest": "^29.2.1",
"eslint": "^8.19.0",
"jest": "^29.2.1",
"metro-react-native-babel-preset": "0.76.8",
"prettier": "^2.4.1",
"react-test-renderer": "18.2.0",
"typescript": "4.8.4"
},
"engines": {
"node": ">=16"
}
}
Right here is my podfile:
# Resolve react_native_pods.rb with node to permit for hoisting
require Pod::Executable.execute_command('node', ['-p',
'require.resolve(
"react-native/scripts/react_native_pods.rb",
{paths: [process.argv[1]]},
)', __dir__]).strip
platform :ios, min_ios_version_supported
prepare_react_native_project!
# In case you are utilizing a `react-native-flipper` your iOS construct will fail when `NO_FLIPPER=1` is ready.
# as a result of `react-native-flipper` is dependent upon (FlipperKit,...) that might be excluded
#
# To repair this you may as well exclude `react-native-flipper` utilizing a `react-native.config.js`
# ```js
# module.exports = {
# dependencies: {
# ...(course of.env.NO_FLIPPER ? { 'react-native-flipper': { platforms: { ios: null } } } : {}),
# ```
flipper_config = ENV['NO_FLIPPER'] == "1" ? FlipperConfiguration.disabled : FlipperConfiguration.enabled
linkage = ENV['USE_FRAMEWORKS']
if linkage != nil
Pod::UI.places "Configuring Pod with #{linkage}ally linked Frameworks".inexperienced
use_frameworks! :linkage => linkage.to_sym
finish
goal 'Cellular' do
config = use_native_modules!
# Flags change relying on the env values.
flags = get_default_flags()
use_react_native!(
:path => config[:reactNativePath],
# Hermes is now enabled by default. Disable by setting this flag to false.
:hermes_enabled => flags[:hermes_enabled],
:fabric_enabled => flags[:fabric_enabled],
# Allows Flipper.
#
# Notice that in case you have use_frameworks! enabled, Flipper is not going to work and
# you need to disable the following line.
:flipper_configuration => flipper_config,
# An absolute path to your software root.
:app_path => "#{Pod::Config.occasion.installation_root}/.."
)
goal 'MobileTests' do
inherit! :full
# Pods for testing
finish
post_install do |installer|
# https://github.com/fb/react-native/blob/important/packages/react-native/scripts/react_native_pods.rb#L197-L202
react_native_post_install(
installer,
config[:reactNativePath],
:mac_catalyst_enabled => false
)
__apply_Xcode_12_5_M1_post_install_workaround(installer)
finish
finish
