Develop Reference

React Native (Android) Accessing foreground location updates triggers "Not Authorized to use background location services" error

Background
Hey everyone,
I am building a group bicycle riding app that shows users where they are in a map in real time.
Short app explanation is: You go out with friends for hiking, cycling, etc, and you want to know where you and your friends are in real time.
The only requirement is a foreground location access when the app is in use, no more. Then, I want to update each member's location using Location.startLocationUpdatesAsync().
Sample Code
import React from 'react'
import { Text, TouchableOpacity } from 'react-native'
import * as Location from 'expo-location';
import * as TaskManager from 'expo-task-manager';
const LOCATION_TASK_NAME = 'background-location-task';
TaskManager.defineTask(LOCATION_TASK_NAME, ({ data, error }) => {
if (error) {
console.log(error);
return;
}
if (data) {
const { locations } = data;
console.log(data);
}
});
const requestPermissions = async () => {
const { status } = await Location.requestForegroundPermissionsAsync();
if (status === 'granted') {
await Location.startLocationUpdatesAsync(LOCATION_TASK_NAME, {
accuracy: Location.Accuracy.Balanced,
});
}
};
const HomeScreen = () => {
return (
<TouchableOpacity onPress={requestPermissions}>
<Text>Enable Location</Text>
</TouchableOpacity>
)
}
export default HomeScreen
Problem
Foreground permission (Location.requestForegroundPermissionsAsync()) popup appears on the screen with no problem. Access is granted. When run, this error comes up:
Error: Not authorized to use background location services.
The problem is I need a background permission to be able to update location information in real time. When I try to request for background permission with requestBackgroundPermissionsAsync(), this error comes up:
Error: You need to add `ACCESS_BACKGROUND_LOCATION` to the AndroidManifest.
I don't know if AndroidManifest file should be changed with expo apps, but I added permissions key to android inside app.json file like so:
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#FFFFFF"
},
"permissions":[
"ACCESS_FINE_LOCATION",
"ACCESS_BACKGROUND_LOCATION",
"ACCESS_COARSE_LOCATION"
]
}
I have looked into an open issue on expo's github repo. It does not seem to help. I have 0 intention of putting my app on Play Store.
Questions
Do I need to go through google's verification process by filling up the form, taking video of my app which is under development and won't ever be put on Play Store?
Am I even allowed to test the feature before even thinking about releasing it?
What approach should I take to just get location updates?
Is there any workaround?
What I tried
requesting for Background Location acess by Location.requestBackgroundPermissionsAsync()
putting permissions key inside app.json:
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#FFFFFF"
},
"permissions":[
"ACCESS_FINE_LOCATION",
"ACCESS_BACKGROUND_LOCATION",
"ACCESS_COARSE_LOCATION"
]
}
checking for background permission and asking for it if not granted:
const { fr_status } = await Location.requestBackgroundPermissionsAsync();
if (fr_status === 'granted' && await Location.isBackgroundLocationAvailableAsync()) {
await Location.startLocationUpdatesAsync(LOCATION_TASK_NAME, {
accuracy: Location.Accuracy.Balanced,
});
} else {
const {bg_status} = await Location.requestBackgroundPermissionsAsync();
if (bg_status === 'granted') {
await Location.startLocationUpdatesAsync(LOCATION_TASK_NAME, {
accuracy: Location.Accuracy.Balanced,
});
}
}
Development environment
Managed app built with expo 4.13.0.
Android Emulator 31.1.4
Android SDK Platform Tools 31.0.3
Android 10.0 Q, API level 29, revision 5
Node.js v16.13.0
npm version 8.1.0
react-native version 0.64.3
Windows 10 Pro version 20H2

Get Contact React Native

I want to make a screen page that can be navigated in the contact list on my phone. so I made a native module for get contact, It worked but for android 10 and below. For android 11 he can't run. The function I created can't get contact data.I've made sure all the permissions are there. Below is the code I made
const getChooseContact = () => {
const { ContactsWrapper } = NativeModules;
ContactsWrapper.getContact()
.then((contact) => {
setPhoneNumber(contact.phoneNumber);
})
.catch((error) => {
console.log(error);
});
};
const requestMediaPermission = async () => {
try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.READ_CONTACTS,
);
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
getChooseContact();
} else {
setErrorMessage('Access media permission denied');
}
} catch (err) {
console.log(err);
}
};

This is majorly because in API 30 and above we can no-longer interact with external modules without specifically being allowed the interaction.
This can happen in two ways one using the <uses-permission android:name="android.permission.QUERY_ALL_PACKAGES" /> inside the androidmanifest.xml though this is discouraged since it can have your app rejected Read this kindly https://support.google.com/googleplay/android-developer/answer/10158779#zippy=%2Cpermitted-uses-of-the-query-all-packages-permission
to fix your issue
inside build.gradle under android update class paths to this :
classpath 'com.android.tools.build:gradle:3.5.4' this allows for the next step to be recognised during bundling otherwise your will get an error
inside androidmanifest.xml before the application tag add this
<queries>
<!-- Browser -->
<intent android:label="View Contact">
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<data android:mimeType="vnd.android.cursor.item/person" android:host="contacts" />
</intent>
</queries>

How to implement signInWithEmailLink in React Native using rnfirebase dynamic links and auth modules v6

What I want to do: On reset password button click send a letter to user's email using auth().sendSignInLinkToEmail(<user email>, actionCodeSettings);
After user clicks on the received link he gets navigated to the app and using dynamicLinks().getInitialLink() to get the email link he will be loged in with auth().signInWithEmailLink() method.
Here is my implementation for it:
Reset Password Screen
const handleContinue = async () => {
await FirebaseAuth.resetPassword(email);
await AsyncStorage.setItem('#email', email);
};
FirebaseAuth.js
const actionCodeSettings = {
handleCodeInApp: true,
// URL must be whitelisted in the Firebase Console.
url: 'https://examplemoxie.page.link/password_reset',
iOS: {
bundleId: '<my bundle id>',
},
android: {
bundleId: '<my bundle id>',
installApp: true,
},
};
class FirebaseAuthApp {
constructor(firebase) {
this.firebase = firebase;
}
resetPassword = emailAddress =>
auth()
.sendSignInLinkToEmail(emailAddress, actionCodeSettings)
.catch(error => logger(error));
...
}
At this point everything works pretty fine, I'm receiving an email, by clicking on it I'm getting navigated into my app and even able to read the initial link by this piece of code:
App.js
const App = () => {
const user = useAuthStatus();
useEffect(() => {
const handleDynamicLink = async link => {
// Check and handle if the link is a email login link
alert(JSON.stringify(link));
if (auth().isSignInWithEmailLink(link.url)) {
try {
// use the email we saved earlier
const email = await AsyncStorage.getItem('#email');
await auth().signInWithEmailLink(email, link.url);
/* You can now navigate to your initial authenticated screen
You can also parse the `link.url` and use the `continueurl` param to go to another screen
The `continueurl` would be the `url` passed to the action code settings */
} catch (e) {
alert(e);
}
}
};
const unsubscribe = dynamicLinks().onLink(handleDynamicLink);
/* When the app is not running and is launched by a magic link the `onLink`
method won't fire, we can handle the app being launched by a magic link like this */
dynamicLinks()
.getInitialLink()
.then(link => link && handleDynamicLink(link));
// When the component is unmounted, remove the listener
return () => unsubscribe();
}, []);
Link
https://testmoxiegirl.firebaseapp.com/__/auth/action?apiKey=<api key>&mode=signIn&oobCode=<oob code>&continueUrl=https://examplemoxie.page.link/password_reset&lang=en
My dynamic links settings
short URL link - https://examplemoxie.page.link/password_reset
dynamic link - https://moxiegirl.page/reset_password
behavior for Android - Open the deep link in your Android App / Open custom URL for not installed App
And here comes the problem, the link which i get in App.js file from getInitialLink() method is the same as my dynamic link in firebase dynamic link settings and using it for signInWithEmailLink will fail with Invalid email link error. For this to work i need to get a link sent to email but I have no clue on what I'm doing wrong.
My environment:
"react-native": "0.64.2",
"#react-native-firebase/app": "^12.4.0",
"#react-native-firebase/auth": "^12.4.0",
"#react-native-firebase/dynamic-links": "^12.4.0",

So, before posting this question I decided to check everything once more and I found a problem.
In my case, instead of using packageName in my FirebaseAuth.js
I was using bundleId for the Android settings, assuming that for the Android and iOS it should be the same keys.
Before:
const actionCodeSettings = {
...
android: {
bundleId: '<my bundle id>',
installApp: true,
},
};
After:
const actionCodeSettings = {
...
android: {
packageName: '<my bundle id>',
installApp: true,
},
};

Phonegap / Cordova Push Notification not waking up screen

I've been doing some research and android seems a bit stricter on waking up screen (light up device screen) when push notification is received.
What I would like to achieve is like a text message notification that it would turn on the screen, sound and vibrate. But my push notification only chime or vibrate. Is waking up the device from sleeping possible in cordova? I am using pubnub for the backend.
Here's my sample fcm payload:
var pushPayload = {
"message": "Some message",
"user_id": "1",
"pn_gcm" : {
"priority" : "high",
"data" : {
"title":"Notification title",
"body":"You are a winner!",
"room" : "Room name",
//"count" : 5,
"content-available":"1",
"force-start": "1",
"priority":2
}
}
};
And here's my piece of AndroidManifest.xml
<uses-sdk android:minSdkVersion="19" android:targetSdkVersion="27" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.WAKE_LOCK" />
<uses-permission android:name="android.permission.VIBRATE" />
I am using phonegap-plugin-push.

Ok, I ended up creating my own cordova plugin just to handle on waking up screen. And here's the code that I used in my plugin:
Context context = this.cordova.getActivity().getApplicationContext();
PowerManager powerManager = (PowerManager) context.getSystemService(context.POWER_SERVICE);
boolean result= Build.VERSION.SDK_INT>= Build.VERSION_CODES.KITKAT_WATCH&&powerManager.isInteractive()|| Build.VERSION.SDK_INT< Build.VERSION_CODES.KITKAT_WATCH&&powerManager.isScreenOn();
if (!result){
PowerManager.WakeLock wl = powerManager.newWakeLock(PowerManager.FULL_WAKE_LOCK |PowerManager.ACQUIRE_CAUSES_WAKEUP |PowerManager.ON_AFTER_RELEASE,"MH24_SCREENLOCK");
wl.acquire(10000);
PowerManager.WakeLock wl_cpu = powerManager.newWakeLock(PowerManager.PARTIAL_WAKE_LOCK,"MH24_SCREENLOCK");
wl_cpu.acquire(10000);
}`
So, in the notification event, I called my plugin like this:
`
push.on('notification', function(data) {
//call wakeup screen
window.plugins.wakeUpScreen.wakeup(function() {
console.log('Wake up!');
}, function(err) {
console.log('Wake up error: ' + err);
});
}); `

Android devices have their own notification preferences and some cannot be overridden by your app. The "Ambient Display" setting will have the screen wake upon notification, but this is a feature that must be turned on in the phone settings.

plug phonegap-plugin-push to Firebase

Quickly my environment :
Phonegap 8.0.0
phonegap-plugin-push 2.1.2 (the last version is not compatible to phonegap 8.0.0)
At that time :
I manage to receive push notification generated from my local machine via "phonegap push " in the phonegap simulator
I can’t receive push notif from Firebase in the phonegap simulator (is it possible ?)
When I build the app for Android, she crash at start (blank page) due to the phonegap-plugin-push associated code in my app (if I comment it, she start normally)
My code (VueJS framework)
console.log('calling push init');
window.gtvapp.push = PushNotification.init({
'android': {
// 'senderID': 'XXXXXXXX'
},
'browser': {},
'ios': {
'sound': true,
'vibration': true,
'badge': true,
'alert': true
// 'senderID': 'xxxxxxxx'
},
'windows': {}
})
console.log('after init')
window.gtvapp.push.on('registration', function(data) {
console.log('registration event: ' + data.registrationId)
var oldRegId = window.localStorage.getItem('registrationId')
if (oldRegId !== data.registrationId) {
window.localStorage.setItem('registrationId', data.registrationId)
// Post registrationId to your app server as the value has changed
// TODO
}
})
window.gtvapp.push.on('error', function(e) {
console.log('push error = ' + e.message)
})
// (...)
let router = this.$router
window.gtvapp.push.on('notification', function(data) {
console.log('notification event')
console.log(JSON.stringify(data))
if (device.platform === 'Android') {
navigator.notification.alert(
data.message, // message
function() {
console.log(window.location.pathname)
console.log(data.additionalData.path)
// window.localStorage.setItem('pushpath', data.additionalData.path)
router.push(data.additionalData.path)
},
data.title,
'En savoir plus'
)
}
})
This code works perfectly as attended on simulator "phonegap serve" + local push notif "phonegap push "
Questions :
step 1 : is it theoricaly possible to receive Firebase notif in a "phonegap serve instance"
step 2 : is just "google-services.json" file required to correctly configure the firebase registration
Thanks a lot

step 1 : is it theoricaly possible to receive Firebase notif in a "phonegap serve instance"
No it’s not, you have to build the app and install the apk on the device
step 2 : is just "google-services.json" file required to correctly configure the firebase registration
Yes.
Just on thing for phonegap 8 :
<platform name="android">
<resource-file src="google-services.json" target="app/google-services.json" />
</platform>
the "app/" is important.