I am using expo react native on a project and I am using the expo-notifications package within the project.
I have added "useNextNotificationsApi": true, to my app.json file
under the android object which is under the expo object so expo.android.useNextNotificationsApi : true.
I also have the experienceId set on the message I am sending to expo's server from my server, I am using the https://github.com/expo/expo-server-sdk-node package to do the sending.
messages.push({
to: red_user.fcm_token,
sound: 'default',
title: "Stylist Response",
body: "Stylist has agreed to fulfill the request",
data: {
experienceId: "#glamcentralng/GlamCentral",
order: order._id,
stylist_response: "agreed"
},
})
In my expo react native app I am using the expo-notifications package as I mentioned and I have the following setup in my class component.
import * as Notifications from 'expo-notifications';
.
.
.
.
componentDidMount() {
//Not working at all
Notifications.addNotificationReceivedListener( notification => {
console.log(notification);
this._handleNotification(notification)
});
//Working well
Notifications.addNotificationResponseReceivedListener(response => {
console.log(response);
});
this.registerForPushNotificationsAsyncNew();
}
The addNotificationReceivedListener does not receive the notification when it comes in, but I see it as a normal notification on my real Android device (I am NOT using an emulator). AS per the documentation when i click on the notification the addNotificationResponseReceivedListener should handle it and it does. So addNotificationReceivedListener does NOT work but addNotificationResponseReceivedListener works well.
One more thing to add is that I am getting a token in the function that does the registration as per the documentation.
Not sure how to fix this as I have checked other threads on here and github. Any help is appreciated.
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
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
So I just starting looking into React Native and I started off by creating a simple application for IOS & Android to understand the basics. All seems to be going well until I tried adding the Android native calendar into my app. Can someone help/explain where I'm going wrong?
I followed & completed the tutorial I found online: https://github.com/chymtt/ReactNativeCalendarAndroid. However the calendar won't load when I try running the app. This is what I get:
I found this error when debugging it in Chrome:
"Warning: Native component for "CalendarAndroid" does not exist"
My Code:
'use strict';
// External plugins
var React = require('react-native');
var Calendar = require('react-native-calendar-android');
var {
AppRegistry
} = React;
var BothDevices = React.createClass({
render() {
return (
<Calendar
width={300}
topbarVisible={true}
arrowColor="#dafacd"
firstDayOfWeek="monday"
showDate="all"
currentDate={[ "2016/12/01" ]}
selectionMode="multiple"
selectionColor="#dadafc"
selectedDates={[ "2015/11/20", "2015/11/30", 1448745712382 ]}
onDateChange={(data) => {
console.log(data);
}} />
);
}
});
AppRegistry.registerComponent('BothDevices', () => BothDevices);
If by any chance you are using react-native 0.19.0 or above, this is the result of a breaking change in RN#0.19.0 release affecting Android UI components.
Please update the component and refer to the new README https://github.com/chymtt/ReactNativeCalendarAndroid to apply the necessary changes
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();