Example to Make a Phone Call in React Native App

App.js Skiptocontent Menu Menu Contents1ReactNative PhoneCalls2HowtoMakeaPhoneCallinReactNative?3ToMakeaReactNativeApp4InstallationofDependency5CodetoMakeaPhoneCalls5.1App.js6KnownIssueforiOS7ToRunthe ReactNativeApp8OutputScreenshots8.1Android8.2IOS9OutputinOnlineEmulator ReactNative PhoneCalls HereisanExampletoMakeaPhoneCallinReactNativeApp.TomakeaPhoneCallfromReactNativeAppwewilluse react-native-phone-call.Withthehelpofthis example,Youcanprovideonetabcallfeaturetotheusersofyourapplication. Youcanalsovisit MakePhoneCall,SendSMSorEmailUsingReactNativeCommunication using react-native-communicationstomakePhoneCalls,SendTextSMS,SendEmailandOpenaURLinBrowser. HowtoMakeaPhoneCallinReactNative? consttriggerCall=()=>{ //Checkforperfect10digitlength if(inputValue.length!=10){ alert('Pleaseinsertcorrectcontactnumber'); return; } constargs={ number:inputValue, prompt:true, }; //Makeacall call(args).catch(console.error); }; InthisexampleofmakingaCallfromReactNativeApp,wewillopenthecontactnumberonaclickofabuttoninthedialertocalldirectlyusingacall(args) providedby react-native-phone-call. Solet’sgetstarted. ToMakeaReactNativeApp GettingstartedwithReactNativewillhelpyoutoknowmoreaboutthewayyoucanmakeaReactNativeproject.Wearegoingtousereact-nativeinittomakeourReactNativeApp.Assumingthatyouhavenodeinstalled,youcanusenpmtoinstallthereact-native-clicommandlineutility.Opentheterminalandgototheworkspaceandrun npminstall-greact-native-cli RunthefollowingcommandstocreateanewReactNativeproject react-nativeinitProjectName IfyouwanttostartanewprojectwithaspecificReactNativeversion,youcanusethe--versionargument: react-nativeinitProjectName--versionX.XX.X react-nativeinitProjectName--versionreact-native@next ThiswillmakeaprojectstructurewithanindexfilenamedApp.jsinyourprojectdirectory. InstallationofDependency Tousecallwehavetoinstallreact-native-phone-call package. Toinstallthisopentheterminalandjumpintoyourproject cdProjectName Runthefollowingcommand npminstallreact-native-phone-call--save Thiscommandwillcopyallthedependenciesintoyournode_moduledirectory.–saveisoptional,itisjusttoupdatethereact-native-phone-calldependencyinyourpackage.jsonfile. CodetoMakeaPhoneCalls NowOpenApp.jsinanycodeeditorandreplacethecodewiththefollowingcode App.js //ExampletoMakeaPhoneCallinReactNativeApp //https://aboutreact.com/example-to-make-a-call-from-the-react-native-app/ //importReactinourcode importReact,{useState}from'react'; //importallthecomponentswearegoingtouse import{ SafeAreaView, StyleSheet, View, Text, TouchableOpacity, TextInput, }from'react-native'; //importCallAPI importcallfrom'react-native-phone-call'; constApp=()=>{ const[inputValue,setInputValue]=useState('9999999999'); consttriggerCall=()=>{ //Checkforperfect10digitlength if(inputValue.length!=10){ alert('Pleaseinsertcorrectcontactnumber'); return; } constargs={ number:inputValue, prompt:true, }; //Makeacall call(args).catch(console.error); }; return( ExampletoMakeaPhoneCallinReactNativeApp EnterConatctNumbertoCall setInputValue(inputValue) } placeholder={'EnterConatctNumbertoCall'} keyboardType="numeric" style={styles.textInput} /> MakeaCall ); }; exportdefaultApp; conststyles=StyleSheet.create({ container:{ flex:1, backgroundColor:'white', padding:10, textAlign:'center', }, titleText:{ fontSize:22, textAlign:'center', fontWeight:'bold', }, titleTextsmall:{ marginVertical:8, fontSize:16, }, buttonStyle:{ justifyContent:'center', marginTop:15, padding:10, backgroundColor:'#8ad24e', }, buttonTextStyle:{ color:'#fff', textAlign:'center', }, textInput:{ height:40, borderColor:'gray', borderWidth:1, width:'100%', paddingHorizontal:10, }, }); KnownIssueforiOS ThisexamplewillnotworkwithIOSsimulatorassimulator donotprovidethephonecallfacilityincaseyoutrytorunonthesimulatoryouwillget“invalidURLprovided:tel:XXXXXXXXXX”. ErrorwhilerunningthisexampleonIOSsimulator ToRunthe ReactNativeApp Opentheterminalagainandjumpintoyourprojectusing. cdProjectName ToruntheprojectonanAndroidVirtualDeviceoronrealdebuggingdevice react-nativerun-android orontheiOSSimulatorbyrunning(macOSonly) react-nativerun-ios DownloadSourceCode FAQ: 1.Howtocallwithouthavingtopressthecallbutton? 2.HowcanIcalldirectlyfrommyreactnativeapplicationwithoutopeningtheDialler? Ans:Sorrybutthisisnotpossiblewiththisexample.Thisisacrossplatformexamplewhichdoesnotprovidethesame.Ifyouneedthatinanycasethenyoucanseereact-native-immediate-phone-call,withthatlibrarynoadditionaluserinputisrequiredforAndroidandthecallstartsinstantly(ApplealwaysasksconfirmationsincethelastiOSupdates…) OutputScreenshots Android      IOS OutputinOnlineEmulator ThisishowyoucanmakeaphonecallfromtheReactNativeApp.Ifyouhaveanydoubtsoryouwanttosharesomethingaboutthetopicyoucancommentbeloworcontactushere.Therewillbemorepostscomingsoon.Staytuned! Hopeyoulikedit.🙂 9thoughtson“ExampletoMakeaPhoneCallinReactNativeApp” Greattutorial!Works.Buthowcanidotomakethecallwithouthavingtopressthecallbutton,thisonlyplacesthenumber,andthecallmustbemademanually?HowcanIdotocalldirectlyfrommyreactnativeapplication? Reply Youcanusereact-native-immediate-phone-calllibrary. Reply Thankyou,forsharing. Reply Friend,couldyoudoatutorialthatinvolvesthefollowing? –React-native. –Mysql. –WampServer. Ithasbeendifficultformetomakethatconnection. Reply HiNetss, YoucannotconnectMysqlDirectlywiththeReactNativeasMysqlisaserversidedatabaseandyouReactNativeisclientsidefrontendsoyouwillsurelyneedanybackendtoconnectwithMysql.IfwetalkabouttheWampServerthenthiswillbetheservertohostMysqlandbackend. Reply It’stooeasy. import{Linking}from‘react-native’; ///////////////// Linking.openURL(‘tel:000000000’); Reply Yeah,Indirectlyitdoesthesame. Reply Isthereanywaytoendaphonecallusingthe‘react-native-phone-call’? Reply No Reply LeaveaCommentCancelreplyCommentName Email Website Δ ThissiteusesAkismettoreducespam.Learnhowyourcommentdataisprocessed. ReactNavigation StackNavigation-ReactNavigation NavigationDrawer-ReactNavigation BottomNavigation-ReactNavigation Tab-ReactNavigation SwipeGesturesnotWorkinginAndroid RNAndroidFragment MoreNavigationExamples AndroidOnly HandleAndroidBackButton AskRunTimeAndroidPermission Networking&Properties MakeHTTPRequest/RNFetch NetworkingusingAxios CallGraphQLQuery,MutationandSubscription GlobalScopeVariables CallFunctionsofOtherClassFromCurrentClass ReactNativeDateTime Restart/ResetCurrentScreen GeoLocation CurrentLocationusingGeolocation DistanceBetweenTwoLocations Camera,Screenshot RNCamera ScanQRCode TakeScreenshot Block/PreventScreenshot Audio,Video PlayMusic/Sound PlayVideoinReactNative TexttoSpeechConversion SpeechtoTextConversion Device/AppInformation ReactNativeAppState ReactNativeDeviceDimensions ReactNativePlatform ReactNativeNetInfo GetDeviceInformation UniqueIDofDevice UseofDeviceFeatures ControlDeviceBrightness KeeptheScreenAwake/On Flashlight(TorchApp) ReactNativeVibration OpenSettingsApp ControlScreenOrientation DisableScreenRotation Get/SetDeviceOrientation UseofTouchscreen PanResponder-GetClickedLocation CaptureDigitalSignature Call,Message MakeaPhoneCall SendTextSMS SendWhatsAppMessage Call/SMS/EmailonOne AccessDevice’sContactList DetectCallStates AccessCallLogsofAndroid Share ShareAPI SharePostonFacebook TweetonTwitter CopytoClipboard MakeaLongURLShort Rating CustomStarRatingBar AsktoRateYourApp ToReleaseApp AddTabletandiPadSupport ChangeAppIcon GenerateSignedAPK FindUniqueID(UDID) RenameReactNativeApp Updates ReactNativeforWindowsandmacOS ReactNativeFunctionalComponents NewFastRefreshFeatureinReactNative0.61 ReactNativeAutolinking UsingReactNavigation4.0 Recommendation UsefulToolsforRNDevelopment RunRNAppsInBrowser DragandDropToolforFlexLayoutDesigning ReactNativeDebugger BestUILibraries RNInterviewQuestions MovetoNextSection>>