The company I work for has many small angular applications they would like to make available in an phone app. Mostly because the users are usually in poor connection places so it would be nice if they only need to make the API calls and not load resources, and they also want to be able to make push notifications for new events.
So looking into this I'm trying to see if its possible to embed Angular (v13 as of now) applications inside of React Native. Where the react app will mostly act as a menu and notifications handler.
To be honest I haven't found much help online besides that I probably need to use a <WebView>. So i tried compiling a simple Angular app and placed it in /assets/my-app/
and then tried the following (with a few variations on how I wrote the URL).
<WebView source={{uri: '~/assets/my-app/index.html'}} style={{marginTop: 20}} />
But that did not work at all.
So, my questions are:
Can this be done?
Is this the right method?
How do I accomplish this?
Thank you
Related
first time asking here as i am looking for some guidance before i start coding.
I have been developing websites mostly in PHP/MySQL/Jquery for years. As I was requested to port a website to an app, I selected React Native in order not to learn 2 different languages for IOS-Android.
I subscribed to some react native lessons, as I found it very clear and fun to follow, and it indeed is.
But here I am finding that to replicate the website is a truly difficult task for me. A temporary version exists at https://app.thallo.care/app.php?language=en (view on mobile if you like). There are many fixed positioned things and floating menus that i cannot easily program on react native.
I tried webview, it works wonderfully, but i am not positive i will be able to implement notifications the way i want to, or custom app styling with inject javascript i am unsure it will work.
The only app difference comparing to the desktop version, is that the user will receive notifications. The website will have a calendar where he will add events, and i need to send notifications to the user device on the event datetime that he has set.
Now the question... Should i use webview and manage notifications on a third party app like amazon SNS or anything else, will i get per-user notifications on events with webview? (I dont need to open a specific page on the app, but it would be nice). Or should i insist on react native coding and try to replicate as much as possible, to be able to have proper notifications? Reminder - the events won't be sent by the app. they are stored in MySQL and should be stored on some other service as well (that i dont know of yet). I don't know also if the webview can handle the website programmed login-logout with $_SESSION php parameters.
I would really appreciate some guidance.
Thanks in advance,
I built an application in React, is there a way that the same code will be used for a website?
I know Instagram is built on React and it also has a website, I wonder maybe you should add some link or something that it will open for me as a website?
Or maybe there is no such way and I have to build a website separately?
First off all, If you have written any code which is related to native functionality, then it can be challenging.
If you have only worked with views, images, and some of the basic functionality.
It can be done with react-native-web you can easily migrate your project to react-native-web.
If you project is created with expo they already provide react-native-web support.
Option 2: If you have some of the code you want to share and some is that you don't want to share or can't share.
You can use renderProp or customHooks pattern to reuse your logical code and seperate your view for react-native and react js apps.
If you want to reuse your views too, you can do those with primitives.
you can use styled-component primitives for that.
https://medium.com/react-native-training/sharing-code-between-react-web-and-react-native-applications-7f451af26378
You can get some idea here as well.
As far as I've searched it appears to be impossible to load modules (=plugins/libraries?) dynamically (I'm very new to React Native..).
What I'd like to accomplish is to let the user of the app load additional functions as she/he desires.
Example:
A user wants to add a music plugin to the app.
Intuitively, I'd long for something like dynamic library loading. The user would fetch the library, it'll be loaded into the code and can then be executed. However, in React Native it seems like there are only modules that can be loaded?
Alternatively, I'd hope that auto-updating the app would allow to add modules "on-the-fly" ( https://github.com/aerofs/react-native-auto-updater or www.npmjs.com/package/react-native-hot-load ). But I fear that this is only for JS and data content?
The ability to dynamically add functionality to the app is an essential part of the app. I have no previous experience worth mentioning in mobile app development.
Question: Is it possible to dynamically add functionality (also native in nature) to React Native apps?
If not, would there be a workaround?
EDIT: I have found the following repository on github: https://github.com/yusefnapora/react-dynamic-linking-example .
Unfortunately, without any description. I have no idea about Objective-C, but the repo name sounds promising. Anybody knows what its purpose is?
I've got a WebView component that's loading static HTML content:
<WebView
style={{flex: 1}}
html={content}
/>
The issue is, if someone taps a link, it opens in the app and I'd rather force it to use Linking to open in Safari. Is that possible?
After searching around a bit the only way I see to open a browser from an RN app is using the Linking or LinkingIOS API. The question then is, how to enable your Webview to use that API. Here are two possible solutions:
1) Register your own URL Scheme that is handled by your app. E.g. myApp://this/is/a/link.html. Then handle all incoming events for that scheme and make corresponding calls to the API. Registering a scheme is easy and works very well. That seems like the most robust method to me.
2) Use a library that lets the Webview directly talk to it's paren view. E.g. https://github.com/alinz/react-native-webview-bridge.
Then you put a little JS code in your page that onClick sends the link URLs to the parent view, that then calls the API. I have used that project a while ago and it work like a charm until one RN upgrade that I needed broke it. But it's still under active development so you should be fine.
What's the easiest way to go about indexing a React Native app so that content within the app appears in Spotlight searches?
If you're still interested in indexing your app content using React Native, I've written a plugin to do just that.
As you've figured out, there's no built-in react-native support for this. The only option for you to utilize the Core Spotlight framework capabilities is to create your own native module which will expose this functionality to your react-native code. You can also try to find someone who already wrote this module and made it open source, but I guess you've already tried that.
Since this is the only way, it is also the easiest... That said, it should be pretty easy to implement it yourself, assuming you have some experience with iOS development. If you run into problems you can post your code and I can point you in the right direction if necessary.