How to run a JS funktion before Metro replaces my React Native JS code via "Reload" - react-native

I am writing a React Native app with hardware access. This means that I setup the hardware at application startup. Then I could click "Reload" in the developer menu. But before the code is reloaded I need to tear down my hardware setup since otherwise the setup during restart fails.
Is there any way I can create some kind of callback function/hook that allows me to get informed immediately before app reload? Than I could to the tear down in this function. Please note the code has to run in the handy app (not as a kind of plugin for metro bundler).

Related

Expo debug remote JS causes unresponsiveness in UI

I upgraded a react native project recently from expo SDK 36 to 38. It compiles now, but anytime I click on "Debug Remote JS", it causes the UI to become slow and unresponsive, only occasionally picking up the on click events. I created a bare bones project to duplicate it. To verify, either run expo init from cli or here's a project https://github.com/seniordevops/tab-application.git. Click the tabs without the debugger on, then turn on debug remote JS and watch the slow down. Happens on both Mac and PC. Any ideas on the root cause?
This is mostly due to the fact that the clock on your PC and mobile are not synchronized.
You either have to synchronize them or have the phone clock one second earlier than your PC/Mac.
I suspect the reason could be an upstream problem of react-native. Please check this expo-cli issue:
https://github.com/expo/expo-cli/issues/2405
a maintainer reports:
when you are debugging on your device, the javascript is being
executed in your browser on your computer :(

How to manage ios background modes via react native (for example calling API while app is killed)

I'm developing a react-native app and I'm facing a problem: I need to execute a periodical task (an API call to post some data) in all possible cases: the app is in the background, app is in foreground and app is killed (double tap on the home button and swipe up).
How could I achieve this in iOS?
For Android, HeadlessJS seems to work fine, but for iOS I couldn't find anything which could fit my case.
I've tried with react-native-background-fetch but if the app is killed, also the background fetch is halted (https://github.com/transistorsoft/react-native-background-fetch/issues/34)
I've tried react-native-background-timer, but it works only until the app is killed.
I've also tried adding a geolocation native library to set background mode "location updates" capability, and calling its start method inside the didFinishLaunchingWithOptions into AppDelegate.m. But also this works only until the app is killed.
If I use the same native library on a native iOS app, and I call it inside the same method into AppDelegate.m, it keeps working also when the app is killed.
So which is the difference between the native and react-native app that lets the app survive the force-quit?
I've also tried reading this https://developer.apple.com/library/archive/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/BackgroundExecution/BackgroundExecution.html but I couldn't replicate that info via react-native.
Can someone help me, please?

Vue Native - Debugging

Recently I switched from Ionic framework to vue-native (vue.js wrapper around react-native), everything seems to be cool, development is fast and easy, but I have some real issues with debugging those apps. With Ionic Framework (Cordova) I was able to open an app in web browser and could easily manage Vuex state (for example) from Chrome Console. It doesn't seems so easy and trivial in react native world. Is it possible to have similar debugging experience in vue-native? When my app starts to grow and gets complicated it's really hard to handle it other way around. Any help appreciated.
Basically all my problems gone away when I ported my apps to Expo (which allows for JS remote debugging) and grabbed React Native Debugger - https://github.com/jhen0409/react-native-debugger.
Important part is having simulator installed on your developer machine (like iphone simulator) because debugger doesn't play nicely with real machines.
Inside debugger hit cmd+t to open a new window and set port to 19001 (because of Expo using this port). Now start expo with npm start command and in Expo panel hit 'Run in simulator' button.
In simulator make a shake gesture (ctrl+cmd+z) and allow remote debugging in developer menu.
Done. Pleasant experience similar to one known from Cordova. You have a js console, you can inspect elements and change styles live. Expo comes with live reload to make things smoother.
More info here: https://docs.expo.io/versions/latest/workflow/debugging/
Unfortunately, you cannot debug script parts in the VUE files in Chrome Dev Tools (you can put the breakpoints, but they are not working well), but if you put the methods to a separate JS file, it works like a charm. I know, it's a workaround, but not a big pain, and working well.
See my TODO app for example: https://github.com/TheBojda/VueNativeTodo

ReactNative: Does `Linking.addEventListener` fire when the app is running background?(Deep linking)

When I set up like this
https://facebook.github.io/react-native/docs/linking#basic-usage
and open the app via Custom URL Scheme,
_handleOpenURL catches the URL if the app is shutdown, but doesn't if the app is running background.(iOS)
So can't I use the Linking.addEventListener when the app is already running?
I was having this issue working on a detached Expo project because I had added the suggested code from https://facebook.github.io/react-native/docs/linking.html to the *AppDelegate.m but Expo already provides slightly different functions for handling URL events. Removing the code from the React Native docs made it work for me.

How does react native compile it's code into native apps?

recently started working with react native and project requires for apps to be build on server. So the theory is that app could be build on request, which means something, lets call this something react native compiler, needs to be on some server which allows me to do this.
For example, this is the location where is react native compiler is "http://example.com/compile", and you have some settings options and button "compile" on that site, and when you click on button, application compiler starts, and after x seconds android and iphone apps are ready to be downloaded. Is this possible?
It is surely possible, although it might be complicated to implement, it all boils down to the level of complexity that you want to achieve (just a build system, an online IDE...).
Each React Native application consists of the JavaScript code and one Android and iOS projects (you can include more platforms through 3rd party efforts, but let's keep it simple). Both the iOS and Android SDKs offer command-line tools for the building functionality. In the case of iOS you have the xcrun command and in Android, the project includes some gradle commands that you can execute. So in general, what you have to do is just execute these commands via your backend when an user requests it.
Essentially what you need is the same kind of setup a Continuous Integration server would, but instead of triggering a build whenever changes are made, the server should build the app on demand, and then send back the result of the compilation to the user. You can read more about CI for React Native here and here, for instance.