Solving UIWebView deprecation warning by App Store on React Native Expo? - react-native

I'm building a React Native app with Expo (SDK v35) and upon delivering the binaries to App Store Connect, I get a warning that many have gotten:
ITMS-90809: Deprecated API Usage - Apple will stop accepting submissions of apps that use UIWebView APIs.
I realize the warning is related to react-native-webview prior to v7.0.1 and that it will come up if UIWebView is used anywhere, including the dependencies.
However, I have cleaned up the code in its entirety, to the point that grep -r UIWebView ./* turns up empty (I even removed comments). I also ensured that all dependencies use a version of react-native-webview that is greater than the patched 7.0.1 version. Here's the log from grep -r webview ./node_modules/*/package.json:
./node_modules/react-native-signature-canvas/package.json: "react-native-webview": "^7.5.2"
./node_modules/react-native-webview/package.json: "_from": "react-native-webview#^7.5.2",
./node_modules/react-native-webview/package.json: "_id": "react-native-webview#7.6.0",
./node_modules/react-native-webview/package.json: "_location": "/react-native-webview",
./node_modules/react-native-webview/package.json: "raw": "react-native-webview#^7.5.2",
./node_modules/react-native-webview/package.json: "name": "react-native-webview",
./node_modules/react-native-webview/package.json: "escapedName": "react-native-webview",
./node_modules/react-native-webview/package.json: "_resolved": "https://registry.npmjs.org/react-native-webview/-/react-native-webview-7.6.0.tgz",
./node_modules/react-native-webview/package.json: "_spec": "react-native-webview#^7.5.2"
The only part of the app where WebView is actually used is through the module react-native-signature-canvas, which not only uses webview versions >= 7.5.2 but also passes useWebKit={true} as props, ensuring the use of WKWebView, not UIWebView.
Any suggestions on how to get rid of the warning? Also, if I submit the app for review anyway, will it be rejected? Is the warning taken into consideration for review or will they simply test the app on an iOS version that does not support UIWebView and see if it runs normally?

It looks like the Expo team has addressed this and a fix will be released in Expo SDK 37. More details found on this Github issue: https://github.com/expo/expo/issues/5497
The warning is given because the compiled app still has the UIWebView API inside it, even if the useWebKit={true} prop is set. Unfortunately Apple has just informed developers that they will no longer be accepting app submissions from April 2020 that use or have the UIWebView inside the application. In the meantime you can submit new and updated applications to the App Store until this hard deadline.

If you are using useWebKit={true}, that is to say, you are using WKWebView not UIWebView at all. Then you can do the following to solve the problem -- Deprecated API Usage.
Remove Libraries/RNCWebView.xcodeproj/RNCUIWebView.h、RNCUIWebView.m、RNCUIWebViewManager.h、RNCUIWebViewManager.m
Remove Libraries/React.xcodeproj/React/Views/RCTWebView.h、RCTWebView.m、RCTWebViewManager.h、RCTWebViewManager.m
Now I have already uploaded app.ipa to AppStore successfully without any permission warnings.
That's all. I work for me. I hope it helps.

Related

React-Native, React-Native-Web and React-Navigation/Stack

Has anyone been able to get React-Native 0.7, React-Native-Web and React-Navigation/Stack 6.2.3 to work on web? I have a small app working on iOS and Android which I am trying to enable on web too. iOS and Android portion work fine and using metro.
However, webpack build continues to error out with "Module parse failed: Unexpected token" on the NavigationContainer.
I tried searching both react-native-web and react-navigation Issues on their respective GitHub Repositories. However, could not find something to solve my issue. Also tried modifying webpack.config with several different configurations/loaders.
Used links below as a reference too:
https://arry.medium.com/how-to-add-react-native-web-to-an-existing-react-native-project-eb98c952c12f
https://gist.github.com/skabbes/0bfa0a969aac8ec13f716dda1ad2ab43
Yes, it happens that I maintain a library that does just that: creates a bare React Native app that also runs on the web: 🌒 Luna - https://github.com/criszz77/luna
Here is the live example: https://criszz77.github.io/luna/
You can find more on the wiki page about how it's implemented and you can also implement it by yourself: https://github.com/criszz77/luna/wiki
By using react-scripts, you don't have to handle webpack, babel and other hard configs by yourself.
It currently doesn't run on 0.7 (didn't have time to make the update), but it's in plan to support all the latest versions of course ASAP.
EDIT: Updated to 0.70.3 🎉

EXPO + react-native-reanimated debug issue

I've had an app running on Expo SDK 41 and it had some basic usage of react-native-reanimated#~2.1.0 and debugging worked just fine.
At some stage SDK 41 was deprecated and I was forced to upgrade, so I went for the latest one which is 45.
After the upgrade I can no longer use remote debugging. When I turn on remote debugging, the app crashes with the following error
Requiring module "node_modules\react-native-reanimated\src\Animated.js", which threw an exception: Invariant Violation: Calling synchronous methods on native modules is not supported in Chrome.
Consider providing alternative methods to expose this method in debug mode, e.g. by exposing constants ahead-of-time.
and I can't do anything (I can't even turn off remote debugging without clearing expo app data).
The issue seems to be related to react-native-reanimated (current version is 2.8.0)
Expo docs state this:
The new APIs in react-native-reanimated#2 use React Native APIs that
are incompatible with Remote JS Debugging. Consequently, you can only
debug apps using these APIs using Flipper, which is not yet available
in the Expo managed workflow. You will be unable to use Remote JS
Debugging if you use the new APIs from Reanimated 2. Remote JS
Debugging will continue to work if you only use the APIs that were
also available in Reanimated 1.
Tried to downgrade to react-native-reanimated#~2.1.0 did not work either.
I must be missing something, because otherwise it seems a bit ridiculous that I'm forced to upgrade SDK which in combination with react-native-reanimated does not allow me to do debug anymore.
Please advise if there is anything I can do.
Thanks
This is what that link to Expo's docs show me at this time:
Reanimated uses React Native APIs that are incompatible with "Remote JS
Debugging" for JavaScriptCore. In order to use a debugger with your app with
react-native-reanimated, you will need to use the Hermes JavaScript engine and > the JavaScript Inspector for Hermes.
Anyways, this appears to be an issue Reanimated themselves talk about in the docs
The workaround around this for some time has been this code shared in this answer here
It isn't even a reanimated problem particularly, but an inability of RN to develop using some synchronous features that pertain to debugging.
Anyways, hope this helps you
After posting a question on expo repository, I've got the following answer which actually does not solve the remote debugger issue, but gives the same alternative. Basically they suggested to use hermes engine
hi there! this is unfortunate and inconvenient for sure. it's a side effect of the direction the ecosystem is moving in - away from JavaScript Core and remote debugging in Chrome towards Hermes and attaching a debugger to the on-device Hermes engine. Reanimated no longer supports remote debugging in Chrome.
in order to debug JS using Reanimated in SDK 45+ we recommend using Hermes. you can set this up in your app.json as follows:
{
"expo": {
"// your other config here": "...",
"android": {
"jsEngine": "hermes"
}
}
}
now when you run expo start and launch your app press j and it will launch a Chrome Inspector that will attach directly to the app on your device (I suggest upgrading expo-cli to the latest to ensure you have this feature). be sure to refer to the "Using Hermes Engine" guide for more information

Expo uses old code even though new code has been deployed

I have a react-native app that is using Expo.
In the beginning of the project I pushed some code to the default publishing channel that was never intended to be used in production.
Since then I have released dozens of versions to production and mostly all works as expected. (New installs gets the latest JS code)
However, a few users still gets old versions of the code, even though they literally just downloaded the app from App Store / Google Play.
This is extremely frustrating. How can I make sure that fresh downloads of the app will download the correct/latest version och my JS?
Note that this is not related to the app detecting new code that might be available for download. It is the fact that the wrong code is downloaded and used to begin with. Is there any way to remove all JS-code except the very last version that I published? I imagine that would solve my issue
Turns out, expo don’t always do this successfully. You need to rebuild the react native bundle before publishing.https://proandroiddev.com/bundling-react-native-during-android-release-builds-ec52c24e200d
This is what expo gives as a feature known as Over the Air updates (OTA). Whenever a new version is built with expo channel, it automatically updates even in the app store and play store. But there is a way to disable the updates. the expo documentation for disabling:
It is possible to entirely disable OTA JavaScript updates in a standalone app, by setting updates.enabled to false in app.json. This will ignore all code paths that fetch app bundles from Expo's servers. In this case, all updates to your app will need to be routed through the iOS App Store and/or Google Play Store.
This setting is ignored in the Expo client.
And I do recommend you to read the documents of OTA, which is a good feature when you get to know all of it.
The expo link is expo OTA

Forcing refresh of a published Expo app

could somebody explain how the Expo client decides whether to refresh my app or use the current version cached (~already downloaded) in the client?
When I'm pushing out a new version with exp push, the Expo app (on Android) doesn't seem to pick it up, unless I clear all data of the app.
I thought that bumping the expo.version in the app.json would solve this but this doesn't seem to be the case.
Thanks!
UPDATE
Ok, I understand it is supposed to happen automatically, but this doesn't seem so - I tried multiple devices which were not offline - I suppose there must be something obvious I'm missing...
https://docs.expo.io/versions/latest/guides/offline-support.html#load-js-updates-in-the-background
Check that you don't have this option on the app.json file:
"updates": {
"fallbackToCacheTimeout": 0
},
I had this option in there and it prevented the app from waiting for a new version to be downloaded.
(on Android) I succeeded by opening the app in Expo, I would see the cached version, then I force stopped the app intentionally, both the app and the expo client. This removes it from the list of open apps on the phone.
Relaunched the expo client, then tapped my demo app again, and it loaded the new version. Tested a few seconds after publishing.

Enable Popups in React Native WebView

I have a react native application(using react-native 0.43.3) that uses webview to show a web page used for online banking. That site loads a popup window with the login page.
With the ReactNative WebView this popup window in not shown. In native android to enable popup window showing I found out that I need to make webView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true), but couldn't found a way to set this parameter when using ReactNative WebView.
Is there a way which I can achieve this with the WebView provided with ReactNative?
A while back I needed to fork the react-native framework because there is a bug in the iOS WebView when using javaScript bridge between react-native and native (iOS and Android), after some research I came to the conclusion that I must fork the repo in order to fix it so I did.
A week ago I needed the webView.getSettings().setJavaScriptCanOpenWindowsAutomatically(boolean) method as well, so I went ahead and added it in my fork along with view.getSettings().setSupportZoom(boolean) and view.getSettings().setSupportMultipleWindows(supports).
If you want, here is my fork.
Please keep in mind that it means that you need to build react-native for android from source, more info on the matter can be found here, it's a bit of a hustle to be honest, but in some cases it's worth it.
the fork is from react-native 0.44.0, you should also keep in mind that if you use my fork, in means you probably wont be able to update version when they do come out, so it all depends on your needs in the end, worst case scenario you could always fork my fork and merge it with the newest version.
you can fetch my fork with npm by modifying you package.json file and then running npm update react-native
"dependencies": {
//...
"react-native": "samermurad/react-native#rctWebView-legacy-fix",
//...
}
I am planning to extract the fixes and build a separate WebView component, but I am currently too busy for that :/
I hope that helps:)