Develop Reference

Facebook SDK & custom button Login in react-native 0.60+ not working

i'm trying to implement Facebook login in my React-Native app but for some reason, it's throwing Cannot read property 'logInWithPermissions' of undefined.
I'm using React-Native 0.60.4.
I've downloaded FacebookSDK 5.3.0 (_Stable framework)
Attempted using Cocoapod but after some research, many people don't suggest using it because it messes up the project.
These are the steps I followed:
Downloaded FacebookSDK 5.3.0 (current latest up to 08/15/19)
Dropped the FBSDKCoreKit.framework, FBSDKLoginKit.framework and FBSDKShareKit.framework inside a folder as ~/Documents/FacebookSDK.
Also dropped those 3 framework files inside my project in XCode in the /Frameworks folder.
Just in case, I also added the path ~/Documents/FacebookSDK in the Framework Search Paths under Build Settings.
Made a Build on XCode, it's successful.
I download react-native-fbsdk from my react-native project. It downloads version 1.0.1.
I don't add libRTCFBSDK.a file in the Link binary with Libraries because it throws an error saying the FBSDKShareKit.h isn't found.
This is what I do on my AuthView.js, I add this to a simple bound onPress event in a TouchableOpacity.
const FBSDK = require('react-native-fbsdk');
const {
LoginManager,
} = FBSDK;
handleFacebookLogin() {
LoginManager.logInWithPermissions(['public_profile', 'publish_actions']).then(
(result) => {
if (result.isCancelled) {
console.log('Login cancelled')
} else {
console.log('Login success with permissions: ' + result.grantedPermissions.toString())
}
},
(error) => {
console.log('Login fail with error: ' + error)
}
)
}
Now, I notice that inside Facebook's FBLoginManager.js this is the function being called
logInWithPermissions(permissions: Array<string>): Promise<LoginResult> {
return LoginManager.logInWithPermissions(permissions);
},
Whenever I hover LoginManager, it says it's undefined. Why would this be undefined? When it's literally a const on top of the file
const LoginManager = require('react-native').NativeModules.FBLoginManager;
Can anyone help me? I've been struggling for 4 days now. I already attempted installing it with cocoapods, no success. Then doing react-native link react-native-fbsdk no success... a lot of people suggested NOT using link but doing it manually.
What else could I try? Thanks.

You must add libRTCFBSDK.a file in the Link binary with Libraries . To fix the 'FBSDKShareKit.h isn't found' issue change ~/Documents/FacebookSDK to $(HOME)/Documents/FacebookSDK

Esri proxy for Angular 7 project to screenshot

My team is currently working on a web application with angular 7 front end and .net core 2.1 back-end. One of tasks i need to do is to grab a screenshot and attach it to an email. The web application has an esri-map.
For the purposes of capturing the screenshot i am using html2canvas package. It works as expected except for the part that it doesn't capture the esri map content. It captures everything else except the esri-map.
For the html2canvas function call, i set the allowTaint property and useCORS property to true. I did some further research and i came across the proxy property for html2canvas. It made me think, that could be the reason why the map is not being generated. I cant seem to find any clear instructions on how to set up a proxy for arcgis. I was wondering if someone could help me with this.
any direction or help will be greatly appreciated.
following snippet is my html2canvas call.
html2canvas
html2canvas(document.getElementById('mapContainer'), { useCORS: true, logging: true, allowTaint: true }).then((canvas) => {
console.log("Document html2canvas");
console.log(document);
screenCapture = canvas.toDataURL();
]);
Update Jan 11 2018
I reached out to Esri regarding this and their response was , we dont support angular 7, we only support Javascript. I asked them , what if i use the print task instead of html2canvas .
This is my code snippet using print task. hope this might help someone.
This is a function i wrote in one of the services to capture the map. it seems to work fine. I don't know if there is any overhead of using the utility task url provided by arcgis or using your own server to render these screenshots. For some reason , it didn't work when i used the my servers print task utility URL.
note : in the below code snippet =&gt is the arrow function =>
screenCapture(): Promise<any> {
return new Promise((resolve, reject) => {
loadModules(['esri/tasks/PrintTask', 'esri/tasks/support/PrintTemplate', 'esri/tasks/support/PrintParameters']).then(([PrintTask, PrintTemplate, PrintParameters]) => {
try {
var printTask = new PrintTask({
url: 'https://utility.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task/',
updateDelay: '3000'
});
var template = new PrintTemplate({
layout: "map_only",
exportOptions: {
dpi: 96,
width: 1871,
height: 800
},
});
var params = new PrintParameters({
view: this.mapView,
template: template
});
printTask.execute(params).then(res => { console.log(res); resolve(res); });
}
catch (error) {
console.log(error);
reject(error);
}
});
});
} // end ofScreenCapture

You could try this library: https://github.com/WSDOT-GIS/arcgis-map-thumbnail-builder
I am not sure it is fully compatible with latest ArcGIS Javascript API but you probably can study the code sources to make it works with the version you are using.

Implementing a basic non-content-based app referral system using Branch on React Native

I've been looking at the Branch SDK docs for a while now and, while they do seem to cover every base, a lot of it seems vague to me.
My app is not (currently) content-oriented. In other words, it is more of a utility app than a UGC app (again, at least for now. In the future I plan to introduce more content but that's not really relevant right now).
I currently use Fabric for analytics (as well as Firebase) and I am trying to setup a basic sharing/referral system to:
A: Increase user-driven sharing+growth
B: Track said virality in Branch (and consequently Fabric)
This is what I currently am testing for the sharing action. All of the Branch docs use examples of sharing specific content- but I don't want that! I'm trying to figure out how to configure/change the setup to share the app itself, and not some content within the app. I've copied this from the React Native docs as a start, made a couple tweaks where it made sense, but now I feel lost.
inviteFriend = async () => {
// only canonicalIdentifier is required
let branchUniversalObject = await Branch.createBranchUniversalObject('ShareFromApp', {
automaticallyListOnSpotlight: true,
title: 'What do I put here...?',
contentDescription: 'This isn\'t content, I just want to share the app'
});
let shareOptions = { messageHeader: 'Check out Foobar', messageBody: 'Check out Foobar so we can connect!' }
let linkProperties = { feature: 'share', channel: 'App' }
let controlParams = {}
let {channel, completed, error} = await branchUniversalObject.showShareSheet(shareOptions, linkProperties, controlParams);
}
How do I finish setting this up for sharing the app?
I've already setup everything on the dashboard (URI Schemes, Branch Keys, Universal Links, App Links, etc...), and I also have initialized Branch in my app as suggested by the docs in App.js componentDidMount():
this._unsubscribeFromBranch = Branch.subscribe(({ error, params }) => {
if (error) {
console.error('Error from Branch: ' + error);
return;
}
// params will never be null if error is null
console.log('Branch params: ' + JSON.stringify(params));
if (params['+non_branch_link']) {
const nonBranchUrl = params['+non_branch_link'];
console.log('non-Branch link URL: ' + nonBranchUrl);
// Route non-Branch URL if appropriate.
return;
}
if (!params['+clicked_branch_link'])
return;
// Get title and url for route
let title = params.$og_title;
let url = params.$canonical_url;
let image = params.$og_image_url;
// Now push the view for this URL
this.navigator.push({ title: title, url: url, image: image });
});
(P.S. should I move this to after the authentication flow? I've already put the Branch.setIdentity(...) behind the auth flow)
These are some of the relevant npm packages I'm using
"react-native": "0.50.3"
"react": "16.0.0"
"react-native-branch": "2.1.1"
"react-native-fbsdk": "0.6.3"
"react-native-fabric": "0.5.1"
Feel free to ask for more info if I've missed anything important. Thanks! :)

How to implement in-app-purchase using Cordova plugin?

Please tell me the way to implement in-app-purchase using Cordova plugin.
I'm developing Android application using Cordova.
There are some in-app-purchase plugins but I decide to use Cordova Purchase Plugin.
I did some setups along README.md of In-App Purchase for PhoneGap / Cordova iOS and Android.
As a result, I could call the Plugin using Demo of the Purchase Plugin for Cordova with my little modification. (See the following, it is a portion of code.)
app.initStore = function() {
if (!window.store) {
log('Store not available');
return;
}
// Enable maximum logging level
store.verbosity = store.DEBUG;
// Enable remote receipt validation
// store.validator = "https://api.fovea.cc:1982/check-purchase";
// Inform the store of your products
log('registerProducts');
store.register({
id: 'myProductA',
alias: 'myProductA',
type: store.CONSUMABLE
});
// When any product gets updated, refresh the HTML.
store.when("product").updated(function (p) {
console.info("app.renderIAP is called");
app.renderIAP(p);
});
// Log all errors
store.error(function(error) {
log('ERROR ' + error.code + ': ' + error.message);
});
// When purchase of an extra life is approved,
// deliver it... by displaying logs in the console.
store.when("myProductA").approved(function (order) {
log("You got a ProductA");
order.finish();
});
// When the store is ready (i.e. all products are loaded and in their "final"
// state), we hide the "loading" indicator.
//
// Note that the "ready" function will be called immediately if the store
// is already ready.
store.ready(function() {
var el = document.getElementById("loading-indicator");
console.info(el + "ready is called")
if (el)
el.style.display = 'none';
});
// When store is ready, activate the "refresh" button;
store.ready(function() {
var el = document.getElementById('refresh-button');
console.info(el + "ready is called and refresh-button show?");
if (el) {
el.style.display = 'block';
el.onclick = function(ev) {
store.refresh();
};
}
});
// Refresh the store.
//
// This will contact the server to check all registered products
// validity and ownership status.
//
// It's fine to do this only at application startup, as it could be
// pretty expensive.
log('refresh');
store.refresh();
};
It did not show 'Store not available' that is shown when plugin is not available, show 'registerProducts', and 'refresh.'
(*Of course I added 'myProductA' to in-app Products on Google Play Developer Console.)
But I noticed that the below function is not called.
store.when("product").updated(function (p)
And also I couldn't understand what the parameter should fill in it, so I commented out the below.
(*I did remove the comment out, but it still not working.)
store.validator = "https://api.fovea.cc:1982/check-purchase";
I guess those things make something wrong.
I'm not sure what is stack on me, so my question is not clearly.
I want some clues to solve it... or I shouldn't implement in-app-purchase using Cordova plugin?
Please give me your hand.
(I'm not fluent in English, so I'm sorry for any confusion.)

You can try this plugin as an alternative: https://github.com/AlexDisler/cordova-plugin-inapppurchase
Here's an example of loading products and making a purchase:
inAppPurchase
.buy('com.yourapp.consumable_prod1')
.then(function (data) {
// ...then mark it as consumed:
return inAppPurchase.consume(data.productType, data.receipt, data.signature);
})
.then(function () {
console.log('product was successfully consumed!');
})
.catch(function (err) {
console.log(err);
});
It supports both Android and iOS.

Step for Integrate In-App billing in Phone-gap app.
1>> clone this project in your pc from this link In-App billing Library
2>> using CMD go to your root directory of your phonegap application
3>> then run this command cordova plugin add /path/to/your/cloned project --variable BILLING_KEY="QWINMERR..........RIGR"
Notes : for BILLING_KEY go to Developer console then open your application and go to Service& APIs for more info Please refer attached screenshots

Meteor: Authenticating Chrome Extension via DDP

I've built a Chrome Extension that takes a selection of text and when I right click and choose the context menu item, it sends that text to my Meteor app. This works fine, however, I can't figure out the process of using Oauth to authenticate users.
I'm using this package: https://github.com/eddflrs/meteor-ddp
Here is the JS within background.js (for Chrome Extension):
var ddp = new MeteorDdp("ws://localhost:3000/websocket");
ddp.connect().then(function() {
ddp.subscribe("textSnippets");
chrome.runtime.onMessage.addListener(function(message) {
ddp.call('transferSnippet', ['snippetContent', 'tag', snippetString]);
});
});
Here is the relevant portion of my other JS file within my Chrome Extension:
function genericOnClick(info) {
snippetString = [];
snippetString.push(info.selectionText);
var snippetTag = prompt('tag this thing')
snippetString.push(snippetTag);
chrome.runtime.sendMessage(snippetString);
}
And here is the relevant portion of my Meteor app:
'transferSnippet': function(field1, field2, value1, value2) {
var quickObject = {};
quickObject.field1 = value1[0];
quickObject.field2 = value1[1];
TextSnippets.insert({
snippetContent: value1[0],
tag: value1[1]
});
}
Basically I'm stuck and don't know how to go about making a DDP call that will talk to my Meteor app in order to authenticate a user

This question is a bit old, but if anyone is still looking for a solution. I had a similar problem that I was able to solve using the following plugin: https://github.com/mondora/asteroid. Here is an example of how to do it for twitter oauth:
https://github.com/mondora/asteroid/issues/41#issuecomment-72334353