fix-style

[L0NG4R3S]

Hello!

There is a problem with your style prop, it is not being passed through to your Hcaptcha component. I don't have permission to create a pull request, but I have forked the repository and fixed the problem.

I want to use your library in my project, but this style problem is getting in the way, can you guys fix it? I'm uploading the correction.

[zoryana94]

Hi @L0NG4R3S! What is your use case, is there anything specific you would like to achieve with passing the style prop? If yes, have you tested that it would work as expected?

And thank you a lot for creating the PR! 👍

[L0NG4R3S]

Well, my problem is that when I don't have a good internet connection, it takes a while for the HCaptcha component to disappear on its own. I need a cancel button in case my users get anxious (which they usually do). My goal with the style property was to make the component smaller and place a cancel button at the bottom, but it may not work with the way components are structured.

But I found a new solution, if I can pass a footer component I can make this cancel button.

I've updated my pull request. If you guys approve it, I will pass my footer component like that: <ConfirmHcaptcha ref={(ref) => { hCaptcha.current = ref; }} siteKey="38907250-4e73-4780-8633-388f6dc872b2" baseUrl="http://mySite.com" languageCode="en" onMessage={onMessage} size="invisible" footerComponent={ <CancelButton testID="recapcthaCancelButton" onPress={() => hCaptcha?.current?.hide()}> <CancelButtonText>{t('cancel')}</CancelButtonText> </CancelButton> } />

And it will look like that on my screen, here you guys can see the calcel button at the bottom:

When the user press the button, the HCaptcha component will hide

[brdlyptrs]

Hi @L0NG4R3S, by default if the user clicks outside of the challenge area the interface should close automatically, see code. Alternatively, you can programmatically trigger the modal to close by calling its exposed .hide() method or updating the prop show to be false.

[L0NG4R3S]

I don't think clicking outside to close works when there is a bad internet connection. When we have a bad connection the HCaptcha modal doesn't open and it also doesn't close when we click, that's why we need a cancel button:

https://github.com/hCaptcha/react-native-hcaptcha/assets/50929420/937b644d-90df-48ed-b8a8-281a12f251ea

Also with a footer component, I could do my loading status, because as seen in the video it isn't working very well. It stops loading but the HCaptcha component doesn't open up: