1
1
import { StatusBar } from 'expo-status-bar' ;
2
- import React , { useState , useCallback } from 'react' ;
2
+ import React , { useState , useEffect } from 'react' ;
3
3
import {
4
4
StyleSheet ,
5
5
Text ,
6
- TextInput ,
7
6
View ,
8
- ScrollView ,
9
7
SafeAreaView ,
10
- RefreshControl ,
11
8
Button ,
12
- Image ,
13
- TouchableOpacity ,
14
9
TouchableHighlight ,
15
10
Alert ,
16
- BackHandler ,
17
- Platform ,
18
- Dimensions ,
11
+ StatusBar as RnStatusBar ,
19
12
} from 'react-native' ;
20
- import { useDeviceOrientation } from '@react-native-community/hooks' ;
21
13
import * as LocalAuthentication from 'expo-local-authentication' ;
22
14
23
- const wait = ( timeout ) => {
24
- return new Promise ( ( resolve ) => setTimeout ( resolve , timeout ) ) ;
25
- } ;
26
-
27
15
export default function App ( ) {
28
- const [ refreshing , setRefreshing ] = useState ( false ) ;
29
- const { portrait, landscape } = useDeviceOrientation ( ) ;
30
-
31
- const onRefresh = useCallback ( ( ) => {
32
- setRefreshing ( true ) ;
33
- wait ( 2000 ) . then ( ( ) => setRefreshing ( false ) ) ;
34
- } , [ ] ) ;
16
+ const [ isBiometricSupported , setIsBiometricSupported ] = useState ( false ) ;
35
17
36
- const onPressLearnMore = ( ) => {
37
- alert ( 'Learn More Pressed' , Dimensions . get ( 'screen' ) ) ;
38
- } ;
18
+ // Check if hardware supports biometrics
19
+ useEffect ( ( ) => {
20
+ ( async ( ) => {
21
+ const compatible = await LocalAuthentication . hasHardwareAsync ( ) ;
22
+ setIsBiometricSupported ( compatible ) ;
23
+ } ) ( ) ;
24
+ } ) ;
39
25
40
26
const fallBackToDefaultAuth = ( ) => {
41
27
console . log ( 'fall back to password authentication' ) ;
@@ -72,22 +58,13 @@ export default function App() {
72
58
const savedBiometrics = await LocalAuthentication . isEnrolledAsync ( ) ;
73
59
if ( ! savedBiometrics )
74
60
return alertComponent (
75
- 'Biometric not registered ' ,
61
+ 'Biometric record not found ' ,
76
62
'Please login with your password' ,
77
63
'OK' ,
78
64
( ) => fallBackToDefaultAuth ( )
79
65
) ;
80
66
81
- // promptMessage?: string;
82
- // cancelLabel?: string;
83
- // disableDeviceFallback?: boolean;
84
- // fallbackLabel ?: string;
85
-
86
67
// Authenticate use with Biometrics (Fingerprint, Facial recognition, Iris recognition)
87
- let promptMessage ;
88
- supportedBiometrics === 1
89
- ? ( promptMessage = 'Please touch sensor when ready' )
90
- : 'Use face recognition' ;
91
68
92
69
const biometricAuth = await LocalAuthentication . authenticateAsync ( {
93
70
promptMessage : 'Login with Biometrics' ,
@@ -102,100 +79,38 @@ export default function App() {
102
79
console . log ( { savedBiometrics } ) ;
103
80
console . log ( { biometricAuth } ) ;
104
81
} ;
105
-
106
82
return (
107
- < SafeAreaView style = { styles . container } >
108
- < ScrollView
109
- contentContainerStyle = { styles . scrollView }
110
- refreshControl = {
111
- < RefreshControl refreshing = { refreshing } onRefresh = { onRefresh } />
112
- }
113
- >
114
- < View style = { styles . container } >
115
- { /* <Text
116
- accessibilityLabel="Welcome note"
117
- numberOfLines={1}
118
- onLongPress={() => alert('Text pressed')}
119
- >
120
- Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde
121
- perspiciatis nobis non voluptatibus tenetur fuga magni accusamus.
122
- Atque minima laboriosam
123
- </Text>
124
- <TouchableOpacity onPress={() => alert('Image pressed')}>
125
- <Image
126
- resizeMode="contain"
127
- loadingIndicatorSource={require('./assets/adaptive-icon.png')}
128
- fadeDuration={1299}
129
- source={{
130
- width: 200,
131
- height: 200,
132
- uri: 'https://picsum.photos/200',
133
- }}
134
- />
135
- </TouchableOpacity>
136
- <TouchableHighlight
137
- underlayColor="white"
138
- onPress={() => alert('Image pressed')}
139
- >
140
- <Image
141
- resizeMode="contain"
142
- loadingIndicatorSource={require('./assets/adaptive-icon.png')}
143
- fadeDuration={1299}
144
- source={{
145
- width: 200,
146
- height: 200,
147
- uri: 'https://picsum.photos/200',
148
- }}
149
- />
150
- </TouchableHighlight>
151
- <TextInput style={styles.textInput} placeholder="Type here" />
152
- <Button
153
- onPress={onPressLearnMore}
154
- title="Learn More"
155
- color="#841584"
156
- accessibilityLabel="Learn more about this purple button"
157
- />
158
- <Button
159
- title="Press me"
160
- onPress={() =>
161
- Alert.alert('Simple Button pressed', 'Hello', [
162
- {
163
- text: 'Cancel',
164
- },
165
- {
166
- text: 'OK',
167
- onPress: () => BackHandler.exitApp(),
168
- },
169
- ])
170
- }
171
- />
172
- <Text>ipsum dolor, sit amet consectetu</Text>
173
- <View
174
- style={{ backgroundColor: 'dodgerblue', width: '50%', height: 70 }}
175
- ></View> */ }
83
+ < SafeAreaView >
84
+ < View style = { styles . container } >
85
+ < Text >
86
+ { isBiometricSupported
87
+ ? 'Your device is compatible with Biometrics'
88
+ : 'Face or Fingerprint scanner is available on this device' }
89
+ </ Text >
90
+
91
+ < TouchableHighlight
92
+ style = { {
93
+ height : 60 ,
94
+ } }
95
+ >
176
96
< Button
177
97
title = "Login with Biometrics"
178
- color = "#000 "
98
+ color = "#fe7005 "
179
99
onPress = { handleBiometricAuth }
180
100
/>
181
- < StatusBar style = "auto" />
182
- </ View >
183
- </ ScrollView >
101
+ </ TouchableHighlight >
102
+
103
+ < StatusBar style = "auto" />
104
+ </ View >
184
105
</ SafeAreaView >
185
106
) ;
186
107
}
187
108
188
109
const styles = StyleSheet . create ( {
189
- scrollView : {
190
- flex : 1 ,
191
- alignItems : 'center' ,
192
- justifyContent : 'center' ,
193
- } ,
194
110
container : {
111
+ paddingTop : RnStatusBar . currentHeight ,
195
112
flex : 1 ,
196
- backgroundColor : '#eee' ,
197
- alignItems : 'center' ,
198
- justifyContent : 'center' ,
113
+ paddingLeft : 20 ,
114
+ paddingRight : 20 ,
199
115
} ,
200
- textInput : { } ,
201
116
} ) ;
0 commit comments