We Keep Coding

react-native-fbsdk-next hidden modal on android

Calling LoginManager.logInWithPermissions(["public_profile"])on android opens the facebook modal, then when I click on continue, the modal closes, howewer it seems like a hidden modal is still present on the screen, since only after using the manual goback gesture is it possible to interact with the app again, then only a response is returned as follow {"isCancelled": true}.
It seems like the interface is bugged. Any help on this issue ?
I'm using the lastest "react-native-fbsdk-next": "^11.1.0" version.
Complete code
LoginManager.logInWithPermissions(["public_profile"]).then(
function(result) {
console.log('result', result)
if (result.isCancelled) {
console.log("Login cancelled");
} else {
console.log(
"Login success with permissions: " +
result.grantedPermissions.toString()
);
AccessToken.getCurrentAccessToken().then(
(data) => {
console.log('data', data)
if(data.accessToken) {
facebookConnect(
{
access_token: data.accessToken,
},
dispatch,
navigation
)
} else {
console.log('data', data)
Alert.alert(t(trans.error_message))
}
}
)
}
},
function(error) {
console.log("Login fail with error: " + error);
}
);

Check always location services are enabled or not in React Native (iOS and Android both)

I am working on react native application. There I have to fetch user locations like multiple if user moves/navigates from one place to other. This is working fine, but, If user disables location permission after some time like user goes to settings there disabled permission, I have to show some button like enable location and again Once user tap on that button It should ask to Request Permission for location.
But, If user first time gives permission and later in some time if he disables permission, The popup for Request permission not showing popup in Android on tap of button.
I am using following library to fetch user location details.
import Geolocation from 'react-native-geolocation-service';
// button on click method following
enableLocationHandler = () => {
if (Platform.OS === 'android') {
this.requestLocationPermissions();
} else {
Linking.openURL('app-settings:');
this.getLatitudeLongitude();
}
}
requestLocationPermissions = async () => {
if (Platform.OS === 'android') {
this.getLatitudeLongitude();
} else {
Geolocation.requestAuthorization();
this.getLatitudeLongitude();
}
}
getLatitudeLongitude() {
Geolocation.getCurrentPosition((position) => {
const initialPosition = JSON.stringify(position);
},
(error) => {
if (error.code === 1) {
this.setState({ errorMessage: 'Location permission is denied', isLoading: false });
Geolocation.clearWatch(this.watchID);
}
},
{ enableHighAccuracy: true, distanceFilter: 100, timeout: 20000, maximumAge: 1000 }
);
this.watchID = Geolocation.watchPosition((position) => {
// this.showLoader();
// console.log('position', position);
});
}
Any suggestions?

IN this plugin react-native-geolocation-service, There is no declared run time permission in android. that's by in android , permission dialog is not showing .
To resolve this issue add this permission before request for fetch location
import {PermissionsAndroid} from 'react-native';
async function requestAccessLocationPermission() {
try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS. ACCESS_FINE_LOCATION,
{
title: 'Application wants location Permission',
message:
'Application wants location Permission',
buttonNeutral: 'Ask Me Later',
buttonNegative: 'Cancel',
buttonPositive: 'OK',
},
);
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
} else {
}
} catch (err) {
console.warn(err);
}
}
this will helps you, it helps me.

How to see if device is Connected

I have an application that I used to connect to external devices through Bluetooth, using the BLE-PLX library.
I have a problem during the scan and connect, because not always it works.
This is the code that I use to connect one device through Bluetooth:
// First Scan
scans1() {
this.manager.startDeviceScan(null, null, (error, device) => {
if (error) {
this.manager.stopDeviceScan();
console.log("0.Error, retry connection.")
this.scans1()
//return;
}
if ((device.name == this.model_dx(this.props.Model)) || (device.name == this.model_sx(this.props.Model)))
{
this.manager.stopDeviceScan();
console.log("1.Device Founded - ", device.name)
this.setState({device1: device})
this.manager.connectToDevice(device.id)
.then(() => {
console.log("2.Launch Scans 2") // this is for connect to the second device.
this.scan2();
})
.catch(() => {
Alert.alert("Error " + "Connection Failed.");
Actions.homepage();
})
}
else if ((device.name == null )) {
this.manager.stopDeviceScan();
console.log("3.Device is - null - retry scan")
this.scans1();
} else {
this.manager.stopDeviceScan();
console.log("4.Error: Device not found.")
Actions.homepage();
}
});
Now what I would to know, how can I see if a device is connected or not? ( I don't know if could be another kind of error, I have tried to resolve any kind of problem).
Following the guide they said:
Check connection state of a Device.
isDeviceConnected(deviceIdentifier: DeviceId): Promise<boolean>
Parameters
deviceIdentifier (DeviceId) Device identifier.
Returns
Promise<boolean>:
Promise which emits true if device is connected, and false otherwise.
But I don't understand how can I use it.

I found the solution:
I can use:
this.manager.isDeviceConnected(device.id).then((res) => console.log(res))

Error getting PushManager Subscription - JavaScript

I've got the following code that registers a service worker and asks the user allow notifications. I'm getting an error after the user allows the push notifications where the promise returned by serviceWorkerRegistration.pushManager.getSubscription() is null. When I close the browser and force this function call again, it works without errors. I don't understand why. Here is my code:
window.vapidPublicKey = new Uint8Array([4, 45, ...]);
if (navigator.serviceWorker) {
navigator.serviceWorker.register('/serviceworker.js')
.then(function(reg) {
console.log('Service worker change, registered the service worker');
});
}
// Otherwise, no push notifications :(
else {
console.error('Service worker is not supported in this browser');
}
navigator.serviceWorker.ready.then((serviceWorkerRegistration) => {
console.log("ready");
serviceWorkerRegistration.pushManager
.subscribe({
userVisibleOnly: true,
applicationServerKey: window.vapidPublicKey
});
});
// application.js
// Let's check if the browser supports notifications
if (!("Notification" in window)) {
console.error("This browser does not support notifications.");
}
// Let's check whether notification permissions have already been granted
else if (Notification.permission === "granted") {
console.log("Permission to receive notifications has been granted");
}
// Otherwise, we need to ask the user for permission
else if (Notification.permission !== 'denied') {
Notification.requestPermission(function (permission) {
// If the user accepts, let's create a notification
if (permission === "granted") {
console.log("Permission to receive notifications has been granted");
saveSubscriptionToDatabase();
}
});
}
function saveSubscriptionToDatabase(){
navigator.serviceWorker.ready
.then((serviceWorkerRegistration) => {
console.log(serviceWorkerRegistration.pushManager.getSubscription());
serviceWorkerRegistration.pushManager.getSubscription()
.then((subscription) => {
$.post("/users/save_subscription", { subscription: subscription.toJSON() });
});
});
}
The error:
Uncaught (in promise) TypeError: Cannot read property 'toJSON' of null
at serviceWorkerRegistration.pushManager.getSubscription.then
UPDATE:
So I added the following button:
<input type="button" onclick="saveSubscriptionToDatabase();" value="test">
All of the JS and post request works as expected as long as I call the function from the button click but when I call it from the conditional that checks the permission state, it still fails just like before.
UPDATE 2:
I've tried writing the code again but from a different angle.
function registerServiceWorker() {
return navigator.serviceWorker.register('serviceworker.js')
.then(function(registration) {
console.log('Service worker successfully registered.');
return registration;
})
.catch(function(err) {
console.error('Unable to register service worker.', err);
});
}
function askPermission() {
return new Promise(function(resolve, reject) {
const permissionResult = Notification.requestPermission(function(result) {
resolve(result);
});
if (permissionResult) {
permissionResult.then(resolve, reject);
}
})
.then(function(permissionResult) {
if (permissionResult !== 'granted') {
throw new Error('We weren\'t granted permission.');
}
});
}
function subscribeUserToPush() {
return navigator.serviceWorker.register('serviceworker.js')
.then(function(registration) {
const subscribeOptions = {
userVisibleOnly: true,
applicationServerKey: new Uint8Array("key goes here")
};
return registration.pushManager.subscribe(subscribeOptions);
})
.then(function(pushSubscription) {
console.log("never called");
console.log('Received PushSubscription: ', JSON.stringify(pushSubscription));
return pushSubscription;
});
}
registerServiceWorker();
askPermission();
subscribeUserToPush();
The last part of the command chain in subscribeUserToPush() where I have console.log("never called"); never executes and has no errors. I'm testing this in Chrome 67. I am positive that registration.pushManager.subscribe(subscribeOptions); is called.

So after hours of trying different things I finally figured out the problem and it was annoyingly simple. So each time you call navigator.serviceWorker.register('serviceworker.js') you must put a / before the file name. The service worker will register just fine without the / but grabbing the subscription will fail. The examples that you find in the documentation do not include the /.
So, the code should've looked like this:
navigator.serviceWorker.register('/serviceworker.js')
Tada now it works....

Send data using react-native-ble-plx package

In order to realize a project of connected objects. I need to implement a Bluetooth connection between the various devices.
Here, the goal is to create an application in React Native and then send data from this application to my Raspberry. This Raspberry has a connected HC-08 module that takes care of Bluetooth communication.
Now, I would like to use react-native-ble-plx library to send data through Bluetooth. I'm able to connect my Android to the module. But I don't understand how to send data ...
Here's my code :
constructor() {
super()
this.manager = new BleManager()
}
componentWillMount() {
console.log("mounted")
const subscription = this.manager.onStateChange((state) => {
if (state === 'PoweredOn') {
this.scanAndConnect();
subscription.remove();
}
}, true);
}
scanAndConnect() {
this.manager.startDeviceScan(null, null, (error, device) => {
if (error) {
// Handle error (scanning will be stopped automatically)
return
}
console.log(device.name)
// Check if it is a device you are looking for based on advertisement data
// or other criteria.
if (device.name === 'SH-HC-08') {
// Stop scanning as it's not necessary if you are scanning for one device.
this.manager.stopDeviceScan();
console.log(`Found ${device.name}`)
this.setState({
device: device
})
// Proceed with connection.
device.connect()
.then((device) => {
console.log(device)
return device.discoverAllServicesAndCharacteristics()
})
.then((device) => {
console.log(device)
})
.then((result) => {
// Do work on device with services and characteristics
//console.log(this.manager.characteristicsForService("00001800-0000-1000-8000-00805f9b34fb"))
console.log(result)
console.log("connected")
})
.catch((error) => {
// Handle errors
console.log(error)
});
}
});
}
send() {
this.manager.writeCharacteristicWithResponseForDevice("58:7A:62:4F:EF:6D",
this.device.serviceUUIDs[0],
this.manager.characteristicsForDevice(this.device.id),
"ok")
.catch((error) => {
console.log('error in writing data');
console.log(error);
})
}
I would like to have a send method that will send data whenever I want to. But I don't really understand how it works :/
Could someone help me or even give me an example ? I would be really appreciated.
Best regards.

I had success implementing the following:
scanAndConnect() {
this.manager.startDeviceScan(null, null, (error, device) => {
this.info("Scanning...");
console.log(device);
if (error) {
this.error(error.message);
return
}
if (device.name ==='MyDevice') {
this.info("Connecting to Tappy");
this.manager.stopDeviceScan();
device.connect()
.then((device) => {
this.info("Discovering services and characteristics");
return device.discoverAllServicesAndCharacteristics()
})
.then((device) => {
this.info(device.id);
device.writeCharacteristicWithResponseForService('12ab', '34cd', 'aGVsbG8gbWlzcyB0YXBweQ==')
.then((characteristic) => {
this.info(characteristic.value);
return
})
})
.catch((error) => {
this.error(error.message)
})
}
});
Where I use 12ab, insert the UUID of your BLE service. Similarly, where I use 34cd, insert the UUID of your BLE characteristic. Lastly, include a base64 encoding of whatever message you're trying to send where I have aGVsbG8gbWlzcyB0YXBweQ==.
Hope this helps.