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:)
Related
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 🎉
I'm using expo SDK 45 (the latest at the moment i'm writing this) and it seems remote debugging is not possible with react-native-reanimated 2. I'm not even using this library, but react-navigation's drawer does. And as far as I know, many people use react-navigation.
Don't tell me everybody is using Flipper, because I never managed to make it work properly.
I miss react-native-debugger so much..
Can you guys share your favorite debugging tool for react-native ?
Previously I used this package to prevent snapshot for selected screen in android and ios.
https://www.npmjs.com/package/react-native-privacy-snapshot
https://github.com/kristiansorens/react-native-flag-secure-android
But it's not maintained by the owner and not compatible with react-native version >0.60. Many example and question in the internet only show how to prevent snapshot for whole application. But I need to prevent snapshot only for selected screen.
I've tried to do with this example
https://medium.com/#jonaskuiler/creating-a-security-screen-on-ios-and-android-in-react-native-97703092e2de
But in android, it prevents whole apps. In ios, it works.
you can use nmp library, react-native-prevent-screenshot
for more confusions and a perfact understanding check this asnwer
I want to create my own podcast app.
I found this pre-written code online (github.com/diego3g/rocketcasts) and want to tweak it in order to create my own app.
How do I upload this code into expo?
Unfortunately that React-Native app was not built using Expo. You can tell because it has ios and android folders in its root directory.
Digging deeper you can see that it uses react-native-config as a dependency. This dependency requires access to native code, which Expo does not allow. You would have to go through and remove any dependency that requires native code if you wish to use Expo. This may remove functionality and could take some time to resolve issues.
Also this application was built using react-native: 0.47.2. Currently the most recent version of react-native is 0.57.8 with 0.58.0 just around the corner. That is quite a jump to make if you plan on upgrading the react-native version. Upgrading RN is not as simple as just changing a version code.
Similarly the repos last commit was over a year ago. That means that the majority of dependencies will be out of date and will need upgraded. Again, some dependencies aren’t a simple upgrade you would need to check every single one to make sure that it doesn’t cause unforeseen problems. You would also need to check their compatibility with Expo.
Personally I wouldn’t copy the project. I would look at how they have implemented the functionality and then in a new react-native project I would re-implement the functionality. That way all dependencies would be up to date and you would know that it would work.
Going down the path of editing an existing project like this one may be quite a challenge.
Either way good luck.
You can find more information about Expo here https://docs.expo.io/
And you can find a good explanation of the differences between Expo and react-native init here What is the difference between Expo and React Native?
The standard way to tweak an existing GitHub repository you don't own is to:
fork the repo (that is a GitHub operation, creating a copy of the repo in your account)
clone it and modify it: you can then push back to your GitHub fork.
I literally started reading about ReactNative an hour ago and am reading this git readme https://github.com/react-community/create-react-native-app/blob/master/react-native-scripts/template/README.md
Next I googled about it and found this link which seem to be explaining it but not to me novice in web, react, or react-native
https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md
Can someone explain to me as if I am 2 years old what is the meaning of eject? I keep hearing term "ejected project" but I cannot wrap my head around it.
Summary
If you created an app using create-react-native-app MyApp, ejecting your app gets your app to be the same as if you created your project using react-native init MyApp
aka
create-react-native-app MyApp > make changes to app > eject app
is roughly equivalent to
react-native init MyApp > make changes to app
More Details
What's the difference between create-react-native-app MyApp and react-native init MyApp?
Quick start vs. Full scale development
The philosophy behind create-react-native-app is:
Minimal "Time to Hello World": Create React Native App should reduce the setup time it takes to try building a mobile app to the absolute minimum, ideally on par with React web development (especially as seen with Create React App).
Develop on Your Device: It should be easy to develop on a physical device when you want to test how your app feels and responds to inputs.
One Build Tool: If you just want to get started with React Native, you shouldn't need to install Xcode, Android Studio, NDKs, or mess with environment variables.
No Lock-In: You can always "eject" to your own build setup if you need to write custom native code or modify how your app is built.
Essentially, create-react-native-app lets you get up and running quickly without having to a do a lot of (or any) configuration. In order to do this, it hides a lot of details from you.
If you want to create a serious app, you need to set up a real development environment. You can do this from scratch by running react-native init <project-name>. If you started with a react native project using create-react-native-app, you can get to this same place by "ejecting" your app
More details from the official documentation about getting started with React Native can be found here.
My understanding is that when you run the "create-react-native-app" (or "expo init" now) you are basically adding the Expo library on top of React Native.
I think the main reason for using Expo is to get your app up and running quickly. I think the main reason to eject is that eventually you might need to do more complicated customization with native code and need more control, etc. Here is a better explanation of Expo vs React Native CLI to bootstrap your app:
https://levelup.gitconnected.com/expo-vs-react-native-cli-a-guide-to-bootstrapping-new-react-native-apps-6f0fcafee58f
When you eject you are returning to the same state as if you did not use Expo to setup your app (native ios/android projects will be generated, etc.)
Here are a few other links that helped me understand:
http://www.reactnativeexpress.com/environment
https://docs.expo.io/versions/latest/expokit/eject/