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.
Related
I'm having a hard time getting WalletConnect 1.7.7 to work on React Native. I want to integrate in a crypto Wallet to handle dapps requests. Their documentation is...lacking. I'm following the "quickstart" in their docs, but listeners never gets fired.
import WalletConnect from "#walletconnect/client";
// Create connector
const connector = new WalletConnect(
{
// Required
uri: "wc:8a5e5bdc-a0e4-47...TJRNmhWJmoxdFo6UDk2WlhaOyQ5N0U=",
// Required
clientMeta: {
description: "WalletConnect Developer App",
url: "https://walletconnect.org",
icons: ["https://walletconnect.org/walletconnect-logo.png"],
name: "WalletConnect",
},
});
connector.on("session_request", (error, payload) => {
if (error) {
throw error;
}
// Handle Session Request
});
But session_request or any other event never get's fired. As per their documents that's all I need. Is there anything else I'm missing or perhaps it's not documented?
The documentation for Wallet Connect is very incomplete and there is very little information on the web. Are you using React Native with Expo? Because there the implementation changes. I don't see any flaws in your code. Test your integration from this website https://example.walletconnect.org/.
Using connect event instead of session_request on walllet connect works for me in react native.
connector.on('connect',(error,payload)=>{
console.log('eventtt',payload)
// Alert.alert('Connected')
})
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'm trying to create a react native app that allows the user to click a button and a call to their phone will be placed using the TWILIO API. I have it working from terminal by typing node make_call.js(name of file) but i want the user to be able to make the call when they want to by inputing their phone number and clicking a call button. Heres my code. the credentials are fake. Is this possible??
var accountSid = 'AC76d99966f35141f7c8585e31ed740480'
var authToken = '6470ce0905736f0f9da91456f088e97cc2'
var client = require('twilio')(accountSid, authToken);
client.calls.create({
url: 'https://demo.twilio.com/welcome/voice/',
to: '7781234564',
from: '6042322056',
}, function(err, call) {
if(err) {
console.log(err);
} else {
console.log(call.sid);
}
})
Twilio developer evangelist here.
You can actually build phone calling directly into your application using the Twilio Voice SDK.
There is already available to, built by the community, a React Native wrapper for the Twilio Voice SDK.
Let me know if that helps at all.
I've built a ReactNative app that uses redux, as well as Wix's react-native-navigation library (HIGHLY recommend btw), and am trying to improve the user experience when network connection is lost - really just a simple alert that lets the user know.
I've got all of my fetch() calls in one api.js lib file, and what I would love to do, is wrap each request with a function that checks for connection before fetching (as opposed to doing some sort of per-component implementation I've seen in other SO suggestions).
I've read a bunch about facebook's NetInfo (https://facebook.github.io/react-native/docs/netinfo.html) API, however there are still open issues on it w/ regards to the simple NetInfo.isConnected.fetch().then((isConnected) => {} use case (it always returns false, per the issues open).
I've tried something like this inside the fetch function:
static get(route, params, header) {
return NetInfo.isConnected.fetch().then((isConnected) => {
if ( isConnected )
{
// Run / return your API call
}
else
{
Alert.alert('No Internet Connection', 'Please connect and retry.',[{text: 'OK'}],{ cancelable: false });
}
});
}
I'm wondering if anyone has either successfully utilized the NetInfo api in this way, or if you've come across a better solution for this (likely) common problem.
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
}
);