Hi I am a new React user and I am trying to add the following component to an app I'm developing:
import React, { useState, useEffect, Component } from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { Camera, CameraType } from 'expo-camera';
function InAppCamera() {
const [hasPermission, setHasPermission] = useState(null);
const [type, setType] = useState(CameraType.back);
useEffect(() => {
(async () => {
const { status } = await Camera.requestCameraPermissionsAsync();
setHasPermission(status === 'granted');
})();
}, []);
if (hasPermission === null) {
return <View />;
}
if (hasPermission === false) {
return <Text>No access to camera</Text>;
}
return (
<View style={styles.container}>
<Camera style={styles.camera} type={type}>
<View style={styles.buttonContainer}>
<TouchableOpacity
style={styles.button}
onPress={() => {
setType(type === CameraType.back ? CameraType.front : CameraType.back);
}}>
<Text style={styles.text}> Flip </Text>
</TouchableOpacity>
</View>
</Camera>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
camera: {
flex: 1,
},
buttonContainer: {
flex: 1,
backgroundColor: 'transparent',
flexDirection: 'row',
margin: 20,
},
button: {
flex: 0.1,
alignSelf: 'flex-end',
alignItems: 'center',
},
text: {
fontSize: 18,
color: 'white',
},
});
export default InAppCamera;
I am trying to reference this component in another .js file as seen below:
<FAB style={styles.fab} small icon="camera" onPress={InAppCamera} />
I get an error for an invalid hook call. Any suggestions would be great thank you so much!
CodePudding user response:
//You can get some idea from the given sample.
const [showCamera, setCamera] = useState(false);
return <View>
/*Other Code If any */
<FAB style={styles.fab} small icon="camera" onPress={() => setCamera(!showCamera)} />
{showCamera ? <InAppCamera /> : null}
/*Other Code If any */
</View>