I am trying to implement object detection in my React Native project. I have followed all the necessary steps and documentation as outlined here https://github.com/artikq/react-native-mlkit-odt#readme and here https://www.npmjs.com/package/react-native-mlkit-odt
I am capturing am image and trying to use that uri to run the object detection
I ran this:
npm install react-native-mlkit-odt
This is my code:
import MlkitOdt, { ObjectDetectorMode } from 'react-native-mlkit-odt';
const [result,setResult] = useState({});
const [, setImage] = useState();
Inside my function
if (!data.uri) {
throw new Error('uri not fetched');
}
try {
setImage(data);
setResult(
await MlkitOdt.detectFromUri(data.uri, {
detectorMode: 1,
shouldEnableClassification: true,
shouldEnableMultipleObjects: true,
})
);
} catch (e) {
console.error(e);
}
I am getting the error: [TypeError: null is not an object (evaluating 'MlkitOdt.detectFromUri')]
Does anyone know where I am going wrong?
Related
I get error: undefined is not a object evaluating prevProps.route.params.connectionString
At first prevProps.route.params.connectionString is undefined until it is set from a different function. Trying to figure out the best way to only run this.fetchApiData(connectionString) when the prop has changed.
componentDidUpdate(prevProps, prevState) {
const {connectionString} = this.props.route.params;
if (prevProps.route.params.connectionString !== connectionString) {
this.fetchApiData(connectionString);
}
}
ive initiated a new react-native app using npx init where i transferred a code i was using on anothe react native app. this code uses react expo-sqlite. i installed expo-sqlite but when i run the app, i get this annoying error:
TypeError: undefined is not an object (evaluating 'ExponentSQLite.exec')
ive tried to update expo to latest version but the error still persists. i even deleted node-modules and re-installed using npm istall but it isnt working. how do i fix it? I'm running bare react-native which also uses some expo packages.
this is my code:
import React from "react";
import { Text } from "react-native";
import * as SQLite from "expo-sqlite";
const db = SQLite.openDatabase("silkyMarket.db");
export default class SQLiteScreen extends React.Component {
constructor() {
super();
this.state = {
todo: [],
search: "",
};
}
componentDidMount() {
// create user table if not exist
db.transaction((tx) => {
tx.executeSql(
"create table if not exists tbl_register (id integer primary key not null, name text, contact text);"
);
});
// check if registered
const query = "select *from tbl_register";
const array = [];
db.transaction((tx) => {
tx.executeSql(query, array, (tx, results) => {
this.setState({ todo: results.rows });
console.log(this.state.todo._array);
});
});
}
render() {
return <Text>this is important</Text>;
}
}
If you are using the Expo bare workflow, you must delete the Android folder and run expo run:android again.
After these steps, the mentioned error stopped for me.
I'm working on a React Native app on Expo Web. I'm trying to load custom fonts as instructed from Expo Documentation on loading custom fonts. But I get the error Unexpected type number expected a URI string or Asset from expo-asset. I've searched online but there's no solution mentioning this problem.
state = { fontLoaded: false };
async componentDidMount() {
try {
await Font.loadAsync({
Merriweather: require('./assets/fonts/Merriweather.ttf')
});
this.setState({ fontLoaded: true });
} catch (e) {console.log(e); }
};
Detailed in https://snack.expo.io/#uahnbu/romee
I solved it by replacing require with import or by creating a new object that pick the path in fonts[key].default
I am a beginner and still try to learn to react native so help me!
I want to access AsyncStorage.getItem value outside the function.
I will further explain via code
This is my code :
import {AsyncStorage} from 'react-native';
set that value on screen1
AsyncStorage.setItem('mobileno', JSON.stringify(MobileNo));
try to get that value on screen 2
AsyncStorage.getItem('mobileno', (err, MobileNumber) => {
let abc = MobileNumber;
console.log("abc value " + abc)
})
let { MobileNo } = abc;
console.log({MobileNo})
I want to access that abc value outside the function as let { MobileNo } = abc; but it shows the error!
note : [console.log("abc value " + abc) works perfectlly ]
Error
can't find variable abc
question
So, how can I access that abc or that AsyncStorage value for the whole page [outside that function]; Because I want to use that value in other function too!
In short, I want that stored value in AsyncStorage to use it in other function.
Thank you for contributing your precious time
constructor(props) {
super(props);
this.state = {
mobileNumber: '',
};
}
componentDidMount() {
AsyncStorage.getItem('mobileno').then((mobileNo) => {
if(mobileNo){
this.setState({mobileNumber: mobileNo});
console.log(this.state.mobileNumber);
}
});
}
render() {
return(
<View>
<Text>{this.state.mobileNumber}</Text>
</View>
);
}
In this case async/await is not necessary because .then() is only called after the getItem() function is done fetching the item.
In your code abc is called out of scope. abc is only declared in your callback. An alternative can be to create a class method that returns that data. I personally find the async/await syntax much cleaner and easier understand the .then() chains.
docs show an example of this
_retrieveData = async () => {
try {
const value = await AsyncStorage.getItem('mobileno');
if (value !== null) {
// We have data!!
console.log(value);
return value;
}
} catch (error) {
// Error retrieving data
}
}
import {AsyncStorage} from 'react-native';
Above AsyncStorage is Deprecated, Moved to React-Native-Community
you can use now
1 :- yarn add #react-native-community/async-storage
2 :- react-native link #react-native-community/async-storage
Code :-
import AsyncStorage from '#react-native-community/async-storage';
storeData = async () => {
try {
await AsyncStorage.setItem('#storage_Key', 'stored value')
} catch (e) {
// saving error
}
}
getData = async () => {
try {
const value = await AsyncStorage.getItem('#storage_Key')
if(value !== null) {
// value previously stored
}
} catch(e) {
// error reading value
}
}
Link :- https://www.npmjs.com/package/#react-native-community/async-storage
use the link
https://github.com/react-native-community/async-storage
Install
$ yarn add #react-native-community/async-storage
Link
React Native 0.60+
CLI autolink feature links the module while building the app.
React Native <= 0.59
$ react-native link #react-native-community/async-storage
Note For iOS using cocoapods, run:
$ cd ios/ && pod install
See docs for manual linking guide
Upgrading to React Native 0.60+
New React Native comes with autolinking feature, which automatically links Native Modules in your project. In order to get it to work, make sure you unlink Async Storage first:
$ react-native unlink #react-native-community/async-storage
Usage
Import
import AsyncStorage from '#react-native-community/async-storage';
Store data
storeData = async () => {
try {
await AsyncStorage.setItem('#storage_Key', 'stored value')
} catch (e) {
// saving error
}
}
Read data
getData = async () => {
try {
const value = await AsyncStorage.getItem('#storage_Key')
if(value !== null) {
// value previously stored
}
} catch(e) {
// error reading value
}
}
I'm writing a sampler app in React-Native using Expo and have run into the follow error:
react-native - require() must have a sing string literal argument
Pre-recorded samples are played called like this:
const SAMPLES = [
{ name: 'air horn', uri: require('../samples/air_horn.mp3') },
{ name: 'rim shot', uri: require('../samples/rimshot.mp3') },
]
playSample = (uri) => {
const { soundObject, status } = Expo.Audio.Sound.create(
uri,
{ shouldPlay: true }
)
}
It's somewhat based off the Expo documentation and works fine. However, I also want the user to record their own samples, which means it's coming from a custom URL:
playCustomSample = () => {
const customSample = this.props.navigation.state.params
? require(this.props.navigation.state.params.custom.toString())
: require('./samples/blank.mp3')
try {
const { soundObject, status } = Expo.Audio.Sound.create(
customSample,
{ shouldPlay: true }
)
} catch(error) {
console.log('ERROR:', error)
}
When I log the custom param I'm being passed by navigation, it's there. So I get that I'm doing it conceptually wrong--that require() requires a string, but I'm not going to know the name/location of the file until it is recorded.
How would I get access to the audio file without knowing the link ahead of time so I can include it?
Also, I don't have access to a Mac so ejecting it from Expo, so using something like react-native-audio or react-native-sound isn't an option.