Is there any way to create a background service with react-native on android?
I would like some sort of timer that wakes up every hour or so, and launches a simple javascript task.
Yes, It can be done.
React native operates on top of the native (java/Objc) to JS bridge with a concept of "native" and JS modules (modules can have methods that you may call from the "other" side of the bridge). All the UI stuff is built on top of the bridge (the main "native" module that handles generating views is called "UIManager"). It is possible to use bridge directly the only restriction is that the communication has to be asynchronous.
You can call the javascript function from the JAVA code. Check this link for the documentation.
Absolutely. In fact it's quite easy now to achieve this entirely in JS (no need to write native code) cross platform with react native queue and react native background task.
There are some limitations. The background task will only be fired roughly every 15 minutes at smallest intervals (and the timing isn't guaranteed to be perfect if it even fires at all - the iOS/Android scheduler is sort of a black box that looks at battery life, current cpu load, etc, when determining when to fire a scheduled task). Also the task is limited to 30 seconds of execution.
I've written a tutorial on how to set all this up here.
Let me know if you have any difficulty getting it up and running.
Release v0.36 support headless-js, only Android, for now.
https://facebook.github.io/react-native/docs/headless-js-android.html
It's Working in my case user the react-native-background-job library for running a background service. It's working after the kill the app.
https://github.com/vikeri/react-native-background-job
import BackgroundJob from "react-native-background-job";
const regularJobKey = "regularJobKey";
BackgroundJob.register({
jobKey: regularJobKey,
job: () => {
console.log('Background Service Call!');
}
});
<TouchableHighlight
onPress={() => {
BackgroundJob.schedule({
jobKey: regularJobKey,
period: 2000
});
}}
>
<Text>Schedule regular job</Text>
</TouchableHighlight>
Example Here : https://github.com/vikeri/react-native-background-job/blob/master/example/index.android.js
Try to use react-native-background-actions, it's very great service even for iOS and they are providing the ProgressBar feature as well.
yarn add react-native-background-actions
or npm:
npm install --save react-native-background-actions
A short code snippet of how to use it.
import BackgroundService from 'react-native-background-actions';
// You can do anything in your task such as network requests, timers and so on,
// as long as it doesn't touch UI. Once your task completes (i.e. the promise is resolved),
// React Native will go into "paused" mode (unless there are other tasks running,
// or there is a foreground app).
const veryIntensiveTask = async (taskDataArguments) => {
// Example of an infinite loop task
const { delay } = taskDataArguments;
await new Promise((resolve) => {
for (let i = 0; BackgroundService.isRunning(); i++) {
console.log(i);
await sleep(delay);
}
});
};
const options = {
taskName: 'Example',
taskTitle: 'ExampleTask title',
taskDesc: 'ExampleTask description',
taskIcon: {
name: 'ic_launcher',
type: 'mipmap',
},
color: '#ff00ff',
linkingURI: 'yourSchemeHere://chat/jane', // See Deep Linking for more info
parameters: {
delay: 1000,
},
};
await BackgroundService.start(veryIntensiveTask, options);
await BackgroundService.updateNotification({taskDesc: 'New ExampleTask description'}); // Only Android, iOS will ignore this call
// iOS will also run everything here in the background until .stop() is called
await BackgroundService.stop();
Related
I'm a native Android/iOS dev new to ionic capacitor and javascript in general. I'm trying to send data from Android's OnNewIntent callback to the ionic-react project I'm working on. I'm doing this in the native MainActivity.java that extends BridgeActivity:
#Override
protected void onNewIntent(Intent intent) {
super.onNewIntent(intent);
getBridge().triggerDocumentJSEvent("MyEvent","blah");
}
And in my App.tsx file, I have something like this:
const App: React.FC = () => {
const onMyEvent = (input: string): void => {
console.log('event received: ${input}');
};
useEffect(() => {
document.addEventListener('MyEvent', () => {
console.log('MyEvent document');
onMyEvent(it.name);
});
window.addEventListener('MyEvent', () => {
console.log('MyEvent window');
onMyEvent(it.name);
});
}, []);
but I can't for the life of me get a message through from the native Activity to the App.tsx file. I've tried delaying the trigger for up to 15 seconds after the Activity is resumed to make sure everybody is instantiated, but I still never see indication that the message has been received. Is there an easy way to communicate from the native layer to the capacitor layer that I'm missing? Is it that these early Android lifecycle events happen before the ionic listeners have a chance to register? Just trying to send startup data that only the native side knows to the ionic side before rendering the first screen.
Thanks!
Scott
Works in IOS and works in Android when the debugger is running, but doesn't work via Android Simulator. I get this message via react-native log-android and basically I am just having nothing returned to the screen:
12-02 10:39:58.511 22502 24204 W ReactNativeJS: TypeError: undefined is not a function (near '...}).flat()
Android Picture
IOS Picture
Here is the fetch function I am using:
import axios from 'axios';
export const getData = async url => {
try {
const response = await axios.get(url);
const data = response.data;
return data;
} catch (error) {
console.log(error);
}
};
export default getData;
Inside of my componentDidMount, where I call the endpoint using the GetData function above:
componentDidMount() {
const teamsAPI = 'https://statsapi.web.nhl.com/api/v1/teams';
getData(teamsAPI).then(teams => {
const teamData = teams.teams
.map(({ id, name }) => ({
teamId: id,
teamName: name
}))
.flat()
this.setState({
teams: teamData
});
});
}
Everything has since been moved to REDUX, but I looked back at one of my branches today with the more basic code shared above and had the issue back then with this code as well. Unfortunately didn't realize all the differences with code compilations till now. Understand that the issue is probably because of 2 compilers, but have no idea how to approach the issue/ why there would be a type error in one and not the other.
It works with debugger I think due to what was mentioned here:
React Native behavior different in simulator / on device / with or without Chrome debugging
Edit: wanted to mention I've already done a cache reset and deleted the build folder and rebuilt
I tried out your code and the promise rejecting is happing for me in both Android and iOS. It is being caused by the .flat() removing it stops the promise rejection from occurring.
Looking at the data that you are mapping there there doesn't seem to be a need to flatten the data as it comes back as a array of objects with no other arrays inside it.
Could removing the .flat() be a possible solution for you?
You can see here for more information about .flat() and how it is still experimental array.prototype.flat is undefined in nodejs
I would also consider returning something from your getData function when it makes an error or perhaps use a promise with it that way you can handle an error.
I have an Ionic 3 App that needs to use Force Update to all users of the App. I used this package called Ionic App Update. I created an small express server that will just serve the client for an updates.
Here is my code in my update.xml in the server or backend
<update>
<version>0.0.2</version>
<name>MyApp</name>
<url>http://192.168.214.27:3346/public/android-debug.apk</url>
</update>
and in my server.js
const express = require('express')
const app = express()
app.use('/public', express.static('public'))
app.get('/', (req, res) => {
shell.exec('./update.sh')
})
app.listen(3336, () => {})
The server is working fine there is no errors
But when I try to call the function of the App Update plugin the device crashes every time.
Here is my code in my app.component.ts
constructor() {
this.update()
}
update() {
console.log('Update check')
const updateUrl = 'http://192.168.214.27:3346/public/update.xml';
this.appUpdate.checkAppUpdate(updateUrl).then(() => { console.log('Update available') }).catch(err => {
console.log(err)
console.log('No update')
});
}
I am calling the update function every time the app component constructor is initialize.
But when I call the function the app crashes
Is this more of an android version issue or what?
Appreciate if someone could help.
Thanks in advance.
This line <version>0.0.2</version> seems to be the problem. This isn't the format for android version numbers. As per cordova's documentation it is
Expressed in major/minor/patch notation.
For example version 30.20.48 would be written as 302048.
Read More:
config.xml - https://cordova.apache.org/docs/en/latest/config_ref/
Android Platform Guide - https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html#setting-the-version-code
How to implement wait for screen elements load in ionic 2 hybrid mobile application using protractor.
As I am testing the IONIC Mobile application and not able to use wait without browser.sleep(), Because browser instance is not working in application.
Please help me to resolve this issue.
It's been a while, but I've had some success testing Ionic with Protractor with the following helper method:
waitForIonic: function () {
//Register a promise with protractor, so the browser waits for it
var deferred = protractor.promise.defer();
let clickBlock = element(by.css('.click-block-active'));
//if there's a click block, wait for it to be gone, otherwise just wait 1 sec
if (clickBlock.isPresent()) {
var untilClickBlockIsGone = ExpectedConditions.not(ExpectedConditions.visibilityOf(clickBlock));
browser.wait(untilClickBlockIsGone, 20000).then(() => {
browser.driver.sleep(1000);
//We've fulfilled the promise, so
deferred.fulfill();
});
}
else {
browser.driver.sleep(1000);
//We've fulfilled the promise, so
deferred.fulfill();
}
//Return the promise (which hasn't been fulfilled yet)
return deferred.promise;
}
Then use it like so:
//Wait for ionic animiations, Click logout
module.exports.waitForIonic().then(() => {
logoutButton.click();
});
I'm new to React Native and testing out PushNotificationIOS. But the checkpermission call is giving me error on Android.
ExceptionsManager.js:61 Cannot read property 'checkPermissions' of undefined
I'm guessing this is because I need to only use the component on iOS. How do I add a check of the OS to make the call only on iOS?
Here's my code:
componentWillMount: function() {
//-- need an OS check here??
PushNotificationIOS.checkPermissions((data)=> {
console.log("in comp will mount: checking for permission")
console.log(data.alert)
console.log(data.badge)
What I would suggest is splitting that platform specific code in separate files.
React Native will detect when a file has a .ios. or .android.
extension and load the relevant platform file when required from other
components.
MyFile.ios.js
MyFile.android.js
You can then require the component as follows:
const MyFile= require('./MyFile');
and use it like this
componentWillMount: function() {
//-- it would call the logic of what ever platform was detected automatically
MyFile.CallWhatEver();
And it will run the platform specific code.
Another way is the
Platform Module
React Native provides a module that detects the platform in which the
app is running. You can use the detection logic to implement
platform-specific code. Use this option when only small parts of a
component are platform-specific.
if(Platform.OS === 'ios')
There is also a platform.select that can accept any value
const Component = Platform.select({
ios: () => //function goes here,
android: () => require('ComponentAndroid'),
})();
link
https://facebook.github.io/react-native/docs/platform-specific-code.html