Invisible captcha not rendered properly on iOS about react-native-recaptcha HOT 10 OPEN

I'm guessing if you want it to be visible you need the reCaptchaType to be reCaptchaType={2}

They types are export const type = Object.freeze({"invisible": 1, "normal": 2});

from react-native-recaptcha.

Technically I don't want it to be visible, but this is what I get when I render it with the type reCaptchaType=1. On android it seems to be working normally. The invisible captcha is supposed to actually be completely invisible, with no rendering on screen at all?

I'm new to reCaptcha so I might have mistaken somehow.

from react-native-recaptcha.

Ah got you, what if you remove the containerStyle that's setting the width and height?

from react-native-recaptcha.

The default values for the containerStyle are height: 100% and width:100%, so the values I've assigned do not actually have an impact to the way it's rendered here. On android it seems to be rendering just normally, as in the captcha actually being 80px hight with wider width.

I'd think it's some kind of a bug with iOS webview

from react-native-recaptcha.

The invisible captcha is supposed to actually be completely invisible, with no rendering on screen at all?

I'm new to it too, but that's my understanding with V3, it just works in the background and gives you a score for the user.

from react-native-recaptcha.

how do we execute the recaptcha like on button click or something ??

from react-native-recaptcha.

@acsant please assist

from react-native-recaptcha.

@kingeke

how do we execute the recaptcha like on button click or something ??

You can achieve that the following way:

The below example code is not tested but the idea is the following

When the button is clicked the captcha is loaded and once the token is received the actual process that requires the captcha is started.

class Example extends Component {
  constructor(props) {
    super(props)
    this.state = {
      loadCaptcha: false
    }
  }

 handlePress = () => {
   this.setState({ loadCaptcha: true })
 }

handleReCaptchaExecute = (captcha) => {
  this.setState({ loadCaptcha: false });

  // Do whatever you want to do with the captcha
}

 render() {
   const { loadCaptcha } = this.state;
    const captchaComponent = (
      <View style={{ width: '100%', height: 0 }}>
        <ReCaptcha
          siteKey="SITEKEYHERE"
          url="URLHERE"
          action="verify"
          reCaptchaType={1} // invisible
          onExecute={this.handleReCaptchaExecute}
        />
      </View>
    );

    return (
      {loadCaptcha && captchaComponent}
      <Button
        title="Press me"
        color="#f194ff"
        onPress={this.handlePress}
      />
    )
  }

}

export default Example;

from react-native-recaptcha.

@gusoskar @lbudakov @kingeke @Jedidiah Is anyone able to get the token?

from react-native-recaptcha.