React Native - can it do these things efficiently? - react-native

We use React/Redux for our web-based app in production, and it works really-really well. We've been curious about React Native, and have a few quick questions. We're looking for facts only, not opinions, and not interested in starting a debate.
In order to build our app, we would need the following:
push notifications - I see a few projects on github, but does anyone have a robust solution running in production for a real app?
background processing - what happens when this app isn't running in the foreground (does background processing run similarly as other native apps, i.e. can I go to the Apple Setting app and disable the background worker threads?
web sockets - again, I've seen a few projects on github with experimental results, and yes I've heard that "this is trivial to implement, you just have to write a poly-fill". What I want is a drop-in solution, that's well tested.
in-app purchases - has anyone connected react native to Apple's in-app purchase system.
Thanks! I realize that react-native is in early beta, but in order for us to build an app efficiently, we need to make sure these basic things are ready to go.

Push notifications are included with React Native although the API is not as mature as core APIs like the view system.
React Native actually pauses some of its work when the app is backgrounded and background processing has not been a focus yet. You would instead want to delegate work to a dispatch queue. This might work for your use case if the background processing doesn't involve application logic, which you want to keep in JS.
WebSockets work reasonably well with React Native. Several contributors have helped build up WebSocket support. Out of your four requirements, I would say that WebSockets are the best supported.
There are npm packages like react-native-in-app-utils that expose the IAP APIs.

Related

How to implement cron jobs in react native?

I am new to react-native and implementing simple app where app will monitor the mobile's clock time and should set some flags so as to notify user to perform some task when he starts the app.
I want to continuously monitor mobile's clock time as a background job in the react native app such that, when user opens the app and if specific time has already passed, it should set some flag to take future decision.
After some research over blogs, I found that react-native-background-task and/or background-timers can be used. But I am finding difficulty in implementing it. Can anyone help me with the implementation example for the same.
Thank you in advance.
So, from your post I'm going to assume a few things. One being you'll develop on Android as well as iOS, you just want to use a plugin (not code a module yourself).
Unfortunately, unless I'm mistaken - there's no simple answer and I'll explain.
As Android and iOS go forward they are starting to limit usage of Apps in the background, specifically Android goes into 'Doze' mode and iOS works in a similar fashion.
For Android, you'll need to consider a few things and I'll concentrate on them, as you'll need to know this before actually creating a RN app.
Doze Mode
Starting from Android 6.0 (API level 23), Android introduces two
power-saving features that extend battery life for users by managing
how apps behave when a device is not connected to a power source. Doze
reduces battery consumption by deferring background CPU and network
activity for apps when the device is unused for long periods of time.
App Standby defers background network activity for apps with which the
user has not recently interacted.
While the device is in Doze, apps' access to certain battery-intensive
resources is deferred until maintenance windows. The specific
restrictions are listed in Power Management Restrictions.
Doze and App Standby manage the behavior of all apps running on
Android 6.0 or higher, regardless whether they are specifically
targeting API level 23. To ensure the best experience for users, test
your app in Doze and App Standby modes and make any necessary
adjustments to your code. The sections below provide details.
Cruically, you'll need to note:
The system does not allow sync adapters to run.
The system does not allow JobScheduler to run.
So firstly for android, you'll (probably) need to ensure your app is in a 'whitelist'. You can check the requirements of the list here:
https://developer.android.com/training/monitoring-device-state/doze-standby
Or, you can access the maintenance window with a plugin like here:
https://github.com/transistorsoft/react-native-background-fetch
Testing
Android give you some tools to do so, mainly running:
$ adb shell dumpsys battery unplug
$ adb shell am set-inactive <packageName> true
Headless JS
You can check out headless tasks, which could suit your situation:
https://facebook.github.io/react-native/docs/headless-js-android
Caveats:
Although Android state that the operating system itself acts like documented, devices themselves can have software built in which essentially kills background processes. Nokia is one of the worst. So be aware of this.

React Native: How to make HTTP request when app is backgrounded?

To simplify my problem: I have an ecommerce app that uses geofencing to detect when to prepare an order:
BackgroundGeolocation.onGeofence(geofence => {
this.props.prepareOrder();
});
The thing is, prepareOrder() makes an HTTP request to my server. I've noticed that it doesn't actually make the request until my app is foregrounded.
Is there a way around this? It is very likely that my app is backgrounded when they enter the geofence and I need to make a request.
======
The more complex version is here: https://github.com/redux-saga/redux-saga/issues/816. I'm using redux-sagas and it doesn't seem like yield call is being called. But I'm not sure if it's a redux-saga thing or something with making HTTP requests in the background.
Same here... It's not a redux-saga problem, it's a more general problem with ReactNative apps working in background: the JS Thread appears to be frozen when app is in background for a long time (especially on iOS when screen is shut down)
the behavior is different between iOS & android, and also depends on OS version. Still, We're building an application that needs constant geolocation in foreground & background, we tried doing it with sagas and we saw it didn't work : we would stop receiving locations after some time. Watching at our logs, we would see that all the ReactNative logs we had would stop too. Hence our wild guess on "maybe the OS stops all the ReactNative context, for energy reasons
So we moved our background code into native :
HTTP POST in a custom RN Native Module when app is in background on iOS
Headless JS on android.
(it seems to be the solution others have chosen too, like https://github.com/mauron85/react-native-background-geolocation)
it works!

How to get crash logs for React Native app?

My React Native App crashed on a tester's phone.
What is the best way to get logs of that crash? I'm using React Native 0.14.2
We just rolled out official support for react native error reporting with Bugsnag this week which reports both JavaScript and native (Java/Cocoa) layer errors to a single dashboard.
Compared to Fabric - Bugsnag adds support for js source maps, ios symbolication, and android proguard mapping - which make a big difference.
Let me know if you have any questions or I can help in any way - I'm a founder.
As #Abhishek has commented, you'll have to use some monitoring tools with crashlytics to get such infomation.
Fabric is a good option in this case. It comes with a crashlytics solution.
Here is a blogpost that explains in-depth on how to set it up for your app.
Here's an excerpt of features of crashlytics tool of Fabric from the blogpost
Crash Reporting —It will record every single crash and its stack trace. This is way better than the iTunes Connect crash reports, which only include the info of users that opted in to share information with developers while setting up a new iPhone. It’s also not updated in real-time (you can read more about this here).
Crash Logs — (A.K.A. CLS_LOG) If you’re familiar with Objective-C, you have probably been using “NSLog” while you’re developing your app. You should use CLS_LOG instead. There’s no difference at all when you’re debugging (whatever you’re logging will still show up in the console) but the cool part is that when a user crashes your app, all the information will be sent to Crashlytics’s servers the next time the user launches your app, including all the content that you’ve logged through CLS_LOG. So if you log information for most of the actions/events in your app, you can read the logs later and reproducing the crash should be simple.
A good crash log framework that reports from the javascript level I've tried recently is Sentry. More descriptive with the actual error, if it comes from he JS side.
I wrote expo-error-log as a free alternative to BugSnag, etc.
Check it out if you like :
https://github.com/marchingband/expo-error-log
https://www.npmjs.com/package/expo-error-log
https://medium.com/#andymarch/free-error-reporting-in-expo-apps-with-expo-error-log-819cab5b6062
It seems like Crashlytics does the error reporting job perfect for a native app made in android/ios.
For a react-native app, however, Bugsnag looks more promising. You can explore both and see which one fits your requirements.

React native, do I need to send updates through app store?

Title pretty much explains it. Does it render JS from an external codebase so I can simply push new updates through git, or do I need to actually push the changes through App Store?
This is my previous answer, which is getting downvoted into oblivion because it didn't predict something cool like CodePush coming to React Native :)
React Native compiles to an iOS binary. Updates need to be sent to the
App Store, unless you're simply using React Native for its WebView
and rendering an existing webpage on the client.
Updated 6/2/16
It looks like Microsoft has a sweet plugin for CodePush found here that lets you push changes remotely to your React Native app without having to send the update through the App Store.
Here's a quote from the README docs:
NOTE: While Apple's developer agreement fully allows performing
over-the-air updates of JavaScript and assets (which is what enables
CodePush!), it is against their policy for an app to display an update
prompt. Because of this, we recommend that App Store-distributed apps
don't enable the updateDialog option when calling sync, whereas Google
Play and internally distributed apps (e.g. Enterprise, Fabric,
HockeyApp) can choose to enable/customize it.
I'm actually working on a project (with the React Native Playground team - https://rnplay.org/about) that will allow you do live update your apps JS on the fly without submitting an update to the App Store. It's called Reploy, http://reploy.io
We will be open-sourcing the first portion of it very soon (the updater module). There will also be a service that will help you to manage your updates and even deploy your app to TestFlight and the App Store when needed (App Store updates are still needed when adding a new native module or static assets).
Also, just so you know, Apple has allowed this type of auto-updating via item 3.3.2 in the "iOS Developer Program Requirements" document, it says:
3.3.2 An Application may not download or install executable code. Interpreted
code may only be used in an Application if all scripts, code and interpreters are
packaged in the Application and not downloaded. The only exception to the
foregoing is scripts and code downloaded and run by Apple's built-in WebKit
framework or JavascriptCore, provided that such scripts and code do not change
the primary purpose of the Application by providing features or functionality that are
inconsistent with the intended and advertised purpose of the Application as
submitted to the App Store.
https://developer.apple.com/programs/ios/information/iOS_Program_Information_4_3_15.pdf
You could push an update to a remote user if you had linked to an external bundle and had the IP / correct ports forwarded, however Apple do not allow this for released AppStore apps.
For beta testing remote apps you might want to try exponent http://exp.host/
Update---
For completeness, it should be noted that if you are part of the Apple Enterprise program you do not need to publish Apps to the AppStore at all, you can post them to end users via a download link.
I work on a project called AppHub that lets you update JavaScript and images without re-submitting to the App Store. The iOS SDK will be open source, but for now you can use the hosted service to manage new builds of your app.

Can we package our existing HTML5 JS App for Windows 8

I have read some posts on S/O and also around the web. We are producing a HTML5 JS based web app that runs on the web. We are packaging it up for Google apps, and also for phonegap.
Can we package this app for windows 8? Of course, I appreciate it won't use the windows 8 features. But, will the app run none the less, as it stands. So that we can place it in the store and build out windows 8 features as we move forward.
I appreciate this is a slightly non-concise question, but I guess the real point is what is our quickest route to take our existing HTML 5, CSS, JS App and deploy it in the store and get it working on this platform.
In general, the answer is yes. The transition is not seamless, but you will be able to use a ton, if not all, of the application artifacts in Win8. A good test is if you can run it in IE10, you can run the app as a Win8 app. Again, this is a very broad brush - things you need to worry about are things like all scripts files need to be local (no CDN), changes to web and security contexts, and the fact that Win8 is a horizontal paradigm whereas most web apps are vertical. But in general, you should be able to make the move. Usual caveat - your mileage will vary.
Yes, although not recommended, you can package your existing app for Win8. You'll need to add a few bits of code though. The minimum would be to embed your app's start/init code within WinJS's first promise callback, like so:
args.setPromise(WinJS.UI.processAll().then(function () {
// your init code
}
You'll also need to create a couple of icons for the start screen and an image for your app's launch screen.
It is possible that you'll run into a few issues, like some security related restrictions, where you'll have to modify your code to use some native WinJS functions. This all depends on you app's implementation.
You can also check Microsoft's guidelines for migrating a web app to win8, here: http://msdn.microsoft.com/en-us/library/windows/apps/hh465143