expo: FirebaseRecaptchaVerifierModal attemptInvisibleVerification Crashes on Android Emulator

@Tj3n I am still having issues with real android devices. The bug is most likely related to WebView, but I’m going to hold off on invisible reCaptcha until it’s officially fixed.

The bug IS related to WebView, specifically to Hardware Acceleration, at our company we managed to bypass this issue using the property androidHardwareAccelerationDisabled at the component. The problem: https://stackoverflow.com/questions/56553663/react-native-null-pointer-dereference-after-navigating-to-from-a-page-containi . As FirebaseRecaptchaVerifierModal uses FirebaseRecaptcha, WebView is used, the error can be resolved by using the androidHardwareAccelerationDisabled.

Example:

<FirebaseRecaptchaVerifierModal
  ref={recaptchaVerifierRef}
  firebaseConfig={firebaseConfig}
  androidHardwareAccelerationDisabled
  attemptInvisibleVerification
/>

The “solution” to this problem was only possible thanks to @rodrigorm.

😍😍 ** FIX FOR EXPO 45, 46 ** 😍😍

After Surfing through the internet for answers, i failed and din’t find anything to make it work on Expo 45 and Expo 46, finally took it to my hands because We can’t ship an app with manual recaptcha as it is very bad UX. So after trying every possible prop in the FirebaseRecaptchaVerifierModal, I FINALLY FOUND THE WORKING FIX

By Combining all the fixes and adding one of my own found, I finally can rest in peace as this is now working 😍

// Declare the Timeout for Initial Page Load Fix
  const [isInit, setisInit] = useState(false)
  useEffect(() => {
    setTimeout(function () {
      setisInit(true)
    }, 1000)
    return () => {
      setisInit(false)
    }
  }, [])

return(
<View>
...
        {isInit && (
          <FirebaseRecaptchaVerifierModal
            ref={recaptchaVerifier}
            firebaseConfig={app.options}
            androidHardwareAccelerationDisabled={true}
            androidLayerType="software"
            attemptInvisibleVerification
          />
        )}
...

      <FirebaseRecaptchaBanner />
</View>

This was the magical line

 androidLayerType="software"

I Hope Expo Updates there Documentation and avoid this painful experience for all of us Developers, I mean I literally never have seen an app with manual Recaptcha until im spamming

Any updates for Expo 45 ?

i confirm this is an issue, any updates on this ?

Same here guys setting attemptInvisibleVerification={true} crashes my app when i press the back button or try to navigate between screens .

@Tj3n I am still having issues with real android devices. The bug is most likely related to WebView, but I’m going to hold off on invisible reCaptcha until it’s officially fixed.

The bug IS related to WebView, specifically to Hardware Acceleration, at our company we managed to bypass this issue using the property androidHardwareAccelerationDisabled at the component. The problem: https://stackoverflow.com/questions/56553663/react-native-null-pointer-dereference-after-navigating-to-from-a-page-containi . As FirebaseRecaptchaVerifierModal uses FirebaseRecaptcha, WebView is used, the error can be resolved by using the androidHardwareAccelerationDisabled.

Example:

<FirebaseRecaptchaVerifierModal
  ref={recaptchaVerifierRef}
  firebaseConfig={firebaseConfig}
  androidHardwareAccelerationDisabled
  attemptInvisibleVerification
/>

The “solution” to this problem was only possible thanks to @rodrigorm.

That worked for me on expo v44, but as soon as I updated to v45 it stopped working. I could not figure out why

@hhananda Quite simple really, please try this to see if it works.

const [isInit, setisInit] = useState(false)
useEffect(() => {
    setTimeout(function () {
      setisInit(true)
    }, 1000)
  }, [])

// In render:
{isInit && (
        <FirebaseRecaptchaVerifierModal
          ref={recaptchaVerifier}
          firebaseConfig={firebaseConfig}
          attemptInvisibleVerification={attemptInvisibleVerification}
          appVerificationDisabledForTesting={__DEV__}
        />
      )}

@Tj3n I am still having issues with real android devices. The bug is most likely related to WebView, but I’m going to hold off on invisible reCaptcha until it’s officially fixed.

The bug IS related to WebView, specifically to Hardware Acceleration, at our company we managed to bypass this issue using the property androidHardwareAccelerationDisabled at the component. The problem: https://stackoverflow.com/questions/56553663/react-native-null-pointer-dereference-after-navigating-to-from-a-page-containi . As FirebaseRecaptchaVerifierModal uses FirebaseRecaptcha, WebView is used, the error can be resolved by using the androidHardwareAccelerationDisabled. Example:

<FirebaseRecaptchaVerifierModal
  ref={recaptchaVerifierRef}
  firebaseConfig={firebaseConfig}
  androidHardwareAccelerationDisabled
  attemptInvisibleVerification
/>

The “solution” to this problem was only possible thanks to @rodrigorm.

That worked for me on expo v44, but as soon as I updated to v45 it stopped working. I could not figure out why

holy shit yes! it is working on the app built with expo v44 but not in the v45 one 😕

You dont need to eject you project, just follow this guide to setup Firebase for Expo: https://docs.expo.dev/guides/using-firebase/

And continue using EAS.

@Tj3n I am still having issues with real android devices. The bug is most likely related to WebView, but I’m going to hold off on invisible reCaptcha until it’s officially fixed.

The bug IS related to WebView, specifically to Hardware Acceleration, at our company we managed to bypass this issue using the property androidHardwareAccelerationDisabled at the component. The problem: https://stackoverflow.com/questions/56553663/react-native-null-pointer-dereference-after-navigating-to-from-a-page-containi . As FirebaseRecaptchaVerifierModal uses FirebaseRecaptcha, WebView is used, the error can be resolved by using the androidHardwareAccelerationDisabled.

Example:

<FirebaseRecaptchaVerifierModal
  ref={recaptchaVerifierRef}
  firebaseConfig={firebaseConfig}
  androidHardwareAccelerationDisabled
  attemptInvisibleVerification
/>

The “solution” to this problem was only possible thanks to @rodrigorm.

You sir, are a lifesaver. How do I kiss someone through internet?

Same here guys setting attemptInvisibleVerification={true} crashes my app when i press the back button or try to navigate between screens .