I am using Expo to build an app that serves a website using react-native-webview. It's working in android, but however in iOS with custom originWhitelist, react-native-webview automatically opens custom scripts in Safari without any user interaction.
For example:
<WebView
source={{
uri: 'https://www.bbc.com',
}}
originWhitelist={['https://*bbc.com']}
/>
On load, the webview opens a link that doesn't fit the whitelist automatically. You can check the screen cap here: https://imgur.com/a/Tvbua2b. In addition to that, it also shows other urls that can't be opened (My guess is that because the app isn't on foreground). Here's one of the error messages from the console:
Environment:
OS: iOS
OS version: 13.5.
react-native version: React Native 0.62.2 for Expo SDK38.
react-native-webview version: ^9.4.0.
Related
When React native application is run from terminal using
npx react-native run-ios
Cannot debug webview from safari. Safari develop menu does not show the simulator in the devices .
I could not debug the application in safari when run using command
npx react-native run-ios.
But when I tried running the application using Xcode ,simulator was available in
safari develop menu. To debug your web url you need to go to
safari>develop>simulator name> web url
According to react-native changelog, the React Profiler is supporting in react-native since version 0.57 (https://github.com/react-native-community/releases/blob/master/CHANGELOG.md#tooling-updates).
I have an application using react native 0.59.1, and the profiler is working. However, I am not able to view the profiler tab in chrome's react dev tools (https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html#profiling-an-application).
I tried to do it with the app running on a genymotion emulator (on Windows), on Samsung Galaxy S6 and on a Xiaomi Mi A1 but it is not visible for any of these.
Does it work for you? On which smartphone type and which version of react native?
Well, the solution is simple, if you know where to read.
react-native doesn't work with the chrome extension, but with the stand alone version:
https://github.com/facebook/react-devtools/tree/v3/packages/react-devtools#usage-with-react-native
I am using react-native-camera and react-native-qrcode-scanner libraries for scanning qr codes in my app. In android I have tested this and it was working fine, but in IOS I am facing lot of issues. The camera opens successfully on first attempt but after scanning the camera gets freezes and then a blank screen appears instead of camera. I have also given permissions in info.plist file in Xcode related to camera. Here is the code for the QRcode scan which I am using in the app
render() {
return (
<View>
<QRCodeScanner
onRead={this.onSuccess.bind(this)}
showMarker={true}
/>
</View>
);
}
Current versions in my app -
react-native - 0.57.5
react-native-camera - 1.10.1
react-native-qr-code-scanner - 1.1.2
Any answer or suggestions would be helpful to me Thanks.
We have a website that needs to be ported to mobile app. We have used react-native and the webkit view.
In the website, there is a play button that will open up a video. On Android, this works very well. However, it is not the same for iOS.
Please see error message
Error Loading Page
Domain: WebKitErrorDomain
Error Code: 204
Description: Plug-in handled load
Otherwise, the website looks good on iOS. On Android, the video opens and runs smoothly.
We have used this code in the app which is extremely simple.
<WebView
source={{uri: 'http://www.domain.abc'}}
bounces={false}
scrollEnable={false}
/>
Any idea on how to fix this issue?
How to open a react-native app from an url in safari (iOS) or from other app?
Example (it is android):
I tried this way http://facebook.github.io/react-native/releases/0.38/docs/linking.html
But it is only for opening url from app in safari.
The feature you're trying to implement is called 'deep linking' and this article explains in detail how it should be done with react native for both ios and android platforms.
For Android Virtual Device you should execute the following command from a terminal:
adb shell am start -a android.intent.action.VIEW -d "<app scheme>://<some>/<path>" com.<app name>
This article explains how to implement deep linking for React Native applications: Deep Linking with React Native