Assignment #3
Group Members:
Nasir Khan
FA19-BCS-212
Ihasullah Khan
FA19-BCS-127
Tila Khan
FA19-BCS-215
Code:
import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, Button, TouchableOpacity } from 'react-native';
import { Camera, Constants, FlashMode } from 'expo-camera';
export default function App() {
const [hasCameraPermission, setHasCameraPermission] = useState(null);
const [camera, setCamera] = useState(null);
const [type, setType] = useState(Constants.Type.back);
const [flashMode, setFlashMode] = useState(Constants.FlashMode.off);
const requestPermissions = async () => {
const cameraStatus = await Camera.requestCameraPermissionsAsync();
setHasCameraPermission(cameraStatus.status === 'granted');
}
const takePicture = async () => {
if (camera) {
const photo = await camera.takePictureAsync();
console.log(photo.uri);
}
}
requestPermissions();
if (hasCameraPermission === null) {
return <View />;
}
if (hasCameraPermission === false) {
return <Text>No access to camera</Text>;
}
return (
<View style={{ flex: 1 }}>
<View style={styles.cameraContainer}>
<Camera
ref={ref => setCamera(ref)}
style={{flex:1,aspectRatio:0.5}}
type={type}
ratio={"16:9"}
flashMode={flashMode}
pictureSize="1920x1080"
quality={0.5}
autoFocus="auto"
focusDepth={0.7}
zoom={0}
/>
</View>
<View style={{flexDirection:'row',justifyContent:"spacearound",paddingBottom:10}}>
<Button title="Take Picture" color="#00aeef" onPress={() =>
{takePicture();
alert("Picture Taken") }} />
<TouchableOpacity
style={{backgroundColor:'#00aeef',borderRadius:5,width:90}} onPress={() => {
setFlashMode(()=>{flashMode == Constants.FlashMode.torch?
setFlashMode(Constants.FlashMode.off) : setFlashMode(Constants.FlashMode.torch)
})}} >
<Text style={{height:35,textAlign:"center",color:"white",
alignItems:'center',alignContent:"center",padding:5,
}}>{flashMode == Constants.FlashMode.off ?"On Flash": "Off Flash"}</Text>
</TouchableOpacity>
<TouchableOpacity
style={{backgroundColor:'#00aeef',borderRadius:5,width:90}} onPress={() => {
setFlashMode(()=>{type == Constants.Type.back?
setType(Constants.Type.front) : setType(Constants.Type.back) })}} >
<Text style={{height:35,textAlign:"center",color:"white",
alignItems:'center',alignContent:"center",padding:5,
}}>Flip</Text>
</TouchableOpacity>
</View>
</View>
);
}
const styles = StyleSheet.create({
cameraContainer: {
flex: 1,
flexDirection: 'row',
},
});
Screen shots:
Flash On: