-
Notifications
You must be signed in to change notification settings - Fork 0
/
QrPage.js
108 lines (105 loc) · 3.11 KB
/
QrPage.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
import React ,{ Component } from 'react'
import {View ,Text,TextInput,Button,StyleSheet ,Alert ,TouchableHighlight} from 'react-native'
import { RNCamera } from 'react-native-camera';
import firebase from 'react-native-firebase'
import db from './Firebase';
export default class QrPage extends Component {
constructor() {
super();
this.ref = db.firestore().collection('ans');
}
state = {
student: null,
response: "",
}
// read the user answer
updateTextInput = (text, field) => {
const state = this.state
state[field] = text;
this.setState(state);
}
//lifecycle func to fetch data
componentDidMount() {
const state = this.state
state['student'] = firebase.auth()
//const { student } = firebase.auth()
console.log(state.student._user.email)
this.setState(state)
}
//Trigger to Send data to firebase
saveAns() {
this.ref.add({
student: this.state.student._user.email ,
response: this.state.response,
})
.catch((error) => {
console.error("Error adding document: ", error);
});
}
// QR Code Detection
barcodeRecognized = ({ barcodes }) => {
barcodes.forEach(barcode => Alert.alert('Question',barcode.data) )
};
render(){
return (
<View style={{flex:1}}>
<View style={{flex:4}}>
<RNCamera
ref={ref => {this.camera = ref; }}
style={{ height:'100%',width:'100%' }}
onGoogleVisionBarcodesDetected={this.barcodeRecognized}>
</RNCamera>
</View>
<View style={{flex:2}}>
<TextInput
ref={input=>{this.answre = input}}
multiline={true}
placeholder=" Answer.. "
style = {styles.textInput}
value = {this.state.response}
onChangeText={(text) => this.updateTextInput(text, 'response')}
/>
<TouchableHighlight
style={styles.submit}
onPress={() =>{
if (this.state.response == '') {
Alert.alert('Warn','Answer Sould Not be Empty')}
else{
Alert.alert('Thank you ','Your Answer Have Been Sent')
this.saveAns()
this.answre.clear()
}
}
}
>
<Text style={styles.submitText}>SUBMIT</Text>
</TouchableHighlight>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
textInput: {
backgroundColor:'white',
borderColor :'grey',
borderWidth:1,
height:40,
width:'100%',
marginTop: 25,
borderRadius:8,
},
submit:{
marginTop:8,
width:'100%',
backgroundColor:'#8e44ad',
borderRadius:8,
padding:10,
borderWidth: 1,
borderColor: '#fff'
},
submitText:{
color:'#fff',
textAlign:'center',
}
})