I want to bring my expo app to the foreground from a background running task, the only third-party package I found on the internet that can do this is react-native-invoke-app but it does not work with expo managed apps.
There are three ways I think I can do this but I do not know how to implement any of them:
How can I make this package compatible with expo by utilizing expo config plugin?
How can I copy their native java code that involves bringing the app to the foreground into my expo app? and perhaps build a custom dev clients
Is there any other method that I can use to bring an expo app to the foreground from a background running task? please see my other question on this matter
I will appreciate any form of assistance
What's your use-case? A bit part of the answer depends on what you're trying to do.
It looks like the react-native-invoke-app package works through push notifications, so I would try making use of push notifications. For example, you could schedule repeating notifications with this package: https://github.com/expo/expo/tree/main/packages/expo-notifications
Or set up Firebase to send the push notifications based on some server logic, cloud functions, or API requests (which you could trigger with react-native-background-fetch).
You could also make use of a deep link, but it depends on your use case.
As far as I know, there's no way to force an app into the foreground without a push notification or a deep link.
Related
I have a react-js app and I use capacitor to leverage with native mobile API's (eg: BLE). My objective is to live update the app upon a minor change (eg: adding a new label) without going through the whole appstore submission process. I know Ionic has AppFlow that could work well with Capacitor, but it is way too expensive for me. Thus, I saw some are suggesting writing a script that pulls in the JS perfectly from somewhere like the S3 bucket, and when you build the app you build in all of the native code and replace the HTML scripts with one that comes from a remote source (But I have no idea how to do it)
Is this how most people handle live-updating webview apps or is there a better way ?
If so what are the steps to achieve this objective using scripts and so on (with code examples)?
Hey I'm the Maker of Capacitor-updater, the only alternative to ionic AppFlow.
The updater allows you to manage update by yourself, store your zip update where you want and use the download method.
How to start
npm install #capgo/capacitor-updater
npx cap sync
Then in your main JS, this is required to let the updater know the update is valid
import { CapacitorUpdater } from '#capgo/capacitor-updater'
CapacitorUpdater.notifyAppReady()
And lately after checking yourself the current version need update:
const version = await CapacitorUpdater.download({
url: 'https://github.com/Cap-go/demo-app/releases/download/0.0.4/dist.zip',
})
await CapacitorUpdater.set(version); // sets the new version, and reloads the app
After many request of people didn't want to do that themselves, I started Capgo a business to manage all the update process for you.
All is open source and can be replicate on your own as well.
Doing things for Capacitor is now my main activity, I produce open-source plugin as my main channel of Marketing, I'm solo founder and bootstrapped.
Hope my tool will help you !
You need a subscription to Ionic's AppFlow, as of yet ionic is the only company that offers live updates.
Is it possible to change/convert a plain react app into next app?
I have a project created with create react app but things have changed and now I want to switch the project into next app
maybe there's a possible way to do that? or should i start over from scratch to build my next app project?
I've been trying to research on how to migrate the project, but didn't found the solutions.
It's difficult to answer this question without seeing the actual project and dependencies you use, but here's a few considerations:
You'll need to convert your current routing solution to the one Next.js uses. Their routing is determined by the file system structure, rather than in code (like react-router). For more information, see their docs: https://nextjs.org/docs/routing/introduction
Ensure all your components and dependencies can render on the server, this may require moving behaviour that uses browser APIs into useEffect hooks (like window or document properties).
Move your hosting and building to something that supports Next.js configurations. There are a few including Vercel, Netlify & AWS.
Also check out their own migration guides that cover how to convert configurations to Next.js: https://nextjs.org/docs/migrating/incremental-adoption
In short, it really depends on what you're currently using and will require manual conversion your code. I hope this was still helpful.
I'm using Express as the server and nodemon to reload that server on file changes. Works perfectly. But when I make a frontend change (i.e changing an html page or css, javascript, anything basically) I have to reload the browser manually. If you're like me, that isn't ok. I know of the vscode extension "Live Server", but I want it all to be in that one express server. I tried using the live-reload npm package, the app and the browser extension, but that didn't work out for me. I really don't want to have to start to use something like webpack just so I'm saved the effort of pressing Ctrl+R a couple times. Any recommendations? I still haven't learned React but I've heard that if you use React, then you'll have that live reloading feature. I'm actually currently developing a typescript website template, so that's what I want to use it for.
From what you've said and after a little searching maybe samuelgjabel/nodejs-hot-reload is what you're looking for?
It supports typescript and where you don't want to roll your own / learn webpack at the moment, this seems like it would keep things simple.
*disclaimer - I haven't used the library myself and cannot attest to it's security or quality.
update:
Regarding your comment response, My mistake I misunderstood.
This library works on the front-end providing the auto (CTRL-R) you're looking for. try this guide for connect-livereload
It seems to hook into express' connection event to signal the browser for a reload after nodemon has respawned the server instace. The guide shows how to implement it without a build tool like gulp/grunt.
I am new to React Native I want to know how is it possible to deploy react native part or code like javascript files and assets on server and then use it.
Currently it is showing as localhost
Please let me know how to deploy it on server also is it possible or not.
Do I need to update app on play store every time when I change something in react part of my code?
what exactly code push does and is there any way by which I can load my react native bundle from server and update app dynamically
React-native compiles down to the two native languages.
Effectively you have 2 applications, non of them web.
You could have an image assets remote on a server and use the URL in the react-native code combined with a cache (so you don't have to download the asset every time).
Considering JavaScript files, I would say no. Unless you create an server and request the functionality by API calls.
And no, you don't have to interact with the play store every time, but usually you do :)
I think you need to understand how React Native works in order to understand.
What RN actually does is to expose native API to your Javascript code base. Basically a RN App is composed by 2 things:
As you can immagine the Native part is everything that is written in Swift/ Objective-C/ Java and that is the part you can not update without going through the App stores.
Now the interesting thing is the JS part, remember we said that basically you are consuming native API with JS. If you notice when you run react-native run-ios or react-native run-android a server is instanced which serves a bundle to your emulator / physical device.
Now if you think about it basically when you open the App the bundle is downloaded an then run. When you update your codebase while the app is running on the emulator the servers sends a signal trough the socket to notify the client that an update is available. At that point the client downloads the bundle and the app is reloaded.
Now to answer your question, yes you can serve the JS Bundle on your server and make the app check when is loaded or resumed if a new version of the JS Bundle is available, if so to download it (OTA update). As you can understand only the Javascript part can be update in this way and not the native part as well.
Then again, there are a few services that already do this like codepush by MS.
You can use the code-push cli or appcenter cli to publish your Javascript code to the cloud servers (hosted by Microsoft), and use react-native-code-push to retrieve the updates in your RN app.
Alternatively, you can use Expo which comes with its own over-the-air (OTA) update functionalities.
Both of the above services manage their servers internally for you and do not allow you to host the JS bundle on your own server (though there's a feature request for it).
Note that only changes to the Javascript codebase can be delivered OTA. Any updates to native code (eg. Swift/Java) must still be delivered through App Store/Google Play.
I am using React native to create an iOS app; So my code is in javascript and some objective-c.
Now i wan't to implement KISSmetrics in my project, i have done the proper setup based on kissmetrics documentation, but when it comes to create events and user identifications etc… i have to use data from my javascript code.
Does anyone knows how to do that? for example:
the objective-c code to identify the user is this: [[KISSmetricsAPI sharedAPI] identify:#"name#email.com"]; but how can i get the code that gets the identity of the user and replace the name#email.com from my javascript code?
I would look here to find out how to build a native module bridge. The way it works is that you create an iOS native module with methods that you can actually call from JavaScript by which you can send your data from JS to Obj-C.
Here's an example project that does this:
https://github.com/idehub/react-native-google-analytics-bridge
You don't need to turn it into a full-fledged NPM library, you can just simply create the necessary native files and JS files on the fly in your project.
Also, if you don't know already, remember to rebuild the iOS project (hit the Play button) to see your changes because the native side doesn't have Live Reloading.