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.
Related
I'm on-boarding users onto Stripe connect. My node server generates a temporary HTTPS URL so that customers can sign on. According to their docs I need to provide a URL for when they complete the application.
https://stripe.com/docs/api/account_links/create#create_account_link
I have an Expo application. The user will open up the URL in their browser. However when they complete their application I would like them to go back to Expo App. If I try to use expo://MYAPP/ as the return_url, Stripe does not recognize the URL schema.
Does anyone have an idea how i can return the user back into my application after completing their on-boarding done via the browser?
For anyone one out there who runs into this post, this is was my solution. Your app has to link to a website. I am using Expo, but this is the React code to generate the link.
import * as WebBrowser from 'expo-web-browser';
import * as Linking from 'expo-linking';
const openPage = async () => {
try {
const result = await WebBrowser.openAuthSessionAsync(
`${url}?linkingUri=${Linking.createURL('/?')}`,
);
let redirectData;
if (result.url) {
redirectData = Linking.parse(result.url);
}
setstate({ result, redirectData });
} catch (error) {
console.log(error);
}
};
When you load the site, make sure to pass the URL that was generated from your backend
Backend code:
stripe.accountLinks
.create({
type: 'account_onboarding',
account: accountID,
refresh_url: `https://website.com/refresh`,
return_url: `https://website.com/return`,
})
When the user has the site open, have a button that redirects to the stripe URL.This is how i thought it went first
App -> Stripe connect
instead you have to approach it like this
App -> Website -> Stripe connect
I want to use Jitsi-meet in react native for video conferencing what is the best method for implementation.
Currently I am following this link https://jitsi.github.io/handbook/docs/intro
But in this they have used native code for android and iOS
Can someone please suggest me how should I proceed further.
The link you provided is the documentation of the jitsi native SDK. If you want to implement this SDK in a react-native project, you should have a look at react-native-jitsi-meet plugin.
As you can read in the documentation of the plugin, just install the plugin, and you will be able to initiate calls with your room url :
componentDidMount() {
setTimeout(() => {
const url = 'https://your.jitsi.server/roomName'; // can also be only room name and will connect to jitsi meet servers
const userInfo = { displayName: 'User', email: 'user#example.com', avatar: 'https:/gravatar.com/avatar/abc123' };
JitsiMeet.call(url, userInfo);
/* You can also use JitsiMeet.audioCall(url) for audio only call */
/* You can programmatically end the call with JitsiMeet.endCall() */
}, 1000);
}
Currently trying to open whatsapp from my React Native app with Expo. I have the code below:
let url = 'whatsapp://app';
Linking.openURL(url).then((data) => {
console.log('WhatsApp Opened');
}).catch((err) => {
console.log(err);
alert('Make sure Whatsapp installed on your device');
});
The error I get is this:
Error: Could not open URL 'whatsapp://app': No Activity found to handle Intent { act=android.intent.action.VIEW dat=whatsapp://app flg=0x10000000 }
However when I change the url to send, it opens whatsapp fine?
whatsapp://send?phone=3464478983
I am trying to only open whatsapp without a send param
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.
How do you open a Bitcoin URL in a react native app? I am using React Native Linking to detect if there are any apps on the phone that can open a Bitcoin URL formatted according to BIP21. I have 3 apps installed that should handle it:
1) Coinbase
2) Breadwallet
3) Blockchain.info wallet
But it's not opening. Here's the code:
async _openWallet() {
const coinURL = 'bitcoin:15bMc6sQTiQ5jSqoRX3JzatAbQqJaffqup';
try {
const supported = await Linking.canOpenURL(coinURL);
if (supported) {
Linking.openURL(coinURL);
} else {
console.log('Could not find a compatible wallet on this device.');
}
} catch (error) {
console.log(error);
}
}
supported keeps returning false, which causes "Could not find a compatible wallet..." to execute. The weird thing is if I click on a Bitcoin URL on any random website via the Chrome / Safari browser, I get a popup that asks me if I want to open the URL in one of the above apps. So only URLs on websites are opening, but not URLs from inside react native code.
Any ideas?
Looks like every URI scheme you want to use at runtime must be defined up-front in Info.plist. Found the answer here: React Native: Linking API not discovering Uber app