I’m trying to get the information from smilingProbability, leftEyeOpenProbabilitye rightEyeOpenProbability, which in the documentation just says that the option ‘faceDetectionClassifications’ should be selected as ‘all’, but in my code it is exactly as requested and even so it doesn’t work.
See my code:
import React, { useState, useEffect } from "react";
import { StyleSheet, Text, View, SafeAreaView } from "react-native";
import { Camera } from "expo-camera";
import * as FaceDetector from "expo-face-detector";
export default function App() {
const [hasPermission, setHasPermission] = useState(null);
const [faces, setFaces] = useState([]);
const faceDetected = ({ faces }) => {
setFaces(faces);
console.log({ faces }); // ou (faces)
};
useEffect(() => {
(async () => {
const { status } = await Camera.requestPermissionsAsync();
setHasPermission(status === "granted");
})();
}, []);
if (hasPermission !== true) {
return <Text>No access to camera</Text>;
}
return (
<SafeAreaView style={styles.container}>
<Camera
style={{ flex: 1 }}
type="front"
onFacesDetected={faceDetected}
FaceDetectorSettings={{
mode: FaceDetector.Constants.Mode.fast,
detectLandmarks: FaceDetector.Constants.Landmarks.all,
runClassifications: FaceDetector.Constants.Classifications.all,
minDetectionInterval: 10000,
tracking: false,
}}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
},
});
link on GitHub: https://github.com/JoyceQuerubino/FaceDetector
Related
I'm using #expo/react-native-action-sheet, and i want to show a button in the props message.
e.g
import { useActionSheet } from "#expo/react-native-action-sheet"
const { showActionSheetWithOptions } = useActionSheet()
const onPress = () => {
// Here
**const message = '<TouchableOpacity><Text>fsdf</Text></TouchableOpacity>'**
showActionSheetWithOptions(
{
message
},
(buttonIndex) => {
}
)
}
But it is not showing the button as i want
My purpose is to add a date picker in the action sheet.
Expecting answer:
In this case, you can use another library https://gorhom.github.io/react-native-bottom-sheet/ because Action Sheet is about the list of actions.
You can place any content you need for react-native-bottom-sheet and it also supports Expo
import React, { useCallback, useMemo, useRef } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import BottomSheet from '#gorhom/bottom-sheet';
const App = () => {
// ref
const bottomSheetRef = useRef<BottomSheet>(null);
// variables
const snapPoints = useMemo(() => ['25%', '50%'], []);
// callbacks
const handleSheetChanges = useCallback((index: number) => {
console.log('handleSheetChanges', index);
}, []);
// renders
return (
<View style={styles.container}>
<BottomSheet
ref={bottomSheetRef}
index={1}
snapPoints={snapPoints}
onChange={handleSheetChanges}
>
<View style={styles.contentContainer}>
<Text>Awesome 🎉</Text>
</View>
</BottomSheet>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 24,
backgroundColor: 'grey',
},
contentContainer: {
flex: 1,
alignItems: 'center',
},
});
export default App;
I have installed the expo camera tool with npm.
I run this code and it works on Snack :
import React, { useState, useEffect } from "react";
import { Text, View, StyleSheet, Button } from "react-native";
import { BarCodeScanner } from "expo-barcode-scanner";
import { Camera } from "expo-camera";
export default function Scanner() {
const [hasPermission, setHasPermission] = useState(null);
const [scanned, setScanned] = useState(false);
useEffect(() => {
(async () => {
const { status } = await BarCodeScanner.requestPermissionsAsync();
setHasPermission(status === "granted");
})();
}, []);
const handleBarCodeScanned = ({ type, data }) => {
setScanned(true);
alert(`Bar code with type ${type} and data ${data} has been scanned!`);
};
if (hasPermission === null) {
return <Text>Requesting for camera permission</Text>;
}
if (hasPermission === false) {
return <Text>No access to camera</Text>;
}
return (
<View style={styles.container}>
<Camera
style={StyleSheet.absoluteFillObject}
onBarCodeScanned={console.log}
barCodeScannerSettings={{
barCodeTypes: [BarCodeScanner.Constants.BarCodeType.qr],
}}
/>
{scanned && (
<Button title={"Tap to Scan Again"} onPress={() => setScanned(false)} />
)}
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "column",
justifyContent: "center",
},
});
But in localhost I have the message "no access to camera"and I have no popup asking for access.
I am a complete beginner with react native and I can't figure out how to fix this ^^.
EDIT : I'm running it on web
I try to use the barcode-scanner on my react native app, but a I get this error :
Invalid hook call. Hooks can only be called inside of the body of a function component.
That is the code source of my component :
import React, { useState, useEffect, Component } from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
import { BarCodeScanner } from 'expo-barcode-scanner';
class QrCode extends Component {
render () {
const [hasPermission, setHasPermission] = useState(null);
const [scanned, setScanned] = useState(false);
useEffect(() => {
(async () => {
const { status } = await BarCodeScanner.requestPermissionsAsync();
setHasPermission(status === 'granted');
})();
}, []);
const handleBarCodeScanned = ({ type, data }) => {
setScanned(true);
alert(`Bar code with type ${type} and data ${data} has been scanned!`);
};
if (hasPermission === null) {
return <Text>Requesting for camera permission</Text>;
}
if (hasPermission === false) {
return <Text>No access to camera</Text>;
}
return (
<View style={styles.container}>
<BarCodeScanner
onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
style={StyleSheet.absoluteFillObject}
/>
{scanned && <Button title={'Tap to Scan Again'} onPress={() => setScanned(false)} />}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
});
export default QrCode;
When I call my props I have to use the below. Is this normal? or am I doing something that's off? everything works. props has data, it's just alway nested in something and I have to pull it out from multiple levels
props.posts.posts
Is there a reason why it's nested in a posts? Am I doing something redundant?
import { ScrollView, StyleSheet, Text, View, FlatList } from 'react-native';
import Feed from './components/Feed';
import { Provider } from 'react-redux';
import store from './store/configureStore'
function App() {
return (
<Provider store={store}>
<View style={styles.container}>
<Feed />
</View>
</Provider>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
export default App;
feed.js
import React, { useState, useEffect } from "react";
import { StyleSheet, Text, View, ScrollView, FlatList} from "react-native";
import { connect } from 'react-redux';
import { fetchAPI } from '../actions';
const Feed = (props) => {
useEffect(() => {
props.fetchAPI();
}, []);
console.log(props)
return (
<View style={styles.container}>
<FlatList
data={props.posts.posts}
renderItem={({item, index}) => (
<View key={index}>
<Text>{item.id}</Text>
</View>
)}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
const dispatchToProps = (dispatch) => {
return {
fetchAPI: () => dispatch(fetchAPI()),
};
};
const stateToProps = (state) => ({
posts: state.posts,
});
export default connect(stateToProps, dispatchToProps)(Feed);
action
import { FETCH_POSTS } from "./types";
export const fetchAPI = () => (dispatch) => {
fetch("https://jsonplaceholder.typicode.com/posts")
.then((response) => response.json())
.then((response) => {
dispatch({
type: FETCH_POSTS,
payload: response,
// again don't know where payload is coming from
});
})
.catch((error) => console.log(error));
};
reducer.js
import { FETCH_POSTS } from '../actions/types';
const initialState = {
posts: []
}
export default (state = initialState, action) => {
switch(action.type) {
case FETCH_POSTS:
return {...state, posts: action.payload}
default:
return state;
}
}
Yes. your approach works fine too. However I recommend some minor changes.
Action
import { FETCH_POSTS } from "./types";
export const fetchAPI = () => (dispatch) => {
fetch("https://jsonplaceholder.typicode.com/posts")
.then((response) => response.json())
.then(({posts}) => { //changes added here
dispatch({
type: FETCH_POSTS,
payload: posts, //changes added here
});
})
.catch((error) => console.log(error));
};
Feed.js
import React, { useState, useEffect } from "react";
import { StyleSheet, Text, View, ScrollView, FlatList} from "react-native";
import { connect } from 'react-redux';
import { fetchAPI } from '../actions';
const Feed = (props) => {
useEffect(() => {
props.fetchAPI();
}, []);
console.log(props)
return (
<View style={styles.container}>
<FlatList
data={props.posts} //changes added here
renderItem={({item, index}) => (
<View key={index}>
<Text>{item.id}</Text>
</View>
)}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
const dispatchToProps = (dispatch) => {
return {
fetchAPI: () => dispatch(fetchAPI()),
};
};
const stateToProps = (state) => ({
posts: state.posts,
});
export default connect(stateToProps, dispatchToProps)(Feed);
Hope this helps. Let me know if the code works or not. Cheers!
Is there a way to hide components when the keyboard shows, aside from installing packages?
Using the code sample from the Keyboard documentation, I would do something like this:
class Example extends Component {
state = {keyboardOpen: false};
componentDidMount() {
this.keyboardDidShowListener = Keyboard.addListener(
'keyboardDidShow',
this._keyboardDidShow,
);
this.keyboardDidHideListener = Keyboard.addListener(
'keyboardDidHide',
this._keyboardDidHide,
);
}
componentWillUnmount() {
this.keyboardDidShowListener.remove();
this.keyboardDidHideListener.remove();
}
_keyboardDidShow() {
this.setState({
keyboardOpen: true
});
}
_keyboardDidHide() {
this.setState({
keyboardOpen: false
});
}
render() {
return (
{!this.state.keyboardOpen && <MyComponent />}
);
}
}
Basically, in componentDidMount you subscribe to the show and hide keyboard events. You keep track of the Keyboard current state in your Component state thanks to this.state.keyboardOpen and you conditionally display MyComponent based on the value of this.state.keyboardOpen in your render method.
For those using functional components, here is a hook that you could use to detect when the keyboard is opened and closed.
import { useEffect, useState, useMemo } from "react";
import { Keyboard } from "react-native";
const useKeyboardOpen = () => {
const [isKeyboardOpen, setIsKeyboardOpen] = useState(false);
useEffect(() => {
const keyboardOpenListener = Keyboard.addListener("keyboardDidShow", () =>
setIsKeyboardOpen(true)
);
const keyboardCloseListener = Keyboard.addListener("keyboardDidHide", () =>
setIsKeyboardOpen(false)
);
return () => {
if (keyboardOpenListener) keyboardOpenListener.remove();
if (keyboardCloseListener) keyboardCloseListener.remove();
};
}, []);
return isKeyboardOpen;
};
export default useKeyboardOpen;
And this is how I use it in my projects:
import { useTheme } from "react-native-paper";
import useKeyboardOpen from "hooks/useKeyboardOpen";
export const Login = () => {
const theme = useTheme();
const isKeyboardOpen = useKeyboardOpen();
const styles = useStyles(theme, isKeyboardOpen);
return (
<View style = {styles.container}>
<View style = {styles.logo}>
<Logo />
</View>
<View style = {styles.form}>
....
</View>
</View>
);
};
const useStyles = (theme, isKeyboardOpen) = (
StyleSheet.create({
container: {
flex: 1,
},
logo: {
flex: 1,
marginTop: 20,
justifyContent: "center",
alignItems: "center",
...(isKeyboardOpen && {
display: "none",
}),
},
form: {
flex: 1,
}
})
);
I made this into a npm package if anyone is interested.
https://github.com/TIKramer/react-native-hide-onkeyboard
You can hide the view by using HideOnKeyboard> </HideOnKeyboard