I'm working on implementing a reCaptcha validator for a login screen on a react-native app which has to work both on web and mobile environments.
As I'm fairly new as a programmer and have little experience on react-native I'm aware that I may have missed something very basic/obvious which is why I've decided to ask this, even though this question has already been asked a couple of times before.
I'm trying this library since it is the most popular one on NPMjs.
On the login screen page I'm calling the component<RecaptchaComponent/>
and this is the code I have so far within the component.
import React, { useRef } from 'react';import { View, Button } from 'react-native';import Recaptcha, { RecaptchaHandles } from "react-native-recaptcha-that-works";export const Recaptcha_Component = () => { let url = "mySiteUrl"; let key = "publicKey"; const recaptcha: any = useRef<RecaptchaHandles>(); const send = () => { console.log('send!'); recaptcha.current?.open(); }; const onVerify = (token: string) => { console.log('success!', token); }; const onExpire = () => { console.warn('expired!'); } return (<View><Recaptcha ref={recaptcha} siteKey={key} baseUrl={url} onVerify={onVerify} onExpire={onExpire} size={"invisible"} /><Button title="Send" onPress={send} /></View > )}
When I press the Send button in the app I see an small loading indicator but nothing happens after that. On the console I see this warning message.