We're doing this in the web version of our react application and our native Android app so our setup and everything is working fine. I'm trying to implement sharing an action in react-native using react-native-fbsdk. I'm following the Android code because it looks the closest to the react-native-fbsdk code.
Should I be using ShareApi.share or something else?
I tried creating an instance of ShareOpenGraphContent to use with ShareApi.share, but there's no constructor.
I wish they would provide more thorough documentation :s
Based on the code my colleague used for the ShareApi on Android it seems like react-native-fbsdk is missing a few things related to sharing actions.
ShareOpenGraphContent isn't directly exported from react-native-fbsdk so this
import { ShareOpenGraphContent } from 'react-native-fbsdk';
Actually doesn't work. There must be some way to use the ShareApi in react-native-fbsdk to share an action...I'm just missing something.
Someone help...please.
Thanks!!
I figured it out! I had to manually create an instance of the ShareOpenGraphContent object which has 3 mandatory properties: contentType, action and previewPropertyName. The react-native-fbsdk doesn't currently have a constructor for this object type.
ShareApi.canShare isn't mandatory, but it checks to ensure you have the correct permissions before trying to share. This would allow you to get the user logged in before trying in case their token expired, or the user hasn't agreed to the needed permissions yet.
const ogAction = new ShareOpenGraphAction('<your_facebook_namespace>' + ':' + '<your_facebook_action>');
ogAction.putString('song', 'https://<url_to_your_song_app_etc>');
ogAction.putString('place', '<fbPlacePageID>'');
ogAction.putNumber('fb:explicitly_shared', 1); // Normally this is a boolean, but putNumber with a value of 1 works
// Manually create an instance of ShareOpenGraphContent (no constructor in the API)
const ogContent = {
contentType: 'open-graph',
action: ogAction,
previewPropertyName: 'song',
};
ShareApi.canShare(ogContent).then((canShare) => {
if (canShare)
return ShareApi.share(ogContent, '/me');
}).then(
function(result) {
// Shared successfully
},
function(error) {
// Failed to share
}
);
Related
I am working on the latest version of React-native. I cannot find any documentation to get the card nonce using the application_id and location_id of SquareUp.
Please suggest me how to integrate this payment method with React-Native application.
Also, suggest me package works best for this.
Use this: https://developer.squareup.com/docs/payment-form/payment-form-walkthrough
up to step 1.3 to generate the nonce in html
Host this page on github pages and force it to server over https (http wont work with square)
Embed your github page in WebView React Native or Expo. Retrieve the nonce from WebView and pass it to your API where the rest can be taken care of with the square api.
In the Quick-Start you'll find the method onCardNonceRequestSuccess(cardDetails) which is the callback for returning your information from Square. On that cardDetails parameter you'll find a key "nonce" that will contain your nonce that you need to send to your back end for processing.
async onCardNonceRequestSuccess(cardDetails) {
if (this.chargeServerHostIsSet()) {
try {
await chargeCardNonce(cardDetails.nonce);
SQIPCardEntry.completeCardEntry(() => {
showAlert('Your order was successful',
'Go to your Square dashbord to see this order reflected in the sales tab.');
});
} catch (error) {
SQIPCardEntry.showCardNonceProcessingError(error.message);
}
} else {
SQIPCardEntry.completeCardEntry(() => {
printCurlCommand(cardDetails.nonce, SQUARE_APP_ID);
showAlert(
'Nonce generated but not charged',
'Check your console for a CURL command to charge the nonce, or replace CHARGE_SERVER_HOST with your server host.',
);
});
}
}
Link to repo of above code
The example application should show most of what is necessary for integrating into a React Native application. The main piece that you need to change is the chargeCardNonce() function found here to POST that nonce to your backend.
I have a 3 part question from important to less important:
Does someone know if there is a package to do phone calls trough the internet as Whatsapp and Facebook do?
Would it even be possible to do it without a phone number?
For example, only knowing someone's device id.
And can you even make your "ring page" custom? So adding functionalities while calling.
Thank you in advance!
Yes this is possible. There are plenty of ways to attack this but I would recommend using a React Native wrapper for Twilio (https://github.com/hoxfon/react-native-twilio-programmable-voice).
import TwilioVoice from 'react-native-twilio-programmable-voice'
// ...
// initialize the Programmable Voice SDK passing an access token obtained from the server.
// Listen to deviceReady and deviceNotReady events to see whether the initialization succeeded.
async function initTelephony() {
try {
const accessToken = await getAccessTokenFromServer()
const success = await TwilioVoice.initWithToken(accessToken)
} catch (err) {
console.err(err)
}
}
// iOS Only
function initTelephonyWithUrl(url) {
TwilioVoice.initWithTokenUrl(url)
try {
TwilioVoice.configureCallKit({
appName: 'TwilioVoiceExample', // Required param
imageName: 'my_image_name_in_bundle', // OPTIONAL
ringtoneSound: 'my_ringtone_sound_filename_in_bundle' // OPTIONAL
})
} catch (err) {
console.err(err)
}
For that approach I believe you have to have a phone number but you can build out the ui however you like.
If you are not into the Twilio approach, you can use pure JS libraries to do the trick such as SipJS.
There are also tutorials on Youtube which can lead you through the process like this.
I recommend you Voximplant, https://voximplant.com/docs/references/articles/quickstart,
it's easy to use and has clear documentation.
I set the aurelia-store up as per the docs; in the main.ts at the bottom of all the plugins (from the skeleton app with dotnet core) I have as the last plugin defined:
aurelia.use.standardConfiguration()
.plugin(PLATFORM.moduleName('aurelia-store'), { initialState })
Then my app needs to login the user and save their bearer token.
await aurelia.start();
await aurelia.setRoot(PLATFORM.moduleName("modules/login/login.vm"));
In the login class I am trying to use the #connectTo decorator. However it never sets the dependency property. So I am stuck on this simple part at the very start of the app and my work already suggested not to use Aurelia but I said I wanted to for fast POC.
I've copied the docs exactly and still have the issue. Notably, I had to turn off strictNullCheck in the tsconfig to make the doc code parse.
Login.ts
#connectTo({
target: 'state',
selector: {
userToken: (store) => store.state.pipe(pluck('userToken')),
loginRedirected: (store) => store.state.pipe(pluck('loginRedirected'))
}
})
export class Login {
static inject = [Aurelia, Store]
public state: State;
app: Aurelia;
constructor(Aurelia, private store: Store<State>) {
this.app = Aurelia
store.registerAction('ChangeUserToken', this.changeUserToken)
store.registerAction('LoginRedirected', this.loginRedirect)
}
activate() {
... this.state is always undefined.
if (!this.state.loginRedirected) { //error
}
}
}
I expect the this.state property to have a state object populated from the global state store with the initialState values.
e.g.
{ userToken: "", loginRedirected: false }
I just need to set the userToken in login and retrieve it in app.js. This is not possible; what could be missing to make this basic function actually work?
ConnectTo is a helper decorator to avoid manual state subscriptions since the Stream of states is a vanilla rxjs observable. If you take a closer look at the official plugin documentation you will notice that it sets up the subscription in a different lifecycle hook.
That said connectTo cant solve everything and with manual subscription you have the most flexibility.
Dont give up with your quest you just had bad luck of falling into a more complicated scenario of startup timing right at the begin which easy enough might bite you with lots of other Frameworks/Libraries as well. Also make sure to visit the official discourse.aurelia.io forum and post back solutions to SO.
I want to be able to open Skype with a call setup with a specific username from my react-native app. I had planned to use linking to do this, For example:
onLaunchPress = () => {
const { user } = this.props
Linking.openURL('https://skype.com/' + user)
.catch((error) => console.log(error))
})
This is not enough to add the correct query parameters, However I am unable to view the documentation on this as the page doesn't load here:
https://dev.skype.com/skype-uri
Any advice would be greatly appreciated, I am also concerned as to whether this is actually possible given what is posted here:
https://answers.microsoft.com/en-us/skype/forum/skype_web-skype_messms-skype_instamessms/open-skype-for-web-from-a-react-native-app/eef6a4c6-6b05-4566-b9e1-2f13f9d05606
According to this, you should be able to open Skype with the following:
Linking.openUrl('skype:');
You should also be able to pass the User in too with:
Linking.openUrl(`skype:${user}`);
If I want to return custom error from Rules I simply do callback(new UnauthorizedError('Custom error message here')) but how do I do the same thing with Hooks?
callback('error message');
callback(new Error('error message'));
Those didn't worked and "UnauthorizedError" is undefined in Hooks. Whatever I do, on front-end side I always get "WE'RE SORRY, SOMETHING WENT WRONG WHEN ATTEMPTING TO SIGN UP." and when I inspect result of requested I see that there is no difference, each time "InternalExtensibilityError" comes.
Why do I want to return error from Hooks? I run extra validation for sign-up there.
Now it is possible to send custom error messages in hooks.
I extracted below code snippet from Auth0's documentation on hooks.
module.exports = function (user, context, cb) {
const isUserDenied = ...; // determine if a user should be allowed to register
if (isUserDenied) {
const LOCALIZED_MESSAGES = {
en: 'You are not allowed to register.',
es: 'No tienes permitido registrarte.'
};
const localizedMessage = LOCALIZED_MESSAGES[context.renderLanguage] || LOCALIZED_MESSAGES['en'];
return cb(new PreUserRegistrationError('Denied user registration in Pre-User Registration Hook', localizedMessage));
}
};
Here is the original link (https://auth0.com/docs/hooks/extensibility-points/pre-user-registration)
At the moment, returning custom errors from hooks to the top-level API, /dbconnections/signup in this case is not possible in Auth0. This is documented in the bottom of this page.
Note that Hooks is still in Beta, and this enhancement request is one of the most asked for features and it is currently in our backlog. We cannot give an ETA for this yet. You can submit your feedback to the Product here.