Make Phone Call, Send SMS or Email Using React Native Communication

This is an Example to Make Phone Call, Send SMS or Email Using React Native Communication. We will use the Communications Component provided by react-native-communications. This is a very easy to integrate library which can be used for very useful task like Making phone calls, Sending Text SMS or for Sending Emails.

Most important point to note here is that all the things will trigger the respective applications to handle the task like when we call a function to make a phone call it will open Dialer application with prefilled number supplied by us from our App. Similar with the SMS and mail.

In this example, we will see 4 types of different activity:

  1. Make Phone Call.
  2. Send SMS.
  3. Send Email.
  4. Open a web URL in  browser.

Now let’s get started with the example.

Import using React Native Communication

Here are the code snippets to perform above mentioned activities:

Make Phone Call

Send SMS

Send Email

Open a web URL

For this example, we will make a home screen with 4 different buttons to make a call, to Send SMS, to Send Email and to open a URL in browsers.

To Make a React Native App

Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install the react-native-cli command line utility. Open the terminal and go to the workspace and run
npm install -g react-native-cli
Run the following commands to create a new React Native project
react-native init ProjectName
This will make a project structure with an index file named App.js in your project directory.

Installation of Dependency

To use Communication we need to install react-native-communications dependency.

To install this open the terminal and jump into your project using

Run the following command to install

This command will copy all the dependency into your node_module directory.

–save is optional, it is just to update the react-native-communications dependency in your package.json file.

Now Open App.js in any code editor and replace the code with the following code.

App.js

To Run the React Native App

Open the terminal again and jump into your project using.
cd ProjectName
To run the project on an Android Virtual Device or on real debugging device
react-native run-android
or on the iOS Simulator by running
react-native run-ios (macOS only).

Android

            

IOS

          

This is how you can Make Phone Call, Send SMS or Email Using React Native Communication. If you have any doubt or you want to share something about the topic you can comment below or contact us here. There will be more posts coming soon. Stay tuned!

Hope you liked it. 🙂

Example to Send WhatsApp Message from React Native App

This is an Example to Send WhatsApp Message from React Native App. In this example, we are taking the mobile number as an input from the user and will send the WhatsApp message to the input number.

To Send the Message on WhatsApp Message

To Make a React Native App

Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install the react-native-cli command line utility. Open the terminal and go to the workspace and run
npm install -g react-native-cli
Run the following commands to create a new React Native project
react-native init ProjectName
This will make a project structure with an index file named App.js in your project directory.

Open App.js in any code editor and replace the code with the following code.

App.js

To Run the React Native App

Open the terminal again and jump into your project using.
cd ProjectName
To run the project on an Android Virtual Device or on real debugging device
react-native run-android
or on the iOS Simulator by running
react-native run-ios (macOS only).

     

This is how you can Send WhatsApp Message from React Native App. If you have any doubt or you want to share something about the topic you can comment below or contact us here. There will be more posts coming soon. Stay tuned!

Hope you liked it. 🙂

React Native Example to Take Screenshot Programmatically

Here is an Example to Take Screenshot Programmatically in React Native. To take Screenshot of your screen we have an inbuilt Screenshot option provided by mobile manufacturers but you can also make this in your own Application too. To take a Screenshot we will use a very good library called react-native-view-shot. Which provides captureScreen API which is very easy to use.

To Make a React Native App

Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install the react-native-cli command line utility. Open the terminal and go to the workspace and run
npm install -g react-native-cli
Run the following commands to create a new React Native project
react-native init ProjectName
This will make a project structure with an index file named App.js in your project directory.

Installation of Dependency

To use captureScreen we need to install react-native-view-shot package.

To install this open the terminal and jump into your project

Run the following command

This command will copy all the dependencies into your node_module directory, You can find the directory in node_module the directory named react-native-view-shot.

–save is optional, it is just to update the react-native-view-shot dependancy in your package.json file.

Dependency Version for this Example used is

Linking of Library

To install the react-native-view-shot library completely we have to make some changes in Android and IOS project files to link the library properly. In order to link the library you have to run the following command:

You can see the result like this

After linking the dependency if you face Could not Compile Settings File project/android/settings.gradle error while building and installing the project then you can find the solution here.

Here we have done with our installation of the dependency. If you are still facing the trouble please comment below so that we can help you out from the problem.

You can download the source code from Github

OR

Open App.js in any code editor and replace the code with the following code

App.js

To Run the React Native App

Open the terminal again and jump into your project using.
cd ProjectName
To run the project on an Android Virtual Device or on real debugging device
react-native run-android
or on the iOS Simulator by running
react-native run-ios (macOS only).

Android

          

IOS

   

This is how you can take screenshot programmatically. If you have any doubt or you want to share something about the topic you can comment below or contact us here. There will be more posts coming soon. Stay tuned!

Hope you liked it. 🙂

Example to Make PDF in React Native from HTML Text

Here is an Example to Make PDF in React Native from HTML Text. In this example, we will create a PDF file from the HTML text after the click of a button in our App. To complete this task we will use react-native-html-to-pdf library. So let’s get started.

To Make a React Native App

Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install the react-native-cli command line utility. Open the terminal and go to the workspace and run
npm install -g react-native-cli
Run the following commands to create a new React Native project
react-native init ProjectName
This will make a project structure with an index file named App.js in your project directory.

Installation of Dependency

To use RNHTMLtoPDF we need to install react-native-html-to-pdf package. To install this

Open the terminal and jump into your project

Run the following command

This command will copy all the dependencies into your node_module directory, You can find the directory in node_module the directory named react-native-html-to-pdf.

Linking of Library

To use react-native-html-to-pdf library we have to link some dependencies in Android and IOS project files. In order to link the library you have to run following command:

You can see the following changes in your android project. If you are unable to find the changes then please do those changes as they are must for this example.

Go to the HtmltoPDFExample> android > app > build.gradle.
Scroll down and you can see the following dependency and if not please add this.

Open HtmltoPDFExample> android > settings.gradle and you can see the following lines and if not please add this.

 

Open HtmltoPDFExample> android > app > src > main > java > com > htmltopdfexample> MainApplication.java  and you can see the following lines in imports if not then please add

Scroll down and you can see the following line in getPackages after new MainReactPackage() if not then please add a comma(,) and add

 

Permission to access external storage for Android and other configurations

We are accessing external storage so we need to add some permission in AndroidManifest.xml file.  On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest but after SDK version 23 android applies new permissions model. For more about the permission, you can see this post.

So we are going to add the following permissions in the AndroidMnifest.xml

  • WRITE_EXTERNAL_STORAGE: To store the PDF in SD card.
  • READ_EXTERNAL_STORAGE: To read the SD card.

By adding permission in AndroidManifest.xml you are able to work with the EXTERNAL_STORAGE in devices which are lower than API 23. But if you want to access the EXTERNAL_STORAGE in higher level devices you also need to ask for the runtime permission.

For this example Please do check your compileSdkVersion and targetSdkVersion is above or equal 23. Go to the HtmltoPdfExample> android > app > build.gradle.

For the example, I am using the following configuration.

Here we have done with our installation of the library. If you are still facing the trouble please comment below so that we can help you out from the problem. Just to confirm the dependencies here is the screenshot of the dependencies that we are using

If you are on the same boat then let’s go further or please update your package.json and run npm install to install new dependencies.

You can download the source code from Github

OR

Open App.js in any code editor and replace the code with the following code

App.js

To Run the React Native App

Open the terminal again and jump into your project using.
cd ProjectName
To run the project on an Android Virtual Device or on real debugging device
react-native run-android
or on the iOS Simulator by running
react-native run-ios (macOS only).

Here are the Screenshots of the application.

Asking for permission while opening the app for the first time.

Click on create PDF to create PDF

Have a look at the location in internal/external storage where we have created PDF from HTML

     

This is how you can make PDF from your React Native Application. If you have any doubt or you want to share something about the topic you can comment below or contact us here. There will be more posts coming soon. Stay tuned!

Hope you liked it. 🙂

React Native Map Example

React Native Map Example is to integrate the Google Map into your React Native Application. To integrate the Map in our example we will use a very good library called react-native-maps. Which provides MapView component which is very easy to use. So let’s get started.

To Make a React Native App

Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install the react-native-cli command line utility. Open the terminal and go to the workspace and run
npm install -g react-native-cli
Run the following commands to create a new React Native project
react-native init ProjectName
This will make a project structure with an index file named App.js in your project directory.

Installation of Dependency

To use MapView we need to install react-native-maps package. To install this

Open the terminal and jump into your project

Run the following command

This command will copy all the dependencies into your node_module directory, You can find the directory in node_module the directory named react-native-maps.

–save is optional, it is just to update the react-native-maps dependancy in your package.json file.

Linking of Library

To use react-native-maps library we have to link some dependencies in Android and IOS project files. In order to link the library, you have to run following command

You can see the result like this

You can see the following changes in your android project. If you are unable to find the changes then please do those changes as they are must for this example.

Go to the MapExample> android > app > build.gradle.
Scroll down and you can see the following dependency and if not please add this.

Open MapExample> android > settings.gradle and you can see the following lines and if not please add this.

 

Open MapExample> android > app > src > main > java > com > mapexample> MainApplication.java  and you can see the following lines in imports if not then please add

Scroll down and you can see the following line in getPackages after new MainReactPackage() if not then please add a comma(,) and add

 

Here we have done with our installation of the library. If you are still facing the trouble please comment below so that we can help you out from the problem.

Generate the API Key

To use Map in your Application we have to get Map API key from the Google Developer console. For that, open Developer console and log in from your Google account.

If you have already created any project you can use that or you can create a new one like this

After creating the project you can see all of your created project a drop down in the top left corner. Now select the project from the dropdown and goto to the credential section.

You can find the create credential option there.

Hit on the create credential button and it will create an API key to the user in your Map Application

Before we add this API key in our project you have to enable the API which you want to use in your project. For that, you can search for the Map and you will find the Map related API. We will enable Map SDK for Android because we are making this example for the Android. So click on Map SDK for Android and you will found the enable button to enable the Map API for Android.

Now after enabling the API key, we have to add this API key to our project’s AndroidManifest.xml file. Just copy the following lines and paste it into your manifest file with your generated API key.

You can download the source code from Github

OR

Open App.js in any code editor and replace the code with the following code

App.js

To Run the React Native App

Open the terminal again and jump into your project using.
cd ProjectName
To run the project on an Android Virtual Device or on real debugging device
react-native run-android
or on the iOS Simulator by running
react-native run-ios (macOS only).

     

This is how you can integrate Google Map in your React Native Application. If you have any doubt or you want to share something about the topic you can comment below or contact us here. There will be more posts coming soon. Stay tuned!

Hope you liked it. 🙂

Generation of QR Code in React Native

If we have to share any small data between different users, we can use the QR Code. Generation of QR Code in React Native is very easy as we just have to install react-native-qrcode package, which will provide <QRCode/> component to make QRCode.

QR Code is known as Quick Response Code is a trademark for two-dimensional barcode. QR Code is a machine/camera readable block enabled code for encoding numeric value and alphabetic value. The QR Code stores information within a block of images and can store multiple types of information.

Render Using

To Make a React Native App

Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install the react-native-cli command line utility. Open the terminal and go to the workspace and run
npm install -g react-native-cli
Run the following commands to create a new React Native project
react-native init ProjectName
This will make a project structure with an index file named App.js in your project directory.

Installation of Dependency

To use <QRCode /> we need to install react-native-qrcode package. To install this

Open the terminal and jump into your project

Run the following command.

This command will copy all the dependencies into your node_module directory, You can find the directory in node_module the directory named react-native-qrcode.

–save is optional, it is just to update the react-navigation dependancy in your package.json file.

Dependency Version for this Example Used is

Now Open App.js in any code editor and replace the code with the following code.

App.js

To Run the React Native App

Open the terminal again and jump into your project using.
cd ProjectName
To run the project on an Android Virtual Device or on real debugging device
react-native run-android
or on the iOS Simulator by running
react-native run-ios (macOS only).

     

That was the React Native Generate QR Code. If you have any doubt or you want to share something about the topic you can comment below or contact us here. There will be more posts coming soon. Stay tuned!

Hope you liked it. 🙂

React Native Scan QR Code

This is an Example of React Native Scan QR Code. To make a QR Code Scanner in our React Native, Wix has provided a very good library named react-native-camera-kit. Which is very easy to integrate into your app.

If you are making an app which needs to share small code/data/URL between users in physical presence then the QR Code is the cool thing to integrate into your App. For this process, we have to implement a QR Code Scanner and QR Code Generators in our app. In this example, you will make the QR Code Scanner Using React Native Camera.

In this example, we will make a home screen with a button to open A QR code scanner. On click of a button, we will open a Camera with QR Scan functionality and after scanning of the QR code, we will take the code back to the home screen. If the Scanned string is a link/URL then we will show an additional button to open the URL in default browser using React Native Linking Component. So let’s get started.

To Make a React Native App

Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install the react-native-cli command line utility. Open the terminal and go to the workspace and run
npm install -g react-native-cli
Run the following commands to create a new React Native project
react-native init ProjectName
This will make a project structure with an index file named App.js in your project directory.

Installation of Dependency

To use <CameraKitCameraScreen /> we need to install react-native-camera-kit package. To install this

Open the terminal and jump into your project

Run the following command

This command will copy all the dependencies into your node_module directory, You can find the directory in node_module the directory named react-native-camera-kit.

–save is optional, it is just to update the react-native-camera-kit dependency in your package.json file.

Linking of Dependency

After installing the dependencies you need to link it with your project using

After linking the dependency if you face  Could not Compile Settings File project/android/settings.gradle error while building and installing the project then you can find the solution here.

Dependency Version for this Example Used is

Permission to use the Camera for Android

We are using a Native API Camera to scan the QR code so we need to add permission to the AndroidManifest.xml file to access it. So we are going to add the following permissions in the AndroidMnifest.xml

PermissionPurpose
CAMERATo access the camera


On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest but after SDK version 23 we have to ask run time permission also, so we will ask for permission in code also. For more about the permission, you can see this post.

Permission to use the Camera for IOS

1. Open the project CameraExample>ios>CameraExample.xcodeproj in XCode. Click on Project (CameraExample in my case) from the left sidebar and you will see multiple options in the workspace.

2. Select info tab which is info.plist

3. Click on the plus button to add a permission key “Privacy-Camera Usage Description” and a value which will be visible when permission dialog pops up.

Code to Make a QR Code Scanner

Open App.js in any code editor and replace the code with the following code.

App.js

We have used this website to generate the QR Code.

To Run the React Native App

Open the terminal again and jump into your project using.
cd ProjectName
To run the project on an Android Virtual Device or on real debugging device
react-native run-android
or on the iOS Simulator by running
react-native run-ios (macOS only).

Android

      
      

IOS

   

That was the React Native Scan QR Code. If you have any doubt or you want to share something about the topic you can comment below or contact us here. There will be more posts coming soon. Stay tuned!

Hope you liked it. 🙂

React Native Camera

We all usually need a camera in our app and Wix has provided a very good library named react-native-camera-kit. Which is very easy to integrate into your app.

In this example, we will make a home screen to open Camera and In camera, we will have a capture button, a front to back camera switch button, a flash setting button, and a cancel button to close the camera. So let’s get started.

To Make a React Native App

Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install the react-native-cli command line utility. Open the terminal and go to the workspace and run
npm install -g react-native-cli
Run the following commands to create a new React Native project
react-native init ProjectName
This will make a project structure with an index file named App.js in your project directory.

Installation of Dependency

To use <CameraKitCameraScreen /> we need to install react-native-camera-kit package. To install this

Open the terminal and jump into your project

Run the following command

This command will copy all the dependencies into your node_module directory, You can find the directory in node_module the directory named react-native-camera-kit.

–save is optional, it is just to update the react-native-camera-kit dependency in your package.json file.

Linking of Dependency

After installing the dependencies you need to link it with your project using

After linking the dependency if you face  Could not Compile Settings File project/android/settings.gradle error while building and installing the project then you can find the solution here.

Dependency Version for this Example Used is

Permission to use the Camera for Android

We are using a Native API Camera so we need to add some permission to the AndroidManifest.xml file.
So we are going to add the following permissions in the AndroidManifest.xml

PermissionPurpose
CAMERATo access the camera
WRITE_EXTERNAL_STORAGETo store the content in the SD card
READ_EXTERNAL_STORAGETo view the content of the SD card


On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest but after SDK version 23 we have to ask run time permission also, so we will ask for permission in code also. For more about the permission, you can see this post.

Permission to use the Camera for IOS

1. Open the project CameraExample>ios>CameraExample.xcodeproj in XCode. Click on Project (CameraExample in my case) from the left sidebar and you will see multiple options in the workspace.

2. Select info tab which is info.plist

3. Click on the plus button to add a permission key “Privacy-Camera Usage Description” and a value which will be visible when permission dialog pops up.

Code to Run Camera

Open App.js in any code editor and replace the code with the following code.

App.js

Before running the app you need to make a directory called “assets ” to keep the images that we have used. Download and put all the images in assets as shown

                         

To Run the React Native App

Open the terminal again and jump into your project using.
cd ProjectName
To run the project on an Android Virtual Device or on real debugging device
react-native run-android
or on the iOS Simulator by running
react-native run-ios (macOS only).

Android

      

      

IOS

      

That was the React Native Camera. If you have any doubt or you want to share something about the topic you can comment below or contact us here. There will be more posts coming soon. Stay tuned!

Hope you liked it. 🙂

React Native ListViewDataSource

React Native DataSource provides efficient data processing and access to the ListView component. A ListViewDataSource is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be as simple as an array of strings, or an object with rows nested inside section objects.

To Import ListView in code

Prepare DataSource

Render Using

In the example below, we are using free demo APIs. The example has a simple ListView made with LIstViewDataSource. So let’s get started.

To Make a React Native App

Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install the react-native-cli command line utility. Open the terminal and go to the workspace and run
npm install -g react-native-cli
Run the following commands to create a new React Native project
react-native init ProjectName
This will make a project structure with an index file named App.js in your project directory.

Open App.js in any code editor and replace the code with the following code.

App.js

To Run the React Native App

Open the terminal again and jump into your project using.
cd ProjectName
To run the project on an Android Virtual Device or on real debugging device
react-native run-android
or on the iOS Simulator by running
react-native run-ios (macOS only).

IOS

Android

That was the React Native ListViewDataSource. If you have any doubt or you want to share something about the topic you can comment below or contact us here. There will be more posts coming soon. Stay tuned!

Hope you liked it. 🙂

Make HTTP Request to Fetch the Data From Web APIs in React Native

This post will give you an idea about how to Make HTTP Request to Fetch the Data From Web APIs in React Native. Here is an interesting example of posting and fetching the data from the server. Whenever you connect your application from the backend server (to get or post the data) you have to make an HTTP  request. Here we will show you how to perform network task in React Native.

Basic Network Call

In the example below, we are using free demo APIs. The example has two button each has its own onPress which triggers our services. Just for the demo purpose, we are using buttons to trigger the request but If You need any data which needs to render while loading your screen you can use componentDidMount lifecycle method to load the data from the server as soon as the component is mounted. So let’s get started.

To Make a React Native App

Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install the react-native-cli command line utility. Open the terminal and go to the workspace and run
npm install -g react-native-cli
Run the following commands to create a new React Native project
react-native init ProjectName
This will make a project structure with an index file named App.js in your project directory.

Open App.js in any code editor and replace the code with the following code.

App.js

To Run the React Native App

Open the terminal again and jump into your project using.
cd ProjectName
To run the project on an Android Virtual Device or on real debugging device
react-native run-android
or on the iOS Simulator by running
react-native run-ios (macOS only).

         

This is how you can Make HTTP Request to Fetch the data from Web APIs in React Native. If you have any doubt or you want to share something about the topic you can comment below or contact us here. There will be more posts coming soon. Stay tuned!

Hope you liked it. 🙂