-
Notifications
You must be signed in to change notification settings - Fork 376
/
QRReader.js
85 lines (75 loc) · 2.48 KB
/
QRReader.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
import React, { PureComponent } from 'react'
import { View, Text, Button, NativeModules, Platform } from 'react-native'
import { withNamespaces } from 'react-i18next'
import QRCodeScanner from 'react-native-qrcode-scanner'
import Permissions from 'react-native-permissions'
import colors from '../../constants/colors'
export const permissionsStatus = {
notDetermined: 'undetermined',
denied: 'denied',
authorized: 'authorized',
restricted: 'restricted',
}
const { CoreModule } = NativeModules
class QRReader extends PureComponent {
constructor (props) {
super(props)
this.state = {
permStatus: permissionsStatus.notDetermined,
onPress: () => {},
}
}
componentWillMount () {
Permissions.check('camera').then(this.setStatus)
}
setStatus = (permStatus) => {
const onPress = Platform.OS === 'ios' && permStatus === permissionsStatus.denied
? () => CoreModule.openSettings()
: () => Permissions.request('camera').then(this.setStatus)
this.setState({ permStatus, onPress })
}
reactivate () {
this.scanner.reactivate()
}
render () {
const { t, onFound, style, cameraStyle } = this.props
const { permStatus, onPress } = this.state
return permStatus === permissionsStatus.authorized ? (
<QRCodeScanner
onRead={event => onFound(event.data)}
onError={error => {
console.error(error)
}}
cameraProps={{ captureAudio: false }}
ref={(scanner) => { this.scanner = scanner }}
containerStyle={style}
topViewStyle={{
width: 0,
height: 0,
}}
bottomViewStyle={{
width: 0,
height: 0,
}}
cameraStyle={cameraStyle || {}}
fadeIn={false}
showMarker
/>
) : (
<View style={{ flexDirection: 'column' }}>
<View style={{ flexGrow: 1, flexDirection: 'row', alignSelf: 'center', marginBottom: 10, alignItems: 'flex-end' }}>
<Text style={{ fontSize: 24, color: colors.white }}>
{t('contacts.add.qrcode-camera-ask-title')}
</Text>
</View>
<Text style={{ flexGrow: 0, fontSize: 18, textAlign: 'center', marginRight: 10, marginLeft: 10, color: colors.lightGrey }}>
{t('contacts.add.qrcode-camera-ask-text')}
</Text>
<View style={{ flexGrow: 1 }}>
<Button onPress={onPress} title={t('contacts.add.qrcode-camera-ask-button')} />
</View>
</View>
)
}
}
export default withNamespaces()(QRReader)