Invisible captcha not rendered properly on iOS

[gusoskar]

The captcha is not being rendered properly. It's super small, even though the container is 100% width and 80px high.

<View style={{ width: '100%', height: 80, borderWidth: 1}}>
 <ReCaptcha
    onReady={() => console.log("Captcha is ready")}
    siteKey={site_key}
    url={url}
    action={'verify'}
    reCaptchaType={1} //invisible
    containerStyle={{ height: '100%', width: '100%', marginButton: 0 }}
    onExecute={this.captureResponseToken.bind(this)}
   />
</View>

[Jedidiah]

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});

[gusoskar]

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.

[Jedidiah]

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

[gusoskar]

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

[Jedidiah]

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.

[kingeke]

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

[kingeke]

@acsant please assist

[lbudakov]

@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;

[BajajSaajan]

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

[amitkumarcoding]

Use this library

https://www.npmjs.com/package/react-native-secure-captcha-v3