-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
18 changed files
with
18,949 additions
and
39 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| # Example Usage | ||
|
|
||
| The reCAPTCHA component is implemented in such a way that it stretches to the full available width and height by default. Users are expected to implement their own modal window for displaying the reCAPTCHA challenge. | ||
|
|
||
| ## Implementation | ||
|
|
||
| To see an example implementation of how to use `react-native-google-recaptcha-provider`, you can refer to the `ModalExample.tsx`. This file demonstrates how to integrate the reCAPTCHA component within a modal window. | ||
|
|
||
|
|
||
| ## Screenshots | ||
|
|
||
| <img src="../screenshot/1.png" alt="1" width="300"/> | ||
| <img src="../screenshot/2.png" alt="1" width="300"/> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -17,6 +17,7 @@ module.exports = function (api) { | |
| }, | ||
| }, | ||
| ], | ||
| ['module:react-native-dotenv'], | ||
| ], | ||
| }; | ||
| }; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,31 +1,42 @@ | ||
| import * as React from 'react'; | ||
| import React, { useState } from 'react'; | ||
|
|
||
| import { StyleSheet, View, Text } from 'react-native'; | ||
| import { multiply } from 'react-native-google-recaptcha-provider'; | ||
| import { StyleSheet, Button, Alert } from 'react-native'; | ||
| import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context'; | ||
| import { RecaptchaModal } from './ModalExample'; | ||
|
|
||
| export default function App() { | ||
| const [result, setResult] = React.useState<number | undefined>(); | ||
|
|
||
| React.useEffect(() => { | ||
| multiply(3, 7).then(setResult); | ||
| }, []); | ||
| export default function Root() { | ||
| return ( | ||
| <SafeAreaProvider style={styles.root}> | ||
| <App /> | ||
| </SafeAreaProvider> | ||
| ); | ||
| } | ||
|
|
||
| function App() { | ||
| const [modalIsVisible, setModalIsVisible] = useState(false); | ||
| return ( | ||
| <View style={styles.container}> | ||
| <Text>Result: {result}</Text> | ||
| </View> | ||
| <SafeAreaView style={styles.container}> | ||
| <Button title="Open modal" onPress={() => setModalIsVisible(true)} /> | ||
| {modalIsVisible && ( | ||
| <RecaptchaModal | ||
| onClose={() => setModalIsVisible(false)} | ||
| onVerify={(_) => { | ||
| setModalIsVisible(false); | ||
| Alert.alert('Token', _); | ||
| }} | ||
| /> | ||
| )} | ||
| </SafeAreaView> | ||
| ); | ||
| } | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| root: { | ||
| flex: 1, | ||
| }, | ||
| container: { | ||
| flex: 1, | ||
| alignItems: 'center', | ||
| justifyContent: 'center', | ||
| }, | ||
| box: { | ||
| width: 60, | ||
| height: 60, | ||
| marginVertical: 20, | ||
| alignItems: 'center', | ||
| }, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| import type { RecaptchaProps } from 'react-native-google-recaptcha-provider'; | ||
| import { useSafeAreaInsets } from 'react-native-safe-area-context'; | ||
| import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'; | ||
| import React from 'react'; | ||
| import { RecaptchaProvider } from './RecaptchaProvider'; | ||
|
|
||
| type RecaptchaModalProps = Pick<RecaptchaProps, 'onVerify' | 'onClose'> & {}; | ||
| export const RecaptchaModal = (props: RecaptchaModalProps) => { | ||
| const insets = useSafeAreaInsets(); | ||
| const recaptchaTop = insets.top + CLOSE_SIZE; | ||
| return ( | ||
| <View style={styles.modal}> | ||
| <RecaptchaProvider | ||
| style={{ top: recaptchaTop, bottom: insets.bottom }} | ||
| {...props} | ||
| /> | ||
| <TouchableOpacity | ||
| hitSlop={10} | ||
| onPress={props.onClose} | ||
| style={[styles.close, { marginTop: insets.top }]} | ||
| > | ||
| <Text style={styles.closeText}>×</Text> | ||
| </TouchableOpacity> | ||
| </View> | ||
| ); | ||
| }; | ||
|
|
||
| const CLOSE_SIZE = 50; | ||
| const styles = StyleSheet.create({ | ||
| modal: { | ||
| ...StyleSheet.absoluteFillObject, | ||
| backgroundColor: 'rgba(0, 0, 0, 0.5)', | ||
| }, | ||
| close: { | ||
| justifyContent: 'center', | ||
| alignItems: 'center', | ||
| height: CLOSE_SIZE, | ||
| width: CLOSE_SIZE, | ||
| marginLeft: 'auto', | ||
| marginRight: 20, | ||
| borderRadius: 25, | ||
| backgroundColor: '#ffffff', | ||
| }, | ||
| closeText: { | ||
| fontSize: 24, | ||
| }, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| import { | ||
| Recaptcha, | ||
| type RecaptchaProps, | ||
| } from 'react-native-google-recaptcha-provider'; | ||
| import React from 'react'; | ||
| import { BASE_URL, SITE_KEY } from '@env'; | ||
|
|
||
| export const RecaptchaProvider = ( | ||
| props: Omit<RecaptchaProps, 'siteKey' | 'baseUrl'> | ||
| ) => { | ||
| return ( | ||
| <Recaptcha lang="en" siteKey={SITE_KEY} baseUrl={BASE_URL} {...props} /> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| { | ||
| "extends": "../tsconfig", | ||
| "compilerOptions": { | ||
| // Avoid expo-cli auto-generating a tsconfig | ||
| "typeRoots": ["./types"] | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| declare module '@env' { | ||
| export const SITE_KEY: string; | ||
| export const BASE_URL: string; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.