12/16/2023 Assignment No: 02

MAD

Abdul Aziz (Fa21-bse-058)

Waleed Rashid (FA21-BSE-162)
 Assignment No: 02
Home Component
import { View, Text, ImageBackground, StyleSheet } from "react-native";
import { Button } from "react-native-paper";
import { useNavigation } from "@react-navigation/native";

function Assignment() {
const navigation = useNavigation();
return(
<View style = {{flex: 1, justifyContent: "center", flexDirection:
'column', alignItems: 'center',}}>
<ImageBackground style = {styles.container}
source={require('../../assets/images/imageBackground.png')}
resizeMode="cover">
<Text style = {styles.heading}>
Welcome To Assignment 02
</Text>
<View style = {styles.buttonConatiner}>
<Button mode="contained" onPress={() =>
navigation.navigate('TakePicture')}>Open Camera</Button>
<Button mode="contained" onPress={() =>
navigation.navigate('ViewPicture')}>View Pictures</Button>
</View>
</ImageBackground>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
width: '100%',
height: '100%',
},
heading: {
marginBottom: 250,
fontWeight: '800',
fontSize: 25,
},
buttonConatiner: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
gap: 30,
},
});
export default Assignment;

TakePicture Component
import React, { useState, useRef } from 'react';
import { Camera } from 'expo-camera';
import {
Button,
Modal,
StyleSheet,
Text,
TextInput,
TouchableOpacity,
View,
} from 'react-native';
import { Entypo, MaterialCommunityIcons } from '@expo/vector-icons';
import { collection, addDoc } from 'firebase/firestore'
import db from '../../configFirebase';

function TakePicture() {
const [type, setType] = useState(Camera.Constants.Type.back);
const [permission, requestPermission] = Camera.useCameraPermissions();
const [isModalVisible, setModalVisible] = useState(false);
const [enteredName, setEnteredName] = useState('');
const [image, setImage] = useState(null);

const cameraRef = useRef(null);

if (!permission) {
return <View />;
}

if (!permission.granted) {
return (
<View style={styles.container}>
<Text style={{ textAlign: 'center' }}>
We need your permission to show the camera
</Text>
<Button onPress={requestPermission} title="Grant Permission" />
</View>
);
}

const toggleCameraType = () => {

setType((currentType) =>
currentType === Camera.Constants.Type.back
? Camera.Constants.Type.front
: Camera.Constants.Type.back
 );
};

const takePhoto = async () => {

if (cameraRef) {
const photoData = await cameraRef.current.takePictureAsync();
setImage(photoData.uri);
}
setModalVisible(true);
};

const saveImage = async () => {

try {
if(enteredName !== '') {
const imageRef = collection(db, 'images');
const docRef = await addDoc(imageRef, {
name: enteredName,
url: image
});

console.log('Image uploaded with id: ', docRef.id);

}
} catch (error) {
console.log('Error in saving image: ', error);
}
setModalVisible(false);
setEnteredName('');
};

return (
<View style={styles.container}>
<Camera style={styles.camera} type={type} ref={cameraRef}>
<View style={styles.buttonContainer}>
<TouchableOpacity style={styles.button}
onPress={toggleCameraType}>
<Text><MaterialCommunityIcons name="camera-flip" size={50}
color="white" /></Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={takePhoto}>
<Text><Entypo name="circle" size={60} color="white"/></Text>
</TouchableOpacity>
</View>
</Camera>
<Modal
animationType="slide"
transparent={true}
visible={isModalVisible}
onRequestClose={() => setModalVisible(false)}>
 <View style={styles.modalContainer}>
<Text style={styles.modalText}>Enter Name:</Text>
<TextInput
style={styles.input}
onChangeText={(text) => setEnteredName(text)}
value={enteredName}
/>
<Button onPress={saveImage} title="Save Image" />
</View>
</Modal>
</View>
);
}

const styles = StyleSheet.create({

container: {
flex: 1,
justifyContent: 'center',
},
camera: {
flex: 1,
},
buttonContainer: {
flex: 1,
flexDirection: 'row',
backgroundColor: 'transparent',
margin: 20,
},
button: {
flex: 1,
alignSelf: 'flex-end',
alignItems: 'center',
},
modalContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
modalText: {
fontSize: 20,
fontWeight: 'bold',
marginBottom: 10,
},
input: {
height: 40,
width: '80%',
borderColor: 'gray',
borderWidth: 1,
 marginBottom: 20,
paddingLeft: 10,
},
});
export default TakePicture;

ViewPicture Component
import React, { useState, useEffect } from 'react';
import { Image, View, Text, StyleSheet, TouchableOpacity, FlatList, Button }
from 'react-native';
import { getDocs, collection } from 'firebase/firestore';
import db from '../../configFirebase';

function ViewPicture() {
const [imageDataList, setImageDataList] = useState([]);
const [selectedName, setSelectedName] = useState(null);

useEffect(() => {
const fetchImageData = async () => {
try {
const imageCollection = collection(db, 'images');
const snapshot = await getDocs(imageCollection);

const imageList = snapshot.docs.map((doc) => doc.data());

setImageDataList(imageList);
} catch (error) {
console.error('Error fetching image data:', error);
}
};

fetchImageData();
}, []);

const handleNameClick = (name) => {

setSelectedName(name);
};

const handleHideImage = () => {

setSelectedName(null);
};

const renderItem = ({ item }) => (

<TouchableOpacity onPress={() => handleNameClick(item.name)}>
<View style={styles.itemContainer}>
<Text style={styles.text}>{item.name}</Text>
{selectedName === item.name && (
<View style={styles.imageContainer}>
 <Text style={styles.text}>Selected Image:
{item.name}</Text>
<Image source={{ uri: item.url }}
style={styles.image} />
<Button title="Hide Image" onPress={handleHideImage}
/>
</View>
)}
</View>
</TouchableOpacity>
);

return (
<View style={styles.container}>
<FlatList
data={imageDataList}
keyExtractor={(item) => item.name}
renderItem={renderItem}
/>
</View>
);
}

const styles = StyleSheet.create({

container: {
flex: 1,
justifyContent: 'center',
padding: 10,
},
itemContainer: {
padding: 10,
borderBottomWidth: 1,
borderBottomColor: '#ccc',
},
text: {
fontSize: 16,
fontWeight: 'bold',
},
imageContainer: {
marginTop: 20,
alignItems: 'center',
},
image: {
width: 200,
height: 200,
marginTop: 10,
},
});
export default ViewPicture;

Outputs