Text Recognition with RNCamera - react-native

I'm trying to develop a ReactNative app which uses RNCamera, along with other libraries like react-navigation. Here are the dependencies and their versions that I am using:
"#react-native-community/masked-view": "^0.1.10",
"react": "16.13.1",
"react-native": "0.63.4",
"react-native-camera": "^3.42.0",
"react-native-cli": "^2.0.1",
"react-native-gesture-handler": "^1.9.0",
"react-native-reanimated": "^1.13.2",
"react-native-safe-area-context": "^3.1.9",
"react-native-screens": "^2.16.1",
"react-navigation": "^4.4.3",
"react-navigation-stack": "^2.10.2"
Everything is working just fine, but the problem is that I want to use the live text recognition which does not give me the results expected. This is the code I am using:
import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {RNCamera} from 'react-native-camera';
const CameraScreen = ({navigation}) => {
state = {
recordOptions: {
mute: false,
maxDuration: 5,
quality: RNCamera.Constants.VideoQuality['288p'],
}
};
return (
<RNCamera
ref={ref => {
camera = ref;
}}
style={{
flex: 1,
width: '100%',
}}
type={'back'}
flashMode={'off'}
autoFocus={'on'}
zoom={0}
whiteBalance={'auto'}
ratio={'16:9'}
focusDepth={0}
trackingEnabled
androidCameraPermissionOptions={{
title: 'Permission to use camera',
message: 'We need your permission to use your camera',
buttonPositive: 'Ok',
buttonNegative: 'Cancel',
}}
onTextRecognized={({text})=>{console.log(text)}}
></RNCamera>
);
};
const styles = StyleSheet.create({});
export default CameraScreen;
As you can see, I call an console.log function for onTextRecognized, which is triggered every few milliseconds. What happens is that I am constantly reciving the text 'undefined', which does not change even if I put text in front of the camera for a minute. This is the logs I got (it can be seen that logs appear every few milliseconds):
logs file
Does anybody know how can I get the text without taking a picture?
I also have tried to add 'textBlocks' from other tutorials but I can't make it work (please tell me if you also know how to do this).

Ok that was an stupid question, sorry.
The curly brackets that I put in onTextRecognized={({text})=>{console.log(text)}} are for extracting specific information from a bigger object. As the 'text' parameter does not exist in the 'textBlocks' object that onTextRecognized returns, the console prints undefined. In order to make it work you actualy have to put {textBlocks} where I put text, like so:
onTextRecognized={({textBlocks})=>{console.log(textBlocks)}}
Putting that will return the 'textBlocks' object from a bigger 'textBlock'object (they have the same name but the inner 'textBlocks' is easier to use).

Related

How do you use icons in a React Native Elements Header object?

I went through all the set up steps at https://reactnativeelements.com/docs and am just trying to do a simple Header following their example.
If I click the "Copy Code" button in their playground, it gives me this:
import * as React from "react";
import { Header, Icon } from "#rneui/base";
import { SafeAreaProvider } from "react-native-safe-area-context";
export default () => {
return (
<Header
backgroundImageStyle={{}}
barStyle="default"
centerComponent={{
text: "MY TITLE",
style: { color: "#fff" }
}}
centerContainerStyle={{}}
containerStyle={{ width: 350 }}
leftComponent={{ icon: "menu", color: "#fff" }}
leftContainerStyle={{}}
linearGradientProps={{}}
placement="center"
rightComponent={{ icon: "home", color: "#fff" }}
rightContainerStyle={{}}
statusBarProps={{}}
/>
);
}
When I do that in my app, though, it shows question marks for the icons:
Their set up docs do include this step for manual linking:
react-native link react-native-vector-icons
which I can't do because react-native no longer supports it.
But I don't know what's going wrong here. Any help would be appreciated.
If it helps, these are my dependencies in my package.json:
"#rneui/base": "^4.0.0-rc.6",
"#rneui/themed": "^4.0.0-rc.6",
"react": "18.0.0",
"react-native": "0.69.4",
"react-native-asset": "^2.0.1",
"react-native-gesture-handler": "^2.6.0",
"react-native-linear-gradient": "^2.6.2",
"react-native-safe-area-context": "^4.3.3",
"react-native-vector-icons": "^9.2.0"
For Android, I just had to follow the installation instructions at the Github repo for react-native-vector-icons here. (You might think that's obvious, but the docs for react-native-elements just have you do a yarn/npm install of react-native-vector-icons and act like that's enough to get you up and running.)
They had me add this to the android/app/build.gradle
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
and then rebuild the app.
For iOS it's more complicated. You need to use XCode and manually copy over the fonts, and then update some files. The directions are at that link above. But they're not quite accurate because they have you add fonts to the Build Phases > Copy Bundle Resources thing in XCode. (In my case, I didn't manually have to add them. They were already there.) However, running the code gave me an error "multiple commands produce" these .ttf file.
The solution to that was to go back to Build Phases > Copy Bundle Resources and manually delete all the icon .ttf files listed there, as per this article.
Everything is working now. It's stupid it's this complicated though

Activate the PanGestureHandler after a long press delay React Native

As the title of the question says, I want to activate the PanGestureHandler after a long press delay let's say a second (1000 ms) so I tried some workarounds mentioned here: https://github.com/software-mansion/react-native-gesture-handler/discussions/434 but didn't work, the LongPressGestureHandler doesn't work as expected, the pan gesture fires immediately (as in the normal case).
Following is the code I tried:
const Component = () => {
const longPressRef = useRef();
return (
<LongPressGestureHandler minDurationMs={800} ref={longPressRef}>
<Animated.View style={StyleSheet.absoluteFill}>
<PanGestureHandler
waitFor={longPressRef}
minDist={0}
{...gestureHandler}
>
<Animated.View style={StyleSheet.absoluteFill}>
...
</Animated.View>
</PanGestureHandler>
</Animated.View>
</LongPressGestureHandler>
);
}
Package.json:
"react-native-gesture-handler": "~2.1.0",
"react-native-reanimated": "~2.3.1",
"react-native-redash": "^16.2.3",
What could be a possible solution for this?

TypeError: (0, _native.useTheme) is not a function. (In '(0, _native.useTheme)()', '(0, _native.useTheme)' is undefined)

I created a drawerNavigator and now I'm trying to add an icon to the header. The issue is when I add my HeaderButton I get this error:
Component exception
In the navigationOptions I tried to use both HeaderButton and CustomHeaderButton but it doesn't work and I can't seem to figure out the issue.
This is my code:
HeaderButton.js
import React from "react";
import { HeaderButton } from "react-navigation-header-buttons";
import { Ionicons } from "#expo/vector-icons";
const CustomHeaderButton = (props) => {
return (
<HeaderButton
{...props}
IconComponent={Ionicons}
iconSize={23}
color="black"
/>
);
};
export default CustomHeaderButton;
WelcomeScreen.js
import React from "react";
import { View, Text, StyleSheet, ImageBackground, Image } from "react-native";
import MainButton from "../components/MainButton";
import Colors from "../constants/Colors";
import { HeaderButtons, Item } from "react-navigation-header-buttons";
import HeaderButton from "../components/HeaderButton";
const WelcomeScreen = (props) => {
return (
<ImageBackground
source={require("../assets/images/tsl.jpg")}
style={styles.backgroundImage}
>
<Image
source={require("../assets/images/slogan.jpg")}
style={styles.logo}
/>
<View style={styles.buttonContainer}>
<MainButton
onPress={() => {
props.navigation.navigate({
routeName: "UserLogin",
});
}}
>
User Login
</MainButton>
<MainButton
onPress={() => {
props.navigation.navigate({ routeName: "DriverLogin" });
}}
>
Driver Login
</MainButton>
<View style={styles.newAccountContainer}>
<Text style={styles.newAccountText}>Don't have an account?</Text>
</View>
<View style={styles.registerContainer}>
<MainButton style={styles.registerButton}>Register now</MainButton>
</View>
</View>
</ImageBackground>
);
};
WelcomeScreen.navigationOptions = {
headerLeft: (
<HeaderButtons HeaderButtonComponent={HeaderButton}>
<Item title="Menu" iconName="ios-menu" />
</HeaderButtons>
),
};
Thank you!
For everybody who will get error (on Max's course, vid 173 :) ):
TypeError: (0, _native.useTheme) is not a function. (In '(0, _native.useTheme)()', '(0, _native.useTheme)' is undefined)
Try to add npm i --save #react-navigation/native
If it doesn't help, delete node_modules & package-lock.json, check & update your package.json to correct versions. Here is my dependencies:
"dependencies": {
"#expo/vector-icons": "^12.0.5",
"#react-navigation/native": "^5.9.4",
"expo": "40.0.0",
"expo-app-loading": "^1.0.1",
"expo-font": "~8.4.0",
"expo-status-bar": "~1.0.3",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
"react-native-gesture-handler": "~1.8.0",
"react-native-reanimated": "~1.13.0",
"react-native-screens": "~2.15.2",
"react-native-web": "^0.13.12",
"react-navigation": "^4.4.4",
"react-navigation-drawer": "^2.7.0",
"react-navigation-header-buttons": "^6.3.1",
"react-navigation-stack": "^2.10.4",
"react-navigation-tabs": "^2.11.0",
"react-redux": "^7.2.4",
"redux": "^4.1.0",
"redux-devtools-extension": "^2.13.9"
After you'll done this, just run npm install.
I hope that it will helps somebody. Learn and enjoy!=)
I had the same issue and I did npm i --save #react-navigation/native since the error stated that useTheme was not found.
Hi I've been having this exact same issue. I'm working through a react-native course on Udemy.
Obviously this is specific to the course code etc. but I hope something here can fix your issue also.
I tried a few things so I'm not exactly sure what fixed the issue... here is what I did:
I changed the react-navigation and react-navigation-header-buttons vesrsions in package.json to those which are used in Max's code (3.11.1 & 3.0.1 respectively) and I think I ran npm install. (to update them?)
App didnt work, wouldnt launch error with react-navigation-header-buttons
ran expo update, to update packages and re-build node_modules and package-lock.json
was given a list of packages which didnt update: expo-app-loading, react-navigation, react-navigation-drawer, react-navigation-header-buttons, react-navigation-stack, react-navigation-tabs
ran expo install react-navigation react-navigation-drawer react-navigation-header-buttons react-navigation-stack react-navigation-tabs
noticed react-navigation warning that v3.13.0 wasnt supported upgrade to 4.x
ran npm install react-navigation#4 installed 4.4.4
react-navigation-header-buttons was still at an older version 3.0.5, so I ran npm install react-navigation-header-buttons#6 installed 6.3.1
npm start - Apps are working on emulator and physical device!
My working app now has the following dependencies (in package.json):
"expo": "~40.0.0",
"expo-app-loading": "^1.0.1",
"expo-status-bar": "~1.0.3",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
"react-native-gesture-handler": "~1.8.0",
"react-native-reanimated": "~1.13.0",
"react-native-screens": "~2.15.2",
"react-native-web": "~0.13.12",
"react-navigation": "^4.4.4",
"react-navigation-drawer": "^2.7.0",
"react-navigation-header-buttons": "^6.3.1",
"react-navigation-stack": "^2.10.4",
"react-navigation-tabs": "^2.11.0"
I had the same, and resolved by:
expo install react-navigation-header-buttons#6
because npm install ... throw me an error
You need to go to your package.json file, and set the following version to the "react-navigation-header-buttons" package:
"react-navigation-header-buttons": "^6.3.1"
Then run npm install again and try to run your app.
Check dependency of react-navigation-header-buttons in package.json. It may not of version 6. If it is the case, then delete that line from package.json and reinstall navigation-header-button of version 6 using npm install --save react-navigation-header-buttons#6
"md-cart" is no longer available in the ionicons list, replace the iconName with a valid name like
iconName = "cart-outline"
in my case and it will start working!
yarn add #react-navigation/native or npm i --save #react-navigation/native should solve the problem.
For everybody who will get error (on Max's course, vid 173:), run this command:
npm install react-navigation-header-buttons#6
And it will fix the issue.
I followed this step and the error disappeared:
first:
npm install --save #react-navigation/native
or
yarn add #react-navigation/native
next:
delete node_modules And I reinstalled the packages again

how to add #expo/vector-icons in react native app?

i am using #expo/vector-icons here is my package.json file
"dependencies": {
"#expo/vector-icons": "^4.1.1",
"color": "^1.0.3",
"expo": "^30.0.1",
"moment": "^2.22.2",
"react": "16.3.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-
30.0.0.tar.gz",
"react-native-extended-stylesheet": "^0.4.0" },
when i import #expo/vector-icon library in my component
import { Ionicons } from '#expo/vector-icons';
it gives error
The library comes by default so you don't need to install #expo/vector-icons.
You can just do this for example:
import { Ionicons } from '#expo/vector-icons';
and then you can use it like:
<Ionicons name="ios-pizza" color="red" size={200} />
FYI, this directory is helpful in finding different icons https://expo.github.io/vector-icons/
In your dependencies (package.json) remove #expo/vector-icons. They are included in the expo package and different versions of expo and expo/vector-icons can cause errors like this one.
From the official docs:
This library is installed by default on the template project that get
through expo init -- it is part of the expo package. It includes
popular icon sets and you can browse all of the icons using the
#expo/vector-icons directory.
Update 2021:
The official docs changed a bit, and instead of searching for icons in:
#expo/vector-icons directory
You can now search using:
icons.expo.fyi
This makes it far easier than before.
Go to 'https://icons.expo.fyi/' choose whatever you want, then import via copy, then use it.
import React from 'react'
import { Entypo } from '#expo/vector-icons';
import { View } from 'react-native';
export const Example = () => {
return(
<View>
<Entypo name="plus" size={24} color="black" />
</View>
)
}
Delete your node module folder and run expo init. And run the project

Provider does not support changing store on the fly with TabViewAnimated

I am getting the following error when attempting to switch to another tab via TabViewAnimated in my React Native app.
I have two sub-components and Provider is used as follows:
render() {
const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));
return (
<Provider store={store}>
<TabViewAnimated
style={styles.container}
navigationState={this.state}
renderScene={this._renderScene}
renderHeader={this._renderHeader}
onRequestChangeTab={this._handleChangeTab}
/>
</Provider>
);
}
The first sub-component has access to the state tree via props, but when loading the second sub-component I get the error.
My dependencies are as follows:
"react": "16.0.0-alpha.6",
"react-native": "^0.44.0",
"react-native-tab-view": "0.0.66",
"react-redux": "^5.0.5",
"redux": "^3.6.0",
"redux-thunk": "^2.2.0"
Any advice is appreciated!
The problem is that every time render is called a new store instance is created, which causes this error.
You can solve this by instantiating your store in a place where it will happen only once, usually at the entry point of your application or in a separate file that exports it:
// store.js
export default createStore(reducers, {}, applyMiddleware(ReduxThunk));
and
// App.js
import { store } from './store'
...
render() {
<Provider store={ store }> ... </Provider>
}
...
Hope this helps!