Recaptcha not open webView on iOS #65

KarinaOleynik · 2024-11-11T11:17:17Z

I upgraded React Native to the latest version and Recaptcha not working on iOS anymore. It's start loading but not open the Recaptcha.

"react-native": "0.76.0"
"react": "18.3.1"
"react-native-webview": "^13.12.3"
"react-native-recaptcha-that-works": "^2.0.0"
only on iOS, on Android everything works
the problem happened after RN upgrading, with 0.73 - works good

KarinaOleynik · 2024-11-14T08:04:38Z

Still not working, WebView is rendering but <script> tag not running in WebView

KarinaOleynik · 2024-11-14T20:17:58Z

Changed react-native-webview to https://github.com/birdofpreyru/react-native-webview and it's helped me

douglasjunior · 2024-11-25T18:07:54Z

Hello everyone, thank you for your reports. I can't review this yet, but it is on my radar.

DavidHuertasF · 2024-11-25T18:39:04Z

Changed react-native-webview to https://github.com/birdofpreyru/react-native-webview and it's helped me

Can you share me please your package.json? I cant fix it.

"dependencies": {
"react-native-webview": "npm:@dr.pogodin/react-native-webview@13.14.0",
"@expo/vector-icons": "^14.0.2",
"@react-native-async-storage/async-storage": "1.23.1",
"@react-navigation/bottom-tabs": "^7.0.0",
"@react-navigation/native": "^7.0.0",
"axios": "^1.7.7",
"expo": "~52.0.7",
"expo-blur": "~14.0.1",
"expo-constants": "~17.0.3",
"expo-dev-client": "~5.0.4",
"expo-font": "~13.0.1",
"expo-haptics": "~14.0.0",
"expo-linking": "~7.0.0",
"expo-router": "~4.0.7",
"expo-secure-store": "~14.0.0",
"expo-splash-screen": "~0.29.11",
"expo-status-bar": "~2.0.0",
"expo-symbols": "~0.2.0",
"expo-system-ui": "~4.0.3",
"expo-web-browser": "~14.0.1",
"react": "18.3.1",
"react-dom": "18.3.1",
"react-native": "0.76.2",
"react-native-gesture-handler": "~2.20.2",
"react-native-paper": "^5.12.5",
"react-native-reanimated": "~3.16.1",
"react-native-recaptcha-that-works": "^2.0.0",
"react-native-safe-area-context": "4.12.0",
"react-native-screens": "~4.1.0",
"react-native-web": "~0.19.13"
},
"devDependencies": {
"@babel/core": "^7.25.2",
"@types/jest": "^29.5.12",
"@types/react": "~18.3.12",
"@types/react-test-renderer": "^18.3.0",
"jest": "^29.2.1",
"jest-expo": "~52.0.2",
"react-test-renderer": "18.3.1",
"typescript": "^5.3.3"
},

KarinaOleynik · 2024-11-25T19:10:02Z

Changed react-native-webview to https://github.com/birdofpreyru/react-native-webview and it's helped me

Can you share me please your package.json? I cant fix it.

"dependencies": { "react-native-webview": "npm:@dr.pogodin/react-native-webview@13.14.0", "@expo/vector-icons": "^14.0.2", "@react-native-async-storage/async-storage": "1.23.1", "@react-navigation/bottom-tabs": "^7.0.0", "@react-navigation/native": "^7.0.0", "axios": "^1.7.7", "expo": "~52.0.7", "expo-blur": "~14.0.1", "expo-constants": "~17.0.3", "expo-dev-client": "~5.0.4", "expo-font": "~13.0.1", "expo-haptics": "~14.0.0", "expo-linking": "~7.0.0", "expo-router": "~4.0.7", "expo-secure-store": "~14.0.0", "expo-splash-screen": "~0.29.11", "expo-status-bar": "~2.0.0", "expo-symbols": "~0.2.0", "expo-system-ui": "~4.0.3", "expo-web-browser": "~14.0.1", "react": "18.3.1", "react-dom": "18.3.1", "react-native": "0.76.2", "react-native-gesture-handler": "~2.20.2", "react-native-paper": "^5.12.5", "react-native-reanimated": "~3.16.1", "react-native-recaptcha-that-works": "^2.0.0", "react-native-safe-area-context": "4.12.0", "react-native-screens": "~4.1.0", "react-native-web": "~0.19.13" }, "devDependencies": { "@babel/core": "^7.25.2", "@types/jest": "^29.5.12", "@types/react": "~18.3.12", "@types/react-test-renderer": "^18.3.0", "jest": "^29.2.1", "jest-expo": "~52.0.2", "react-test-renderer": "18.3.1", "typescript": "^5.3.3" },

I copied the implementation and just added it to my code as a separate component, replacing the react-native-webview lib. Otherwise, you need to change the package.json in the library itself, not your own json

douglasjunior · 2024-11-25T19:25:19Z

@DavidHuertasF Try something like that:

"dependencies:" {
      "react-native-webview": "npm:@dr.pogodin/react-native-webview@13.14.0",
      ...
}

KarinaOleynik · 2024-11-25T19:35:55Z

@DavidHuertasF
I didn't check, but maybe if you add dependency as overrides, it will help

"dependencies": {
    ...
    "react-native-recaptcha-that-works": "^2.0.0",
    ...
 },
 "overrides": {
    "react-native-recaptcha-that-works": {
       "react-native-webview": "npm:@dr.pogodin/react-native-webview@13.14.0",
    }
  },

kinjalgajera22 · 2024-11-26T12:00:56Z

@KarinaOleynik yes its worked. Thanks.

jeancantu · 2024-11-30T22:07:01Z

I still have the same problem, and the @KarinaOleynik suggestion doesn't work for me @kinjalgajera22 how do you fix this?

kinjalgajera22 · 2024-12-02T05:38:57Z

@jeancantu you need to perfom below steps

uninstall react-native-webview
install @dr.pogodin/react-native-webview@13.14.0
update package.json as like
"dependencies": {
"react-native-webview": "npm:@dr.pogodin/react-native-webview@13.14.0",
.....
},
"overrides": {
"react-native-recaptcha-that-works": {
"react-native-webview": "npm:@dr.pogodin/react-native-webview@13.14.0"
}
},

then at android side do gradlew clean and run project
ios side pod install , clean project , run project

douglasjunior · 2024-12-02T11:12:19Z

Can you guys confirm if the problem you are seeing is related to this?

PR: react-native-webview/react-native-webview#3631

jeancantu · 2024-12-02T12:57:44Z

@kinjalgajera22 I'm still having the problem, I'm using "expo" version 52 and after I call recaptcha.current?.open(); it starts loading but doesn't call the onVerify function.

mlazari · 2024-12-02T13:02:17Z

@douglasjunior I am pretty sure it is related to that issue. I encountered it also in a recaptcha component (not this library though), and the change I did in that PR fixed it for me.

If there is anyone willing to test if that PR fixes this issue too, you can try these steps:

replace "react-native-webview": "13.12.4" with "react-native-webview": "github:react-native-webview/react-native-webview#573ce151683296f469de74fb21aa6de8c58d1dce" in your package.json file
install npm dependencies with npm install / yarn install (depending on which package manager you are using)
reinstall pods (pod install in the ios folder) or if you are using expo run npx expo prebuild
rebuild the app (e.g with npx react-native run-ios or if you are using expo with npx expo run:ios; or from Xcode)
check if this issue is fixed

mlazari · 2024-12-03T13:33:11Z

This should be fixed in version 13.12.5 of react-native-webview by this PR: react-native-webview/react-native-webview#3615

douglasjunior · 2024-12-03T13:49:16Z

Thank you very much @mlazari for your effort.

gabrielew · 2024-12-05T13:56:50Z

This should be fixed in version 13.12.5 of react-native-webview by this PR: react-native-webview/react-native-webview#3615

Even though after the publish of version 13.12.5 of react-native-webview, the webview is freeze in loading state.

I've tried override the react-native-webview with the "npm:@dr.pogodin/react-native-webview@13.14.0", but not worked too.

"dependencies": {
 ....
 "react-native-recaptcha-that-works": "^2.0.0",
 "react-native-webview": "npm:@dr.pogodin/react-native-webview@13.14.0"
  },
  "overrides": {
    "react-native-recaptcha-that-works": {
      "react-native-webview": "npm:@dr.pogodin/react-native-webview@13.14.0"
    }
 },

<Recaptcha
  ref={recaptcha}
  siteKey={process.env.EXPO_PUBLIC_RECAPTCHA_SITE_KEY}
  baseUrl={process.env.EXPO_PUBLIC_RECAPTCHA_SITE_DOMAIN}
  onVerify={onVerify}
  size="invisible"
  action={process.env.EXPO_PUBLIC_RECAPTCHA_RECOVERY_ACTION}
  loadingComponent={<Modal.Loading />}
  enterprise
  hideBadge
  lang="pt-BR"
  onExpire={() => {
    console.info("Recaptcha expired");
    recaptcha.current?.close();
  }}
  onLoad={() => {
    console.info("Recaptcha loaded");
  }}
  onError={(e) => {
    recaptcha.current?.close();
    console.error("Recaptcha error", e);
  }}
  onClose={() => console.log("Recaptcha closed")}
/>

ps: sometimes the loading state update when I change something in the code and force a fast reload.

mlazari · 2024-12-05T14:47:26Z

@gabrielew Does that happen on iOS or Android? If Android, it might be a different issue, someone reported something Android related here: react-native-webview/react-native-webview#3619

You can try to run "npm update react-native-webview" after changing in package.json where it is installed from, to ensure it is updated in package-lock.json too (I had previously an issue where it was not updating on npm install)
Also don't forget to re-install pods (expo prebuild does it for you if you're using it) and re-build the app

gabrielew · 2024-12-05T15:43:58Z

@gabrielew Does that happen on iOS or Android? If Android, it might be a different issue, someone reported something Android related here: react-native-webview/react-native-webview#3619

You can try to run "npm update react-native-webview" after changing in package.json where it is installed from, to ensure it is updated in package-lock.json too (I had previously an issue where it was not updating on npm install)

Also don't forget to re-install pods (expo prebuild does it for you if you're using it) and re-build the app

The problem was in iOS.
Only worked after delete node_modules folder, before this I deleted only package-lock.json file.

Edit: Work with lastest version of react-native-webview.

"dependencies": {
   ...
  "react-native-webview": "^13.12.5"
},
"overrides": {
  "react-native-recaptcha-that-works": {
    "react-native-webview": "^13.12.5"
  }
},

Thanks @mlazari for all support

kinjalgajera22 · 2024-12-06T05:27:45Z

@jeancantu I have fixed it in React Native CLI 0.76.1.

douglasjunior added the help wanted Extra attention is needed label Nov 25, 2024

mlazari mentioned this issue Dec 2, 2024

fix(iOS): WebView initialized with JavaScript disabled react-native-webview/react-native-webview#3631

Closed

10 tasks

douglasjunior closed this as completed Dec 3, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Recaptcha not open webView on iOS #65

Recaptcha not open webView on iOS #65

KarinaOleynik commented Nov 11, 2024

KarinaOleynik commented Nov 14, 2024

KarinaOleynik commented Nov 14, 2024

douglasjunior commented Nov 25, 2024

DavidHuertasF commented Nov 25, 2024

KarinaOleynik commented Nov 25, 2024

douglasjunior commented Nov 25, 2024 •

edited

Loading

KarinaOleynik commented Nov 25, 2024 •

edited

Loading

kinjalgajera22 commented Nov 26, 2024

jeancantu commented Nov 30, 2024

kinjalgajera22 commented Dec 2, 2024

douglasjunior commented Dec 2, 2024 •

edited

Loading

jeancantu commented Dec 2, 2024

mlazari commented Dec 2, 2024

mlazari commented Dec 3, 2024

douglasjunior commented Dec 3, 2024

gabrielew commented Dec 5, 2024 •

edited

Loading

mlazari commented Dec 5, 2024

gabrielew commented Dec 5, 2024 •

edited

Loading

kinjalgajera22 commented Dec 6, 2024

Recaptcha not open webView on iOS #65

Recaptcha not open webView on iOS #65

Comments

KarinaOleynik commented Nov 11, 2024

KarinaOleynik commented Nov 14, 2024

KarinaOleynik commented Nov 14, 2024

douglasjunior commented Nov 25, 2024

DavidHuertasF commented Nov 25, 2024

KarinaOleynik commented Nov 25, 2024

douglasjunior commented Nov 25, 2024 • edited Loading

KarinaOleynik commented Nov 25, 2024 • edited Loading

kinjalgajera22 commented Nov 26, 2024

jeancantu commented Nov 30, 2024

kinjalgajera22 commented Dec 2, 2024

douglasjunior commented Dec 2, 2024 • edited Loading

jeancantu commented Dec 2, 2024

mlazari commented Dec 2, 2024

mlazari commented Dec 3, 2024

douglasjunior commented Dec 3, 2024

gabrielew commented Dec 5, 2024 • edited Loading

mlazari commented Dec 5, 2024

gabrielew commented Dec 5, 2024 • edited Loading

kinjalgajera22 commented Dec 6, 2024

douglasjunior commented Nov 25, 2024 •

edited

Loading

KarinaOleynik commented Nov 25, 2024 •

edited

Loading

douglasjunior commented Dec 2, 2024 •

edited

Loading

gabrielew commented Dec 5, 2024 •

edited

Loading

gabrielew commented Dec 5, 2024 •

edited

Loading