I am trying to set up a face detector on expo.
First I import the package and set up the state hook:
import { Camera } from "expo-camera";
import * as FaceDetector from "expo-face-detector";
const [faces, setFaces] = useState([]);
And set up the onFacesDetected function:
const onFacesDetected = async ({ faces }) => {
setFaces(faces);
console.log({ faces });
};
And finally the camera:
<Camera
style={styles.camera}
ratio={"2:1"}
ref={(r) => {
camera = r;
}}
onFacesDetected={onFacesDetected}
faceDetectorSettings={{
mode: FaceDetector.Constants.Mode.fast,
detectLandmarks: FaceDetector.Constants.Landmarks.none,
runClassifications: FaceDetector.Constants.Classifications.all,
minDetectionInterval: 125,
tracking: false,
}}
>
But I am getting an error that the package doesnt provide the object needed (as in the docs tutorial):
[Unhandled promise rejection: TypeError: undefined is not an object (evaluating 'FaceDetector.Constants.Mode')]
I have tried reinstalling the package to no avail.
Any help on how to troubleshoot this is appreciated..
EDIT: in VSCode I see that Constants is not defined by hovering it. It shows this error:
Property 'Constants' does not exist on type 'typeof import("/home/david/Projects/adshare/node_modules/expo-face-detector/build/FaceDetector")'.
`
After looking in node_modules/expo-face-detector/ I was able to see that the functions were renamed in the latest version, but the docs have not been updated anywhere.
It is now:
faceDetectorSettings={{
mode: FaceDetector.FaceDetectorMode.fast,
detectLandmarks: FaceDetector.FaceDetectorLandmarks.none,
runClassifications: FaceDetector.FaceDetectorClassifications.all,
minDetectionInterval: 125,
tracking: false,
}}
Related
I'm trying to use react-router-native v:6.3.0 for a React Native app. In one of my components I have a button that should redirect a screen using useNavigate:
//screens/exercises/buttonselection.js
const NextDescription = ({exercise, selectedComponent }) => {
let navigate = useNavigate();
return(
<>
<Image
style={styles.image}
source={require('../../assets/favicon.png')}
/>
<ButtonAwasome
title={'DoExercise'}
style={styles.buttonStart}
progress
onPress={next =>{
setTimeout(() => {
navigate('../../screens/Exercises/SelectedExercise')
}, 1000);
next();
}}>Comenzar!
</ButtonAwasome>
</>
)
In my app.js I am correctly wrapping the route I want to redirect to:
//app.js
import { NativeRouter, Routes, Route } from 'react-router-native';
<NativeRouter>
<Routes>
<Route exact path='./components/ModalWindow/NextDescription' component={NextDescription} />
</Routes>
</NativeRouter>
However, I get the following error: ypeError: undefined is not an object (evaluating '_locationProp.pathname') in \node_modules\react-router\umd\react-router.development.js
I don't understand why you find a problem with this library when I am not importing it in any component of my program. react-router-native uses qualities of react-router?
I was facing issue in React Native when using react-native-pdf to display pdf in App
logs displayed in console:
Error: ReactNativeBlobUtil request error:
java.lang.IllegalStateException: Use of own trust manager but none
definedjava.lang.IllegalStateException: Use of own trust manager but
none defined]
Open Your code and simply use trustAllCerts props and set its value false
as shown below :
<Pdf
trustAllCerts={false}
source={{
uri: pdfUrl,
cache: true,
}}
onLoadComplete={(numberOfPages, filePath) => {
console.log(`Number of pages: ${numberOfPages}`);
}}
onPageChanged={(page, numberOfPages) => {
console.log(`Current page: ${page}`);
}}
onError={error => {
console.log(error);
}}
onPressLink={uri => {
console.log(`Link pressed: ${uri}`);
}}
style={styles.pdf}
/>
I copied/paste the first example of the React Hook Forms from NB 3.0 and getting this error. TypeError: errors is not an Object. (evaluating '"firstName" in errors'). Any idea why?
The example provided here Native Base V3 React-Hook_forms does not use the controller correctly to get onChangeText state and to catch errors for the value, to fix this change the following;
Change the line: const { control, handleSubmit, errors } = useForm(); to const { control, handleSubmit, watch, formState: { errors } } = useForm();
In the Controller change render={({ onChange, onBlur, value }) to render={({ field: { onChange, onBlur, value } })
In the Input component change onChangeText={(val) => onChange(val)} to onChangeText={onChange}
Reference is from the integration example on the React-Hook-Form website here: React Hook Form with React Native
So this is my code
I already answered the question.
export const BigCard = ({Title, Image, Description}) => {
console.log(Image)
return(
<StyledBigCard>
<StyledImage source={{
uri: Image,
}}/>
<StyledStroke>
<StyledStrokeText>
<StyledPBigCard>{Description}</StyledPBigCard>
</StyledStrokeText>
<FontAwesomeIcon style={style.icon} size={ 22 } icon={faChevronRight} />
</StyledStroke>
</StyledBigCard>
)
};
this is were i import the images etc. it is set in PBS1Detail, its an object so when i go to PBS1Detail.Image i get the image
const db = firebase.firestore();
const [PBS1Detail, setPBS1Detail] = useState([]);
const [partnerLevel, setPartnerLevel] = useState('');
useEffect(()=> {
{/* DATABASE */}
db.collection('Track').get().then((snapshot) => {
let results = []
snapshot.docs.forEach(doc => {
results.push(renderTracks(doc))
}
)
setPBS1Detail(results)
});
then i push it all the way to the screen were i import Image
all my imports are correct, and the console.log() gives me the good url to the image.
now when i now reload the app it gives the error "Warning: Failed prop type: Invalid prop source supplied to Image."
then when i update the image component to
<StyledImage source={{uri: 'https://s3.eu-central-1.wasabisys.com/image-parttime-bijbelschool-jaar-1/Track1Module1Thumbnail.jpg'}}
and than save the changes it works
then when i update it to
<StyledImage source={{uri: Image}} />
and than save the changes it also works
so when i run it the first time it gives me this error than when i change it to an url and than change it back to the Image prop it works. but when i reload the app it gives me this error again.
how can i fix this?
The PBS1Detail is an empty array until you actually get the image data from Firestore.
So when the first render, I guess you are trying to pass undefined or some invalid values for the source prop.
How about you give a condition for the render part?
export const BigCard = ({Title, Image, Description}) => {
console.log(Image)
return(
<StyledBigCard>
{!!Image && (
<StyledImage source={{
uri: Image,
}}/>
)}
<StyledStroke>
<StyledStrokeText>
<StyledPBigCard>{Description}</StyledPBigCard>
</StyledStrokeText>
<FontAwesomeIcon style={style.icon} size={ 22 } icon={faChevronRight} />
</StyledStroke>
</StyledBigCard>
)
};
The problem is not my code above, what i did was that on my homescreen i sended wrong props to Image is send
Image={Require('../../assets/Image.png')}
thats why te error occurded. i have set it to
Image={'https://s3.eu-central-1.wasabisys.com/image-parttime-bijbelschool-jaar-1/Track1Module1Thumbnail.jpg'}
and it works perfectly!
I have an image slider component to display images from my Firebase database as follows ,
import React from 'react';
import Swiper from 'react-native-swiper';
import { View, StyleSheet, Image } from 'react-native'
const ImageSlider = ({images}) => {
return (
<Swiper autoplayTimeout={5}
style={styles.wrapper}
showsButtons={false}
loadMinimal={true}
showsPagination={true}
paginationStyle={styles.paginationStyle}
activeDotStyle={styles.activeDotStyle}
dotStyle={styles.dotStyle}
loop={true} autoplay={true}
>
{images.map((data, index) => {
return (
<View key={index} style={styles.slider}>
<Image style={styles.itemImage} source={{ uri: data }} />
</View>
)
})}
</Swiper>
)
}
For test above component I used follwing test file ,
import React from 'react';
import renderer from 'react-test-renderer';
import ImageSlider from '../../../src/components/imageSlider/ImageSlider';
test('renders correctly', () => {
const tree = renderer.create(<ImageSlider />).toJSON();
expect(tree).toMatchSnapshot();
});
When I'm run npm test command and after I got following error
TypeError: Cannot read property 'map' of undefined
Can anyone help me to slove this problem , Thank you
In your test, you're creating an ImageSlider without any parameters:
<ImageSlider />
In ImageSlider, you try to map the property images:
images.map( //etc
Because you didn't pass in an images parameter/property, images is undefined when you try to map it. To solve, this pass in value for images in your test:
<ImageSlider images={YOUR_TEST_IMAGES_DATA}/>
The other option is to redesign ImageSlider so that it fails gracefully if images is undefined. But, then there wouldn't be much a point in doing the test (unless the test was to see what happens if no parameter is passed in)