forked from douglasjunior/react-native-recaptcha-that-works
/
App.js
77 lines (68 loc) · 1.83 KB
/
App.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
import React, {useRef, useCallback, useState} from 'react';
import {
SafeAreaView,
StyleSheet,
View,
Text,
StatusBar,
Button,
} from 'react-native';
import {Colors} from 'react-native/Libraries/NewAppScreen';
import Recaptcha from 'react-native-recaptcha-that-works';
const styles = StyleSheet.create({
safeArea: {
flex: 1,
},
container: {
backgroundColor: Colors.lighter,
justifyContent: 'center',
alignItems: 'center',
flex: 1,
},
});
const App = () => {
const size = 'invisible';
const [key, setKey] = useState('<none>');
const $recaptcha = useRef();
const handleOpenPress = useCallback(() => {
$recaptcha.current.open();
}, []);
const handleClosePress = useCallback(() => {
$recaptcha.current.close();
}, []);
return (
<SafeAreaView style={styles.safeArea}>
<StatusBar barStyle="dark-content" />
<View contentInsetAdjustmentBehavior="automatic" style={styles.container}>
<Button onPress={handleOpenPress} title="Open" />
<Text>Token: {key}</Text>
<Text>Size: {size}</Text>
</View>
<Recaptcha
ref={$recaptcha}
lang="pt"
headerComponent={
<Button title="Close modal" onPress={handleClosePress} />
}
footerComponent={<Text>Footer here</Text>}
siteKey="6LejsqwZAAAAAGsmSDWH5g09dOyNoGMcanBllKPF"
baseUrl="http://127.0.0.1"
size={size}
theme="dark"
onLoad={() => alert('onLoad event')}
onClose={() => alert('onClose event')}
onError={(err) => {
alert('onError event');
console.warn(err);
}}
onExpire={() => alert('onExpire event')}
onVerify={(token) => {
alert('onVerify event');
setKey(token);
}}
enterprise
/>
</SafeAreaView>
);
};
export default App;