DEV Community: Shadman

BarCode and QR Code Scanning in React Native Apps

Shadman — Sun, 29 Mar 2020 21:55:06 +0000

This post is all about implementing the QR Code Scanner in your cool new react-native application. In this post, you will learn

How to implement QRCode Scanner in our app.
How to read data from the QR Code in React-Native app.
How to open a link in the browser after successfully reading data from the QR Code.

Before start, first you will need a React-Native app to start with, hence you can follow how to create a react-native app for beginners and start after that from here.

Complete source code of this tutorial is available here — RNQRCodeScanning.

What is React-Native

React Native is a JavaScript framework for writing real, natively rendering mobile applications for iOS and Android. It’s based on React, Facebook’s JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms. In other words: web developers can now write mobile applications that look and feel truly “native,” all from the comfort of a JavaScript library that we already know and love. Plus, because most of the code you write can be shared between platforms, React Native makes it easy to simultaneously develop for both Android and iOS.

Similar to React for the Web, React Native applications are written using a mixture of JavaScript and XML-Esque markup, known as JSX. Then, under the hood, the React Native “bridge” invokes the native rendering APIs in Objective-C (for iOS) or Java (for Android). Thus, your application will render using real mobile UI components, not web views, and will look and feel like any other mobile application. React Native also exposes JavaScript interfaces for platform APIs, so your React Native apps can access platform features like the phone camera, or the user’s location.

React Native currently supports both iOS and Android and has the potential to expand to future platforms as well. In this tutorial, we’ll cover QR Code implementation. The vast majority of the code we write will be cross-platform. And yes: you can use React Native to build production-ready mobile applications! Some anecdota: Facebook, Palantir, and TaskRabbit are already using it in production for user-facing applications.
The fact that React Native actually renders using its host platform’s standard rendering APIs enables it to stand out from most existing methods of cross-platform application development, like Cordova or Ionic.

Existing methods of writing mobile applications using combinations of JavaScript, HTML, and CSS typically render using web views. While this approach can work, it also comes with drawbacks, especially around performance. Additionally, they do not usually have access to the host platform’s set of native UI elements. When these frameworks do try to mimic native UI elements, the results usually “feel” just a little off; reverse-engineering all the fine details of things like animations takes an enormous amount of effort, and they can quickly become out of date.

What and why QR Code?

QR code (abbreviated from Quick Response Code) is the trademark for a type of matrix barcode (or two-dimensional barcode) first designed in 1994 for the automotive industry in Japan. A barcode is a machine-readable optical label that contains information about the item to which it is attached. In practice, QR codes often contain data for a locator, identifier, or tracker that points to a website or application. A QR code uses four standardized encoding modes (numeric, alphanumeric, byte/binary, and kanji) to store data efficiently; extensions may also be used.

QR code scanning is something almost every smartphone user has done at least once. We scan QR codes in supermarkets, on products in general, and oh, Amazon delivery! It’s a very handy way to recognize products instead of entering 16 digit long ID numbers etc. Similarly, reading ID numbers from Passports, etc could be very handy if you are an international hotel owner and require guests to carry passports as IDs. Or maybe you want to read off a vehicle registration number using your phone.

Here are some potential use cases for these plugins in React-Native app

Online Payment apps — QR scanners can provide product info to users and paying the facility.
Delivery app — QR Code scan can track/sign off a package and you can pay them by scanning QR Code
Quick access to offers — Scan QR codes and go to a webpage
Web authentication of a mobile app — Similar to Whatsapp Web
Event app — Scan tickets or events passes

…… and many more

All this can now be done in React-Native apps, with the latest open source react-native-qrcode-scanner npm package available in React-Native. In this article, we will focus on such implementation. So here are some of the scan plugins and functionalities you can implement with React-native.

react-native-qrcode-scanner
react-native-scan-view
react-native-camera

….and many more.

Step 1:- Install the react-native-camera plugin by executing this command

yarn add react-native-camera@git+https://git@github.com/react-native-community/react-native-camera.git

Here react-native-camera is a dependency for this package so you will need to add it in your project.

Step 2:- Install the QR Scanner plugin by executing this command

yarn add react-native-qrcode-scanner

Now, to use react-native-qrcode-scanner, import the react-native-qrcode-scanner module and use the <QRCodeScanner /> tag.

Here, we are working on react-native version 0.60.5. Hence we don’t need to link any package externally as in the latest versions above 0.60 react-native provides auto-linking functionality.

Add Button to scan a QRCode and to get the result

Now you are ready to use the QR Code Scanner function provided by the React-Native react-native-qrcode-scanner package and get the result. Before this let us make a beautiful view to access the QRCode function by clicking a button and getting the data in response.

QR Code view

The Result for the above code is:

As we have completed our UI for beautiful interaction, you can simply use the below function to complete a QR Code scan process.

Complete UI and Logic of the application —

Complete logic and view

In this tutorial, we have used react-native default Linking property to open the external URL in the browser only when we get a URL after a successful scan. If the result contains a URL then it will navigate to that web page or if it does not contain any URL then it will print the result in both cases.

onSuccess = (e) => {
const check = e.data.substring(0, 4);
console.log('scanned data' + check);
this.setState({
result: e,
scan: false,
ScanResult: true
})
if (check === 'http') 
{
Linking
.openURL(e.data)
.catch(err => console.error('An error occured', err));
} else {
this.setState({
result: e,
scan: false,
ScanResult: true})}}

On clicking the “Click to Scan” button it will initiate the hardware camera and a pop up will appear for camera permission. To set the camera permission you would need to add the following code to the AndroidManifest.xml

<uses-permission android:name="android.permission.CAMERA" />

By adding this line in your AndroidManifest.xml you are all set to use camera feature in your application to scan a QR Code.
Let’s scan some QR Codes…

Camera open to scan a QR Code

If you are scanning a webpage QR code then on successful scan it will return a URL and in this tutorial we have written a function for that, if it does contain a URL then it will print the result and navigate to the web page in the browser and if it is not an encoded web page QR Code then it will simply print the result and you will see a button below the result to scan another QR Code.
Here in the scanning view, you can see we have two buttons at the bottom of the app which are —

Ok. Got it
Stop Scan

Here in the first case, it will call the reactivate() function where this will reactivate the scanning ability of the component. And in the second case, it will just close the camera and navigate back to the home page.

Let’s check the results —

Contains a URL

This will open the scanned webpage in the browser.

QR_CODE Result

There are some methods that you can use to get features according to your requirement —

`reactivate()`

Call this method to programmatically enabling scanning again. Use this by attaching a ref like so <QRCodeScanner ref={(node) => { this.scanner = node }}> and calling this.scanner.reactivate()

Props

`onRead` (required)

propType: func.isRequired default: (e) => (console.log('QR code scanned!', e))

Will call this specified method when a QR code or a barcode is detected in the camera’s view passing in the event emitted upon reading the code.

`fadeIn`

propType: bool default: true

When set to true this ensures that the camera view fades in after the initial load up instead of being rendered immediately. Set this to false to prevent the animated fade in of the camera view.

`reactivate`

propType: bool default: false

When set to false, when a QR code is scanned, the QRCodeScanner will not scan another code until it is re-rendered. When set to true this will reactivate the scanning ability of the component.

`reactivateTimeout`

propType: number default: 0

Use this to configure how long it should take before the QRCodeScanner should reactivate.

`topContent`

propType: oneOfType([ PropTypes.element, PropTypes.string, ])

Use this to render any additional content at the top of the camera view.

`bottomContent`

propType: oneOfType([ PropTypes.element, PropTypes.string, ])

Use this to render any additional content at the bottom of the camera view.

`containerStyle`

propType: any

Use this to pass styling for the outermost container. Useful for adding margin/padding to account for navigation bar.

`cameraStyle`

propType: any

Use this to pass or overwrite styling for the camera window rendered.

`topViewStyle`

propType: any

Use this to pass or overwrite styling for the <View> that contains the topContent prop.

`bottomViewStyle`

propType: any

Use this to pass or overwrite styling for the <View> that contains the bottomContent prop.

`showMarker`

propType: boolean default: false

Use this to show marker on the camera scanning window.

`customMarker`

propType: element

Pass a RN element/component to use it as a custom marker.

`markerStyle`

propType: any

Use this to add custom styling to the default marker.

`notAuthorizedView`

propType: element

Pass a RN element/component to use it when no permissions given to the camera (iOS only).

`cameraType`

propType: oneOf(['front', 'back']) default: 'back'

Use this to control which camera to use for scanning QR codes, defaults to rear camera.

`checkAndroid6Permissions`

propType: bool default: false

Use this to enable permission checking on Android 6

`permissionDialogTitle`

propType: string default: 'Info'

Use this to setting permission dialog title (Android only).

`permissionDialogMessage`

propType: string default: 'Need camera permission'

Use this to setting permission dialog message (Android only).

`cameraProps`

propType: objectProperties to be passed to the Camera component.

Using this npm package you can scan a Barcode too. I have not tried that in here but why don’t you give it a try and tell me in the comment section below.

Here in the tutorial, successfully implemented the plugin and got the perfect result. You can follow all the steps and achieve this very easily or you can clone my repo on Github for both the plugins here and enjoy 😎 😎 😎 🕺 🕺 🕺..…

Conclusion

In this post, we learned how to integrate the QR Code scanner and use it in React-Native applications. Since the plugin is amazingly light and have great documentation, it is the developers’ first choice when it comes to creating QR code.

Complete source code of this tutorial is available here — RNQRCodeScanning.

Next Steps

Now that you have learned the implementation of react-native-qrcode-scanner in React-Native, you can also try

Firebase — Integrate Firebase | Analytics | Push notifications | Firebase CRUD
How To in React Native — Geolocation | Life cycle hooks | Image Picker | Redux implementation | Make API calls | Navigation | Translation | Send & Read SMS | Google Vision
Payments — Apple Pay | Stripe payments
Authentication — Google Login| Facebook login | Twitter login | Phone Auth | Anonymous Login
Create Instagram / Whatsapp Story Feature in React Native
React Native life cycle hooks | Implement Redux | Async actions with Redux
Create Awesome Apps in React Native using Full App

If you need a base to start your next React Native app, you can make your next awesome app using React Native Full App

Send, Read and Delete SMS in React Native

Shadman — Sun, 29 Mar 2020 17:06:38 +0000

In this tutorial, we are going to implement send, read and delete SMS actions from your mobile device using react-native application. Using these implementations you can send message to someone, you can read particular persons or profiles message by clicking a single button and you can delete a particular message too from your device by implementing some cool functions using react-native-sms and react-native-get-sms-android in our cool react-native application.

Complete source code of this tutorial can be found at React_Native_Send_Get_Delete_SMS

In this tutorial, we will focus on some basic and major parts where many expert developers or juvenile beginners get confused. Hence we will check each and everything in step-by-step as: —

What and why React Native
How to create react native app
What and Why react-native-sms and react-native-get-sms
Setup and Implementation
Working example

Step 1: — What and why React Native?

Similar to React for the Web, React Native applications are written using a mixture of JavaScript and XML-Esque markup, known as JSX. Then, under the hood, the React Native “bridge” invokes the native rendering APIs in Objective-C (for iOS) or Java (for Android). Thus, your application will render using real mobile UI components, not webviews, and will look and feel like any other mobile application. React Native also exposes JavaScript interfaces for platform APIs, so your React Native apps can access platform features like the phone camera, or the user’s location.

React Native currently supports both iOS and Android and has the potential to expand to future platforms as well. In this tutorial, we’ll cover firebase phone authentication and CRUD operations. The vast majority of the code we write will be cross-platform. And yes: you can really use React Native to build production-ready mobile applications! Some anecdota: Facebook, Palantir, and TaskRabbit are already using it in production for user-facing applications.
The fact that React Native actually renders using its host platform’s standard rendering APIs enables it to stand out from most existing methods of cross-platform application development, like Cordova or Ionic.

Existing methods of writing mobile applications using combinations of JavaScript, HTML, and CSS typically render using webviews. While this approach can work, it also comes with drawbacks, especially around performance. Additionally, they do not usually have access to the host platform’s set of native UI elements. When these frameworks do try to mimic native UI elements, the results usually “feel” just a little off; reverse-engineering all the fine details of things like animations takes an enormous amount of effort, and they can quickly become out of date.

step 2: — How to create react native app

Keeping in mind everyone I am going to explain about the creation of a new cool react-native project. First, of all, I would like to inform you that the latest react native version at present when I am writing this blog is 0.60.5. And above 0.60 react-native gave us a very convenient and easy facility which is above this version we do not need to run react-native link anymore. Above this version, we get the auto-linking facility in the app for packages.

The first step to create a new project is installing react-native CLI if already not present in your device. By executing this command in terminal

npm install -g react-native-cli

After successful CLI installation execute the command

react-native init yourProjectNameHere

For further steps as android studio setup and SDK installation or environment setpup please follow this link…Click here.

Now you are all set for boom 🧨 🧨 🧨 boom 🧨 🧨 🧨 🧨…..

step 3: — What and Why react-native-sms and react-native-get-sms?

Let us make you understand why we need to use react-native-sms and react-native-get-sms. I will try to make you understand in my language as if you are getting irritated with some unwanted service provider’s message or with any one’s message then, in that case, you can just pass that one person or organizations particular id and delete their messages on a single click like the same you can send someone, in particular, a text message from your app by clicking a single button or this is not the last thing you can achieve with this tutorial, you can also read any particular message in your app from your inbox.mail, chat, etc.
Here in this tutorial I have integrated and successfully achieved these awesome facilities but you can explore it more and implement much more things according to your need. Hence let’s go and see how we can implement these in very few easy steps.

Step 4: — Setup and Implementation

First of all, install the dependencies by executing this command: —

npm i react-native-sms
Then,
npm i react-native-get-sms-android

You can only install the second npm package and implement all functionalities but I have used react-native-sms to send sms and react-native-get-sms-android to read and delete sms.
Now we need to give some permissions to the application as: —

Android Permissions

Add permissions to your android/app/src/main/AndroidManifest.xml file.

...
<uses-permission android:name="android.permission.READ_SMS" />
<uses-permission android:name="android.permission.WRITE_SMS" />
<uses-permission android:name="android.permission.SEND_SMS" />
...

then,

In MainActivity.java copy and paste these on their defined places

import com.react.SmsPackage;
import com.tkporter.sendsms.SendSMSPackage;
@Override
public void onActivityResult(int requestCode, int resultCode, Intent data)
{
super.onActivityResult(requestCode, resultCode, data);
//probably some other stuff here
SendSMSPackage.getInstance().onActivityResult(requestCode, resultCode, data);
}

And in MainApplication.java import these lines

import com.tkporter.sendsms.SendSMSPackage;
import com.react.SmsPackage;

For common issues, you can visit these links.
1. https://www.npmjs.com/package/react-native-get-sms-android
2. https://www.npmjs.com/package/react-native-sms

We are all set to achieve the final result but before that let us make some interactive UI for the application.
View Logics: —

View Result Is: —

Click for actions
Permissions required
Reading data of particular Id

We have three buttons on the card as:-

Send SMS → Click to send SMS to a particular contact.

Read SMS → Click to read the message by passing the id of the message.

Delete SMS → Click to delete an SMS by passing the id of the message.

Now let's implement the logic part: —

Complete logic for Send, Read and Delete SMS

Here we have different options to set as actions during reading an SMS as:-

var filter = {
box: 'inbox', // 'inbox' (default), 'sent', 'draft', 'outbox', 'failed', 'queued', and '' for all
// the next 4 filters should NOT be used together, they are OR-ed so pick one
read: 0, // 0 for unread SMS, 1 for SMS already read
_id: 1234, // specify the msg id
address: '+1888------', // sender's phone number
body: 'How are you', // content to match
// the next 2 filters can be used for pagination
indexFrom: 0, // start from index 0
maxCount: 10, // count of SMS to return each time
};
/
Each sms will be represents by a JSON object represented below
{
"_id": 1234,
"thread_id": 3,
"address": "2900",
"person": -1,
"date": 1365053816196,
"date_sent": 0,
"protocol": 0,
"read": 1,
"status": -1,
"type": 1,
"body": "Hello There, I am an SMS",
"service_center": "+60162999922",
"locked": 0,
"error_code": -1,
"sub_id": -1,
"seen": 1,
"deletable": 0,
"sim_slot": 0,
"hidden": 0,
"app_id": 0,
"msg_id": 0,
"reserved": 0,
"pri": 0,
"teleservice_id": 0,
"svc_cmd": 0,
"roam_pending": 0,
"spam_report": 0,
"secret_mode": 0,
"safe_message": 0,
"favorite": 0
}
/

Now if you have followed each step and completed all the phases then you are all set to check out the output or you can just clone the repo and start from there.

Complete source code of this tutorial can be found at React_Native_Send_Get_Delete_SMS.

Conclusion

In this blog, you learned how to send read and delete an SMS from your device in the React Native apps for Android. You also learned how to integrate react-native-sms and react-native-get-sms in the react-native application. We also built the app in Android and ran on a device.

Next Steps

Now that you have learned how to send read and delete an SMS from your device in React Native apps for Android, here are some other topics you can look into

Firebase — Integrate Firebase | Analytics | Push notifications | Firebase CRUD
How To in React Native — Geolocation | Life cycle hooks | Image Picker | Redux implementation | Make API calls | Navigation | Translation | Barcode & QR code scan | Google Vision
Payments — Apple Pay | Stripe payments
Authentication — Google Login| Facebook login | Phone Auth | Twitter login | Anonymous Login
Create Instagram / Whatsapp Story Feature in React Native
React Native life cycle hooks | Implement Redux | Async actions with Redux
Create Awesome Apps in React Native using Full App

How to translate in React Native app- Globalization, Internationalization, and Text to Speech

Shadman — Sun, 29 Mar 2020 15:27:22 +0000

This post is all about implementing the multi-language translation and text to speech in your cool new react-native application. In this post, you will learn

How to implement react-native-tts in our app.
How to use i18n-js in your app.
How to implement react-native-localization in our app.

Before start, first you will need a React-Native app to start with, hence you can follow how to create a react-native app for beginners and start after that from here.

Complete source code of this tutorial is available here — RNInternationalizatio-TextToSpeech.

What is React-Native

React Native currently supports both iOS and Android and has the potential to expand to future platforms as well. In this tutorial, we’ll cover translation and text to speech implementation. The vast majority of the code we write will be cross-platform. And yes: you can use React Native to build production-ready mobile applications! Some anecdota: Facebook, Palantir, and TaskRabbit are already using it in production for user-facing applications.
The fact that React Native actually renders using its host platform’s standard rendering APIs enables it to stand out from most existing methods of cross-platform application development, like Cordova or Ionic.

What and why Internationalization and Text to speech?

Internationalization in React Native. Internationalization (i18n for short) is the process of adapting an application to work with different languages and regions.

i18n

In computing, there’s a common term used when discussing localization & internationalization called i18n which is basically the first and last letters in the word internationalization and the 18 characters between them (thanks Wikipedia for that).

Multi-language translation OR internationalization-localization is a growing need for every app that wants to target international customers. Till date, the majority of apps have been developed in English, no surprise! In this blog post, we will learn how to implement translation, OR technically — Internationalization + Localization in Ionic 4 apps.

First, we need to understand the steps involved in the process. Translations, thanks to Google, look very easy, but they are a bit involved in the case of apps and websites, in our case Ionic 4 apps. There are 3 major steps in the translation process in an app —

Translation Language — Detect the language you want to translate into. This can either be done automatically by detecting phone or browser’s language OR, can be done with user actions (say, by using a dropdown).For our use case, we will detect the device’s language using react-native-localization.
Prepare Language Text — You need to have a pre-translated dictionary (or JSON file) that stores the translations of all your app’s text in the Translation language. There are several ways to do this, as we’ll see in the following steps. This is mostly a manual process for smaller apps, but you can use online tools like this for quick translations, or like POEditor for more standardized workflow.
Translate — After the above two steps, you actually translate your app’s text to the Translation language text. We will use the i18n-js library for translating our texts.

Till now we got to know about our implementations and the basic idea of our need. Hence we will achieve the above target by following it step by step.

STEP 1: Prepare language JSON files

We will create these JSON files in android/app/src/main/assets/translations folder. The assets folder remains in the root even after a production builds, so the path does not break. I have created multiple JSON files en.json (English), fr.json (French),es.json (Spanish),ar.json (Arabic),it.json (Italian),hi.json (Hindi),ru.json (Russian) and many more.

Folder structure for i18n files are like below

en.json

{
"hello": "Hello shadman! Welcome to localizationa nd internationalization tutorial. Hope you enjoyed the tutorial and implemented it in your app."
}

The {{value}} and {{name_value}} are kind of variable/constants we can pass from our component. This can be used to keep a word constant across translations OR to give translations not supported by the library.

STEP 2: Implement libraries

We’ll start by adding an internationalization module to our React Native project called react-native-i18n:

npm i react-native-i18n --save

Now install the npm package react-native-localization

npm i react-native-localization

Now install the npm package react-native-tts for text to speech

npm i react-native-tts

We will implement both internationalization and text to speech together in our app but step by step.

Add Interactive UI to Translate and text to speech

Now you are ready to use the localization and text to speech function provided by the React-Native react-native-tts and react-native-localization package and get the result. Before this let us make a beautiful view to access these functions by clicking a button and getting the data in response.

The Result for the above code is:

Select your language
Check translation

As we have completed our UI for beautiful interaction, you can simply use the below function to complete translation and text to speech process.

Complete Logic of the application: —

Logics for Translation and Text-to-Speech

In the above gist, I have used a function “I18n.t()” to translate our texts in different languages.
This plugin obtains information and performs operations specific to the user’s locale, language, and timezone. Note the difference between locale and language: locale controls how numbers, dates, and times are displayed for a region, while language determines what language text appears as, independently of locale settings. Often developers use locale to set both settings, but there is no reason a user couldn’t set her language to “English” but locale to “French”, so that text is displayed in English but dates, times, etc., are displayed as they are in France. Unfortunately, most mobile platforms currently do not make a distinction between these settings.

In the above example, I have called some events in the constructor to load default values like start, cancel, finish, speech rate to control these actions.

Tts.addEventListener("tts-start", event =>
this.setState({ ttsStatus: "started" })
);
Tts.addEventListener("tts-finish", event =>
this.setState({ ttsStatus: "finished" })
);
Tts.addEventListener("tts-cancel", event =>
this.setState({ ttsStatus: "cancelled" })
);
Tts.setDefaultRate(this.state.speechRate);
Tts.setDefaultPitch(this.state.speechPitch);
Tts.getInitStatus().then(this.initTts);

After this, we have called initTts function.

initTts = async () => {
const voices = await Tts.voices();
const availableVoices = voices
.filter(v => !v.networkConnectionRequired && !v.notInstalled)
.map(v => {
return { id: v.id, name: v.name, language: v.language };
});
let selectedVoice = null;
if (voices && voices.length > 0) {
selectedVoice = voices[4].id;
try {
await Tts.setDefaultLanguage(voices[0].language);
} catch (err) {
// My Samsung S9 has always this error: "Language is not supported"
console.log(setDefaultLanguage error, err);
}
await Tts.setDefaultVoice(voices[0].id);
this.setState({
voices: availableVoices,
selectedVoice,
ttsStatus: "initialized"
});
} else {
this.setState({ ttsStatus: "initialized" });
}
};

We have used this function to filter available languages and voices.
After executing these functions we can achieve our requirement. The code view and output of the above function in my app are as: —

Text To speech View

In the above image, you can type any thing in the text input field and click on the Start reading Text button to listen to the text invoice.
A list of available voices is on the list which you can select for speech either for male or female.
To Install (additional) language data

Shows the Android Activity to install additional language/voice data.

Tts.requestInstallData();

There are some methods that you can use to get features according to your requirement —

Speaking

Add utterance to the TTS queue and start speaking. Returns promise with utteranceId.

Tts.speak('Hello, world!');

Additionally, speak() allows to pass platform-specific options ‘voiceId’ on IOS and ‘params’ on Android to underlying platform API:

Tts.speak('Hello, world!', { iosVoiceId: 'com.apple.ttsbundle.Moira-compact' });
Tts.speak('Hello, world!', { androidParams: { KEY_PARAM_PAN: -1, KEY_PARAM_VOLUME: 0.5, KEY_PARAM_STREAM: 'STREAM_MUSIC' } });

For more detail on androidParams properties, please take a look at official android documentation. Please note that there are still unsupported key with this wrapper library such as KEY_PARAM_SESSION_ID. The following are brief summarization of currently implemented keys:

KEY_PARAM_PAN ranges from -1 to +1.
KEY_PARAM_VOLUME ranges from 0 to 1, where 0 means silence. Note that 1 is a default value for Android.
For KEY_PARAM_STREAM the property, you can currently use one of STREAM_ALARM, STREAM_DTMF, STREAM_MUSIC, STREAM_NOTIFICATION, STREAM_RING, STREAM_SYSTEM, STREAM_VOICE_CALL,

Stop speaking and flush the TTS queue.

Tts.stop();

Waiting for initialization

On some platforms, it could take some time to initialize the TTS engine, and Tts.speak() will fail to speak until the engine is ready.

To wait for successful initialization you could use getInitStatus() call.

Tts.getInitStatus().then(() => {
Tts.speak('Hello, world!');
});

Ducking

Enable lowering other applications output level while speaking (also referred to as “ducking”).

Tts.setDucking(true);

List Voices

Returns list of available voices

(not supported on Android API Level < 21, returns empty list)

Tts.voices().then(voices => console.log(voices));
// Prints:
// [ { id: 'com.apple.ttsbundle.Moira-compact', name: 'Moira', language: 'en-IE', quality: 300 },
// ...
// { id: 'com.apple.ttsbundle.Samantha-compact', name: 'Samantha', language: 'en-US' } ]

Voice fieldDescriptionidUnique voice identifier (e.g. com.apple.ttsbundle.Moira-compact)nameName of the voice (iOS only)languageBCP-47 language code (e.g. 'en-US')qualityVoice quality (300 = normal, 500 = enhanced/very high)latencyExpected synthesizer latency (100 = very low, 500 = very high) (Android only)networkConnectionRequiredTrue when the voice requires an active network connection (Android only)notInstalledTrue when the voice may need to download additional data to be fully functional (Android only)

Set default Language

Tts.setDefaultLanguage('en-IE');

Set default Voice

Sets default voice, pass one of the voiceId as reported by a call to Tts.voices()

(not available on Android API Level < 21)

Tts.setDefaultVoice('com.apple.ttsbundle.Moira-compact');

Set default Speech Rate

Sets default speech rate. The rate parameter is a float where 0.01 is a slowest rate and 0.99 is the fastest rate.

Tts.setDefaultRate(0.6);

There is a significant difference to how the rate value is interpreted by iOS and Android native TTS APIs. To provide unified cross-platform behavior, translation is applied to the rate value. However, if you want to turn off the translation, you can provide optional skipTransform parameter to Tts.setDefaultRate() to pass rate value unmodified.

Do not translate the rate parameter:

Tts.setDefaultRate(0.6, true);

Set default Pitch

Sets default pitch. The pitch parameter is a float where 1.0 is a normal pitch. On iOS min, pitch is 0.5 and max pitch is 2.0

Tts.setDefaultPitch(1.5);

Here in the tutorial, successfully implemented the plugin and got the perfect result. You can follow all the steps and achieve this very easily or you can clone my repo on Github for both the implementations here and enjoy 😎 😎 😎 🕺 🕺 🕺..…

Conclusion

In this post, we learned how to translate text in multi-language and text to speech and use it in React-Native applications. Since the packages are amazingly light and have great documentation, it is the developers’ first choice when it comes to creating translation app and text to speech.

Complete source code of this tutorial is available here — RNInternationalizatio-TextToSpeech.

Next Steps

Now that you have learned the implementation of translation and text to speech in React-Native, you can also try

Firebase — Integrate Firebase | Analytics | Push notifications | Firebase CRUD
How To in React Native — Geolocation | Life cycle hooks | Image Picker | Redux implementation | Make API calls | Navigation | Barcode & QR code scan | Send & Read SMS | Google Vision
Payments — Apple Pay | Stripe payments
Authentication — Google Login| Facebook login | Phone Auth | Twitter login| Anonymous Auth
Create Instagram / Whatsapp Story Feature in React Native
React Native life cycle hooks | Implement Redux | Async actions with Redux
Create Awesome Apps in React Native using Full App

If you need a base to start your next React Native app, you can make your next awesome app using React Native Full App

Progressive Web App (PWA) Features in Ionic 4

Shadman — Sun, 29 Mar 2020 09:22:57 +0000

In this tutorial, we will learn all the features of PWA in ionic 4 considering why you should definitely consider PWA as your next project in Ionic 4.
What are the importance and benefits of PWA in ionic 4?

This post is all about the features and advantages of PWA in your cool new app. In this post, you will learn in step by step

What is PWA and reason to use?
How to implement PWAin an Ionic app.
Features of PWA in ionic app.

Before start, first you will need an ionic app to start with, hence you can follow how to create an ionic app for beginners and start after that from here.

What is Ionic 4

I know most of the readers reading this blog will know what is Ionic 4, but just for the sake of beginners, I explain this in every blog.

Ionic is a complete open-source SDK for hybrid mobile app development. Ionic provides tools and services for developing hybrid mobile apps using Web technologies like CSS, HTML5, and Sass. Apps can be built with these Web technologies and then distributed through native app stores to be installed on devices.

In other words — If you create native apps in Android, you code in Java. If you create native apps in iOS, you code in Obj-C or Swift. Both of these are powerful, but complex languages. With Cordova (and Ionic) you can write a single piece of code for your app that can run on both iOS and Android (and windows!), that too with the simplicity of HTML, CSS, and JS. I’m a huge fan of Ionic and been developing Ionic apps for last 4 years.

What is PWA?

By now, you’ve probably heard that Progressive Web Apps are the future of all mankind. They’ll bring world peace, end hunger, save the rainbows and unicorns, bring balance to the force, and a whole lot more. In the process, they might even push the mobile web forward, bring parity to web and native apps, and help mobile developers reach more users beyond the confines of the app stores.

That all sounds great…but what are Progressive Web Apps, exactly?

“A Progressive Web App uses modern web capabilities to deliver an app-like user experience.” — Progressive Web Apps

Native app store apps do things like send push notifications, work offline, look and feel like an app (as Apple and Google have imagined them), load on the home screen, and so on and so forth. Mobile Web Apps accessed in a mobile browser, by comparison, historically haven’t done those things. Progressive Web Apps fix that with new Web APIs, new design concepts, and new buzzwords.

To be clear, I’m talking about browser mobile web apps. Hybrid apps, like Ionic with Cordova, run uninhibited in the native app environment, with all the features we expect of any native app. But pull out the web content from a hybrid app and load it in a mobile browser, and the app is thusly constrained by the features of the browser (for a variety of good security and API standardization reasons).

Progressive Web Apps bring features we expect from native apps to the mobile browser experience in a way that uses standards-based technologies and run in a secure container accessible to anyone on the web.

On the whole, Progressive Web Apps describe a collection of technologies, design concepts, and Web APIs that work in tandem to provide an app-like experience on the mobile web. Let’s walk through some of the core tenets of Progressive Web Apps.

Why do we need Progressive Web Apps?

To understand why we need progressive web apps, let’s first talk about some of the biggest challenges we are facing today with native and responsive web apps:

Internet speed: depending on where you live internet may be a nightmare. You may have not realized this, but 60% of the world’s population is still using 2G internet.

Slow website load: Do you know how long a user waits to close a website if it’s too slow? Only three seconds! 53% of users abandon a website if it loads too slow.

High friction: People don’t want to install native apps. An average user installs 0 applications in a month. Contrast this with how many new web sites they visit each month. Also, think about how many apps you downloaded and eventually ended up using just once or very few times?

User engagement: Responsive mobile web sites have much more reach than native apps, however, they lack basic functionalities like push notifications and offline support. That causes that most of the users of responsive web sites are not actively engaged compared to native apps engagement levels.

PWAs help in solving these problems. Let’s go through the main benefits of using progressive web apps.

Who’s building PWAs?

Brands large and small are jumping on Progressive Web Apps to create better user experiences, anywhere the web runs. Here are some of our favorites.

Starbucks
Pinterest
Uber
Twitter and many more…

Features of Progressive Web App in ionic 4

Some important and mindblowing features of PWA in ionic 4 are as follows —

i. Offline service Worker

ii. Firebase phone authentication

iii. Push notifications for web app

iv. Full-Screen browser mode

v. Launch from the user’s home screen

vi. Web app install banner prompt

Here we will discuss and implement each feature one by one but before that let’s implement PWA in an ionic 4 app by following these steps as I consider you have already created an application in ionic 4: —

Right now my app looks like this:

Basic ionic 4 app screen

Let's add some pages and styles in the above default created application.
Now make some changes by creating some attractive pages and check it out.
Before these, let's check the package.json of the current ionic 4 application.

{
"name": "IONICPWA",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/common": "~8.1.2",
"@angular/compiler": "~8.1.2",
"@angular/core": "~8.1.2",
"@angular/forms": "~8.1.2",
"@angular/platform-browser": "~8.1.2",
"@angular/platform-browser-dynamic": "~8.1.2",
"@angular/router": "~8.1.2",
"@ionic-native/core": "^5.0.0",
"@ionic-native/splash-screen": "^5.0.0",
"@ionic-native/status-bar": "^5.0.0",
"@ionic/angular": "^4.7.1",
"core-js": "^2.5.4",
"rxjs": "~6.5.1",
"tslib": "^1.9.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/architect": "~0.801.2",
"@angular-devkit/build-angular": "~0.801.2",
"@angular-devkit/core": "~8.1.2",
"@angular-devkit/schematics": "~8.1.2",
"@angular/cli": "~8.1.2",
"@angular/compiler": "~8.1.2",
"@angular/compiler-cli": "~8.1.2",
"@angular/language-service": "~8.1.2",
"@ionic/angular-toolkit": "~2.0.0",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-r
eporter": "~2.0.1",
"karma-jasmine": "~2.0.1","karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.4.3"
},
"description": "An Ionic project"
}

The result after some UI changes: —

Card Page added

Let us convert the application in ionic 4 PWA application by following these steps…

The two main requirements of a PWA are a Service Worker and a Web Manifest. While it’s possible to add both of these to an app manually, the Angular team has an @angular/pwa package that can be used to automate this.

The @angular/pwa package will automatically add a service worker and an app manifest to the app. To add this package to the app, execute the following command in your project directory:

ng add @angular/pwa

The command automatically does the following:

Creates the configurations the service worker
Creates a default iconography for PWA standards
Updates the angular.json file to enable service worker support
Add @angular/pwa to your package.json
Adds the required meta tags to the index.html
Creates a ngsw-config.json file with your PWA configs

Once this package has been added run ionic build --prod and the www directory will be ready to deploy as a PWA.
After executing the above command in your project directory, will bring some changes in your package .json as —

Changes observed during installation

Two new files named manifest.webmanifest and ngsw-config.json in your app’s files.

ngsw-config.json
package.json after PWA installation

and in app.module.ts

app.module.ts

Now we have converted our application from native Ionic application to Ionic 4 PWA application.
Let us integrate service-worker in this application but before that, we should get to know what is service-worker and why we need this in ionic 4 application.

Service-Worker in Ionic 4 PWA: —

Perhaps the most critical step in transforming your Ionic application into a PWA is to set up a service worker. A service worker is a script that runs separately to the application. It doesn’t have access to the DOM like a normal script would, but it can do things like handle network requests and caching.

Service Workers are an incredibly powerful, and equally as confusing, the technology behind a Progressive Web App. They power offline functionality, push notifications, background content updating, content caching, and a whole lot more.

At a high level, a Service Worker is a worker script that works behind the scenes, independent of your app, and runs in response to events like network requests, push notifications, connectivity changes, and more.

If using service workers to handle network requests and cache resources sounds difficult there’s no need to worry — Ionic handles it all for us. The code for the service worker is already included in your Ionic application.

If an app is being deployed to other channels such as Cordova or Electron, you can remove the "serviceWorker": true flag from the angular.json file.

The service worker can be generated by running: we just need to execute the below command.

ionic build --prod --service-worker

Note: Features like Service Workers and many JavaScript APIs (such as geolocation) require the app be hosted in a secure context. When deploying an app through a hosting service, be aware that HTTPS will be required to take full advantage of Service Workers.

Firebase phone authentication: —

Ionic 4 PWA gives us the facility to authenticate a user using phone authentication. With the help of phone authentication in your app, you can check or prevent a user from login application without registering for the application.
We will cover the firebase phone authentication in ionic 4 PWA application in the next blog.

Push Notifications in ionic 4 PWA Application: —

Ok, I’ll try to define it in my own language. How do you know when you get a new message on Whatsapp, Facebook or Twitter if the app is closed? Yes, those small messages that pop down from the top of the screen, showing new messages, updates or news are called Push notifications (or simply Push)

Yes, those …… are push notifications

One might wonder why to integrate Push notifications in an app. Let me tell you, push notifications is the single biggest feature to keep your users engaged with your app. People are obsessed with notifications. People keep checking their phones regularly so they don’t miss any notification. If your app sends regular (and interesting) push, your users will be happy, and you’ll see much less app uninstalls than you’ll see without push.

We will implement Push Notifications in ionic 4 PWA application in the nest blog. You can follow our Firebase push notification blog to implement in ionic 4 application.

Deploying the application

Firebase

To deploy our app on firebase and test it online we need to create a firebase project for this application.
To create a firebase project just follow this and start after completing the steps suggested in the blog. OR you can follow this blog too.

Next, in a Terminal, install the Firebase CLI:

$ npm install -g firebase-tools

With the Firebase CLI installed, run firebase init within your Ionic project. The CLI prompts:

“Which Firebase CLI features do you want to set up for this folder?” Choose “Hosting: Configure and deploy Firebase Hosting sites.”

“Select a default Firebase project for this directory:” Choose the project you created on the Firebase website.

“What do you want to use as your public directory?” Enter “www”.

Note: Answering these next two questions will ensure that routing, hard reload, and deep linking work in the app:

Configure as a single-page app (rewrite all urls to /index.html)?” Enter “Yes”.

“File www/index.html already exists. Overwrite?” Enter “No”.

A firebase.json config file is generated, configuring the app for deployment.

I hope you have successfully done all the steps above and ready to deploy your app.

Next, build an optimized version of the app by running:

$ ionic build --prod

Last, deploy the app by running:

$ firebase deploy

App deployed on firebase

When you hit the deployed url then you will get the following results

Prompt to add on the device screen
prompt to confirm add to the home screen
added to home screen

I the above image we can see that the app icon is an angular icon, here angular provides its default icon in the manifest. You can change the icon by generating required sizes and add it in the assets folder and edit the manifest.webmanifest file

manifest.webmanifest

Now you are all set and ready to add multiple features in your ionic 4 PWA application.

Conclusion

Progressive Web Apps are equal parts of new Web APIs, design patterns, and marketing fluff. The mobile web comes closer to parity with installable app store apps through app manifest and homescreen install support, background worker functionality with Service Workers, faster load time with App Shell, and a renewed belief that web developers, too, can build amazing mobile app experiences.

Next Steps

Now that you have learned the features and implementation of PWA in Ionic 4, you can also try

Ionic 4 Payment Gateways — Stripe | PayPal | Apple Pay | RazorPay
Ionic 4 Charts with — Google Charts | HighCharts | d3.js | Chart.js
Ionic 4 Social Logins — Facebook | Google | Twitter
Ionic 4 Authentications — Via Email | Anonymous
Ionic 4 Features — Geolocation | QR Code reader | Pedometer
Media in Ionic 4 — Audio | Video | Image Picker | Image Cropper
Ionic 4 Essentials — Native Storage | Translations | RTL
Ionic 4 messaging — Firebase Push | Reading SMS | Local notification
Ionic 4 with Firebase — Basics | Cloud functions

You may also check our Ionic 4 PWA works: —

if you need a base to start your next Ionic 4 app, you can make your next awesome app using Ionic 4 Full App

Implement Google Vision in React Native apps

Shadman — Sat, 28 Mar 2020 11:09:10 +0000

In this tutorial you will get know how can we integrate Google Vision API in our React Native application and get responses on text and image recognition. The app supports various features including but not limited to Object Detection, Labeling Images, Text Recognition, Face Detection using Google Vision API.

Complete source code of this tutorial can be found at ReactNativeGoogleVision

In this tutorial we will focus on some basic and major parts where many expert developers or juvenile beginners gets confused. Hence we will check each and every things in step-by-step as: —

What and why React Native
What and why Google Vision API
How to create react native app
How to get google vision API key
Implementation and setup
Working example

Step 1: — What and why React Native ?

Similar to React for the Web, React Native applications are written using a mixture of JavaScript and XML-Esque markup, known as JSX. Then, under the hood, the React Native “bridge” invokes the native rendering APIs in Objective-C (for iOS) or Java (for Android). Thus, your application will render using real mobile UI components, not webviews, and will look and feel like any other mobile application. React Native also exposes JavaScript interfaces for platform APIs, so your React Native apps can access platform features like the phone camera, or the user’s location.

Existing methods of writing mobile applications using combinations of JavaScript, HTML, and CSS typically render using webviews. While this approach can work, it also comes with drawbacks, especially around performance. Additionally, they do not usually have access to the host platform’s set of native UI elements. When these frameworks do try to mimic native UI elements, the results usually “feel” just a little off; reverse-engineering all the fine details of things like animations takes an enormous amount of effort, and they can quickly become out of date.

Step 2: — What and why Google Vision API ?

Google Vision API is also known as Cloud Vision API.

Cloud Vision API allows developers to easily integrate vision detection features including image labeling, face, and landmark detection, optical character recognition (OCR), and tagging of explicit content, within applications.
Cloud Vision API offers us the following features to be applied on the images as follow: —

features: [

{ type: "LABEL_DETECTION" },

{ type: "LANDMARK_DETECTION" },

{ type: "FACE_DETECTION" },

{ type: "LOGO_DETECTION" },

{ type: "TEXT_DETECTION" },

{ type: "DOCUMENT_TEXT_DETECTION" },

{ type: "SAFE_SEARCH_DETECTION" },

{ type: "IMAGE_PROPERTIES" },

{ type: "CROP_HINTS" },

{ type: "WEB_DETECTION" }

],

For more information about Google Vision API, go to its official documentation here.

Brief History of Machine Learning

Arthur Samuel, a pioneer in the field of artificial intelligence and computer gaming, coined the term “Machine Learning”. He defined machine learning as — “Field of study that gives computers the capability to learn without being explicitly programmed”.
In a very layman manner, Machine Learning(ML) can be explained as automating and improving the learning process of computers based on their experiences without being actually programmed i.e. without any human assistance. The process starts with feeding good quality data and then training our machines(computers) by building machine learning models using the data and different algorithms.

ML is one of the most impressive technologies that one would have ever come across.

Step 3: — How to create react native app ?

Now till here, i expect all of you have created your own react-native projects.
Google Cloud’s Vision API offers robust pre-trained machine learning models through REST and RPC APIs. It assigns labels to images and quickly classifies them into millions of predefined classes or categories. It can detect objects and faces, read the printed or handwritten text, and build valuable metadata into your image catalog.

Step 4: —How to get google vision API key ?

Google Cloud’s Vision API offers robust pre-trained machine learning models through REST and RPC APIs. It assigns labels to images and quickly classifies them into millions of predefined classes or categories. It can detect objects and faces, read the printed or handwritten text, and build valuable metadata into your image catalog.

For implementing Google Vision in your react-native app, you can visit the given link or, follow certain steps:

Sign in to your Google Account.
Select or Create a Google Cloud Platform Project.Please make sure that billing is enabled for your Google Cloud Platform project. To enable billing, follow the procedure provided in the given link.N.B.: You will not be able to get any response from API until you enable the billing.
To Enable the Cloud Vision API.→ First, select a project.→ After selecting the project, click on “Go to API’s overview” button.→ Click on “Enable API and Services”,→ Search for Cloud Vision API.→ Click on the enable button.→ To use this API, click on Create Credentials.→ Choose the Cloud Vision API from the list.→ Click on “Yes I’m using one or both” and proceed further.→ Click on the Done button.→ Click on “Create Credentials”.→ Click “API key” from options.→ Copy the API key popped up and save it at a safer place. It should not be made public.→ Click the close button.

Congrats Your API key has been generated.

Now you are all set to start with google vision but before wo start coding let us integrate the most important thing for this application and that is the Camera on, so we will use react-native-camera npm package to take pictures and send those to the Google Vision API for responses,
Here I would like to inform you that the react-native-camera npm package has some bugs so you would need to install this package from the master branch.

Execute the command below to integrate camera in your application: —

yarn add react-native-camera@git+https://git@github.com/react-native-community/react-native-camera.git

You can get help from here if you get any common issues while integrating it.

Step 5: — Implementation and setup

We are now totally set to do some magic with image and google vision API , So let set go for the magic to happen…

First of all let us make some cool UI for opening the camera and showing the result.

Code View: —

Result: —

Click on scan button to open camera
Camera on mode
Loading response

logicView: —

Result: —

Google Vision responses

Here, we have used react-native fetch method to call the API using POST method and receive the response with that.

In the code above you have “config.googleCloud.api + config.googleCloud.apiKey” which will be google cloud api and another is your api which you get after creating account and activating Google Vision Api in google console.

In the above images i have only printed webEntities responses but you can pass the features in the body and get the required responses.

Complete source code of this tutorial can be found at ReactNativeGoogleVision .

Conclusion

In this blog, you learnt how to implement Google Vision API in React Native apps for Android. You also learnt how to integrate react-native-camera in react-native application. We also built the app in Android and ran on a device.

Complete source code of this tutorial can be found at ReactNativeGoogleVision .

Next Steps

Now that you have learnt about setting up to implement Google Vision API in React Native apps for Android, here are some other topics you can look into

Firebase — Integrate Firebase | Analytics | Push notifications | Firebase CRUD
How To in React Native — Geolocation | Life cycle hooks | Image Picker | Redux implementation | Make API calls | Navigation | Translation | Barcode & QR code scan | Send & Read SMS | Google Vision
Payments — Apple Pay | Stripe payments
Authentication — Google Login| Facebook login | Phone Auth | Twitter login | Anonymous Login
Create Instagram / Whatsapp Story Feature in React Native
React Native life cycle hooks | Implement Redux | Async actions with Redux
Create Awesome Apps in React Native using Full App

If you need a base to start your next React Native app, you can make your next awesome app using React Native Full App

Twitter Login in React Native Apps Using Firebase

Shadman — Sat, 28 Mar 2020 10:17:18 +0000

In this tutorial, you will get to know how we can implement both React-Native Firebase Social Auth Twitter login in our app and how to integrate react-native-twitter-signin npm package for twitter login in our cool application, and then test it on Android.

Complete source code of this tutorial is available here — React-Native-twitter-login (android branch)

Twitter Login — What and why?

There are several reasons why you should use a Twitter login in your app

Ease of use — When a new user uses your app, only two buttons clicks are required to login using Twitter. In other scenario, user will have to type in an email/password and login
No “forgot password” — When your app uses Twitter login, the user does not have to worry about forgetting password for your app’s login
No “verify email” — If you use a custom-email authentication of your own, you will have to verify the email if it is a valid one or not. Twitter login will always have a valid email/phone number associated.
Single solution — Twitter login can allow your users to use single login credentials across multiple devices
Twitter integration — If your app uses Twitter authentication, you can use Twitter APIs inside your app as well. This can include fetching user tweets etc.
Trust — Nowadays, people generally trust social logins more over custom email logins. Social logins follows standard privacy protocols and hence are more reliable for information sharing.

Authentication in React Native

React Native has been around us for around 4 years and has been very popular among developers for its ease of usage over Swift / Java. Also, you get to keep single source code for both Android and iOS app. What more can a developer ask for!

React Native 0.60.5 is the latest version (at the time of writing this post), and is much more reliable and robust than previous versions. It also includes breaking changes related to AndroidX, but don’t worry we’ll create an Android test app as well.

There are several ways of Authentication in React Native Apps

Social logins — Social logins are a popular and easy way of authentication in mobile apps. You must have seen Google, Facebook, Instagram logins in almost all the modern apps. Social logins are easy to use and more reliable for quick integrations.
Create your own back-end — You can create your own back-end in Node.js, Go, Django or Ruby-on-rails, and connect your app authentication to your own back-end. This method is favored by developers who need full control over the user authentication. But this method is the most time taking one as well.
Back-end as a Service (BaaS) — You can use pre-built BaaS platforms which allows easy integration of authentication in your apps. Basically, these platforms provide you a ready-made back-end, so you don’t have to make one on your own. Firebase, Parse, Back4App are some BaaS platforms.

Firebase is the most popular among these for mobile apps, which we’ll study in the next section

Firebase

Firebase is a Backend-as-a-Service (BaaS) platform. It started as a YC11 startup and grew up into a next-generation app-development platform on Google Cloud Platform. It is getting popular by the day because of the ease of integration and a variety of functionalities available on it.

A lot of quick integrations are available with Firebase. Some of these are listed below:

Real-time database
Email Authentication
Social logins
In-app messages
Push notifications
Analytics
Crashlytics
Remote config

Firebase is quickly growing to become the most popular mobile app back-end platform.

Firebase Authentication Options

Firebase not only provides ready-made email authentication but also provides authentication using variety of social logins. You can see the authentication options available with Firebase

Authentication options available in Firebase

We will use Firebase to store user profile information once the Twitter login is done. This is the preferred method, as it is reliable for both apps and PWA.

Steps for Twitter authentication

We will follow these step-by-step instructions to create our React Native app with Twitter authentication

Step 1: Create a Firebase Project and Add android platform

‌Step 2: Enable Twitter Sign-In in Firebase project

Step 3: Create a Basic React Native app

‌Step 4: Install the react-native-twitter-signin package for Twitter Login

Step 5: Implement Twitter auth functions in RN app

Step 6: Test your app on Android

Step 7: Use Firebase to store user info and handle Auth

So let’s jump right in

Step 0: Create a SHA-1 Signature

This is an important step where many developers commit mistake. That’s why Step 0

This is a way for the app and Firebase to recognize the system from which the app was developed. It is generated based on the system and yourkeystorefile.

Generate the key using the following steps : —

Method 1: —

step 1:-- Open Android Studio
step 2:-- Open Your Project
step 3:-- Click on Gradle (From Right Side Panel, you will see Gradle Bar)
step 4:--  Click on Refresh (Click on Refresh from Gradle Bar , you              will see List Gradle scripts of your Project)
step 5:-- Click on Your Project (Your Project Name form List)
step 6:-- Click on Tasks/Android
step 7:-- Double Click on signingReport (You will get SHA1 and MD5 in Run Bar).
Now you are all done , check your keys in results.

Method 2: —

Generate the key using the following command

$ keytool -exportcert -keystore <<keystore file location>> -list -v

Important: This is where many people commit a mistake. The keystore file in the above command is NOT the default keystore file of your system. React Native automatically generates a debug.keystore for your Android project, which resides in the Android project folder.

Step 1: Create a Firebase Project

For authentication, we need a back-end. For this tutorial, Firebase is our back-end, so we need to configure a few things in Firebase. First of all, we’ll create a new Firebase project and new app inside it.

1.1 If you don’t have an existing Firebase Project

If you already have a Firebase project, skip to step 1.2. Otherwise, create a new Firebase project by going to Firebase Console. Give your project a name and that’s it!

1.2 Create and attach new app to the project

Now that the project is created, create a new Android app in the project dashboard.

Add new app to the project

Add the SHA1 key you generated in Step 0 and add it in Debug signing certificate SHA-1 field

Just mention the correct package name of your app in the Android package nameinput. For me, it is com.twitterlogin. Give it a nickname to remember.

Next step, download the google-services.json file and put it in the android/appfolder of your project. You can skip the rest of the steps for now. Your app is created now, and you should see it in the dashboard.

‌Step 2: Enable Twitter Login in Firebase

Now that your app is connected to Firebase project, we need to go into our Firebase console and enable Twitter authentication for our app.

‌Once you’re inside the app’s dashboard, you’re going to go into

Authentication → Sign-In Method → Twitter

and click the Enable toggle.

Enable google-login and save Web-client ID

Give a name to for your Auth consent screen and save your web client Id as well. This will be used to integrate the React Native app with Firebase.

Step 3: Create a basic React Native app

First, make sure you have all pre-requisites to create a react-native app as per the official documentation.

At the time of this post, I have React-Native version 0.60.5

Create a blank react-native app (Replace myApp with your own name)

$ react-native init RNTwitterLogin

This will create a basic React-native app which you can run in a device or simulator. (let’s run Android)

Let’s run the app in Android using (I’m using a real device)

$ react-native run-android

You’ll see the default start screen

Default start screen for React Native app

Change the UI of this front page by changing App.js and the page will look like this.

Code View: —

Result: —

Step 4: Install the package for Twitter Login using `react-native-twitter-signin package`

To enable Twitter Login, we’ll install a package named react-native-twitter-signin. This is a widely used package for Twitter Login, and also very reliable.

4.1 Install package

Install the package using

$ yarn add react-native-twitter-signin

Linking the package is not required above react-native version 0.60.

4.2 Make sure you have latest SDK and other android packages

You should always try to stay updated with latest Android SDK and other packages. At the time of this post, my Android SDK is 9.0 (Pie) and here’s a list of my other packages

4.3 Add google-services.json file to project

If you haven’t done it yet, download the google-services.json file from your Firebase project and put it in the android/appfolder of your RN project.

Place google-services.json in android/app folder

Now let's see some tricky parts for this package —

There is an unknown error which has very less solution on any platform like StackOverflow or others but I found that solution after too many hecks,
First of all, you need to install the below package to get it in work

npm install --save GoldenOwlAsia/react-native-twitter-signin#master
instead of
yarn add react-native-twitter-signin

Now you are all set to install packages
4.3.1: —

Go to Twitter Apps to create your app so that you can obtain API key and secret, note:

Remember to set a Callback Url, whatever will work
By default, Twitter won’t allow you to grab user’s email, so you have to apply for permission for your app to retrieve user’s email
Here is how callbacks would look like:

It may take up to 72 hrs to verify your developer's account, so stay calm and code rest!

4.4 Update Android configuration files

Update android/build.gradle with latest versions. My configuration is

buildscript {
ext {
buildToolsVersion = "28.0.3"
minSdkVersion = 16
compileSdkVersion = 28
targetSdkVersion = 28
supportLibVersion = "28.0.0"
}
...
dependencies {
classpath 'com.android.tools.build:gradle:3.4.1' // <--- use this version or newer
classpath 'com.google.gms:google-services:4.3.0' // <--- use this version or newer
}
...
allprojects {
repositories {
mavenLocal()
google() // <--- make sure this is included
jcenter()
maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
url "$rootDir/../node_modules/react-native/android"
}
}
}

Update android/app/build.gradle dependencies. My configuration looks like this

...
dependencies {
implementation fileTree(dir: "libs", include: ["*.jar"])
implementation "com.android.support:appcompat-v7:23.0.1"
implementation "com.facebook.react:react-native:+"
implementation project(':react-native-twitter-signin')/ <--- add this line
}
apply plugin: 'com.google.gms.google-services' // <--- this should be the last line

Now let’s setup react-native-firebase authentication in your application —

Connect Firebase to your React Native app using react-native-firebase

react-native-firebase is a popular package to connect React Native apps to Firebase various functionalities.

React-native-firebase also recommends using react-native-twitter-signinfor Twitter authentication, which we just used above. The react-native-twitter-signin the library allows us to login (using twitter) which returns an optional accessToken and authToken. Once we have the two tokens we need to create a credential using TwitterAuthProvider#credential and then sign in with that credential using auth#signInWithCredential

Install react-native-firebasepackage using

$ yarn add react-native-firebase

This installs the package, but it still needs to be connected to your android app properly

Modify Android config files

If you have done the previous steps (in Step 4.4) correctly, then you only need to add these things further

Add following Firebase modules in dependencies in android/app/build.gradle

dependencies {
.....
implementation project(':react-native-firebase')
implementation "com.google.android.gms:play-services-base:17.1.0"
implementation "com.google.firebase:firebase-core:17.0.9"
implementation 'com.google.firebase:firebase-auth:19.0.0'
....
}

Troubleshooting — If you face issues in the above settings, visit the documentation of react-native-firebase to get detailed steps for your RN versions.

For older versions of React Native, in MainApplication.java you should have the following code. For my version 0.60.5, there is a need to edit MainApplication.java

import com.goldenowl.twittersignin.TwitterSigninPackage; // <---public class MainApplication extends Application implements ReactApplication {
......
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
packages.add(new RNFirebaseAuthPackage());// <-- this needs to be in the list
) 
);
}
......}

Wow, you have done well. Now, you are all set to take the taste of your own cooked food!

Code for Twitter Signin : —

Note, firebase.auth().signInWithCredential is the method used to store user credentials in the back-end.

Here,

TwitterKeys.TWITTER_CONSUMER_KEY = api key of the application TdewitterKeys.TWITTER_CONSUMER_SECRET = secret key of the app

You can get both keys after creating the twitter developer’s account and registering the app on that. To create a developers account go here.

When you will click on the SignIn button then you will be redirected to some pages for authentication or you may say confirmation of your valid account as follow:

Step 1 Clicked: —

Click on login button

Step 2 Enter credentials : —

Enter your Twitter accounts credentials here

Step 3 Authorize app : —

Authorize application confirmation

Now you are in…

User Logged in.

Now, run the app again using CLI or Android Studio, log in as usual and you’ll see that a user pops up in Firebase Users list

User registered in Firebase via Twitter Login

In the whole setup, you may encounter a problem related to access token from react-native firebase so for that solution you would need to write twittersdk:// as callback URL in the in your attached twitter app.

Complete source code of this tutorial is available here — React-Native-twitter-login (android branch)

You have successfully

Logged in a user using Twitter Login in React Native
Attached the authentication to Firebase to store user credentials

🎉 🎉 🎉 🎉 🎉 🎉 🎉

Firebase, further

You can now go ahead and attach more Firebase functions like logout, silent login, user info, etc. since you have user credentials in Firebase.

Note, not all userInfo that we receive after Twitter Login gets stored in Firebase by default. If you want all the information to be stored, then you should use the FireStore database to store it, and retrieve it when required.

For more details on functions like

CRUD operations in Firestore
Image Upload
Phone authentication

check out this blog.

Check out this blog for more details on Firebase with React Native Apps

Conclusion

In this blog, you learned how to implement Twitter Login in React Native apps for Android. You also learned how to attach this authentication to Firebase for better handling using back-end. We also built the app in Android and ran on a device.

Complete source code of this tutorial is available here — React-Native-twitter-login (android branch)

Next Steps

Now that you have learned about setting up React-Native Firebase social auth Twitter Login in React Native apps, here are some other topics you can look into

Firebase — Integrate Firebase | Analytics | Push notifications | Firebase CRUD
How To in React Native — Geolocation | Life cycle hooks | Image Picker | Redux implementation | Make API calls | Navigation | Translation | Barcode & QR code scan | Send & Read SMS | Google Vision
Payments — Apple Pay | Stripe payments
Authentication — Google Login| Facebook login | Phone Auth | Twitter login | Anonymous Login
Create Instagram / Whatsapp Story Feature in React Native
React Native life cycle hooks | Implement Redux | Async actions with Redux
Create Awesome Apps in React Native using Full App

If you need a base to start your next React Native app, you can make your next awesome app using React Native Full App

React-Native Firebase Phone Authentication with CRUD Operations and Image Upload on storage

Shadman — Fri, 27 Mar 2020 01:11:05 +0000

This post is all about authenticating firebase phone number authentication and CRUD operations in your cool new app. In this post, you will learn

How to implement authenticate phone numberin our app.
How to perform Firebase CRUD operations in React-Native app.
How to upload an image on firebase storage

Before start, first you will need a React-Native app to start with, hence you can follow how to create a react-native app for beginners and start after that from here.

Complete source code of this tutorial is available here — react-native-firebase-phone-auth-CRUD

What is React-Native

Similar to React for the Web, React Native applications are written using a mixture of JavaScript and XML-Esque markup, known as JSX. Then, under the hood, the React Native “bridge” invokes the native rendering APIs in Objective-C (for iOS) or Java (for Android). Thus, your application will render using real mobile UI components, not webviews, and will look and feel like any other mobile application. React Native also exposes JavaScript interfaces for platform APIs, so your React Native apps can access platform features like the phone camera, or the user’s location.

Existing methods of writing mobile applications using combinations of JavaScript, HTML, and CSS typically render using webviews. While this approach can work, it also comes with drawbacks, especially around performance. Additionally, they do not usually have access to the host platform’s set of native UI elements. When these frameworks do try to mimic native UI elements, the results usually “feel” just a little off; reverse-engineering all the fine details of things like animations takes an enormous amount of effort, and they can quickly become out of date.

What and why Firebase?

Firebase is a mobile and web application development platform developed by Firebase Inc. in 2011, then was acquired by Google in 2014. Firebase is a toolset to “build, improve, and grow your app”. It gives you functionality like analytics, databases, messaging and crash reporting so you can move quickly and focus on your users.

Today Firebase is one of the fastest-growing platforms for application development. Some of the reasons are

You don’t need to write a back-end from scratch. Firebase is a ready-made back-end, with a DB attached to it. You just integrate Firebase SDK in your app and you are good to go.
It’s R-E-A-L T-I-M-E 🕺.If you are a developer, you understand the importance of a real-time back-end/database in today’s app market. Things like chat, news feeds, ratings, bookings, etc all are very easy if you factor in real-time operations
Simple Authentication operations.The very first things required in a user-facing application is login/register operations. Firebase handles this very smoothly and with minimum coding effort. You can integrate a number of social authentication services like Facebook, Google etc. with Firebase as well.
You get tonnes of additional features in-built e.g. AdMob, analytics, etc 😍😍
It’s free, up to a certain usage limit. But this is pretty awesome for developers who are trying things, or making MVPs, or even for small scale app businesses. 🤑

In this article, we will focus on Firebase with react-native— phone Auth with CRUD operations and image upload to firebase storage.

Before we start I assume you have already created a project and ready to integrate the firebase in that. To add firebase in your project you can just follow this tutorial and start from here.

1. Phone Number Authentication — What and why?

Phone authentication allows users to sign in to Firebase using their phone as the authenticator. An SMS message is sent to the user via their phone number containing a unique code.

Using phone authentication is a little more involved as it is a multi-step process which can differ between iOS and Android. The basic flow for phone authentication is as follows:

The user enters their phone number
Firebase sends a verification code to the user’s phone
The user enters the verification code
Firebase confirms that the verification code matches and signs the user in

To start with phone authentication you need to install reat-native-firebase by executing the following command:

npm install --save react-native-firebase
yarn add react-native-firebase

You can follow the official react-native-firebase link for any issue.

let's start with phone authentication, as I have performed all the actions and checked on android but I will cover for the android an IOS both in this tutorial.

Add the dependency

Android:
Add the Firebase Authentication dependency to android/app/build.gradle:

dependencies {
  // ...
  implementation "com.google.firebase:firebase-auth:17.0.0"
}

Then, Install the RNFirebase Authentication package
Add the RNFirebaseAuthPackage to your android/app/src/main/java/com/[app name]/MainApplication.java:

// ...
import io.invertase.firebase.RNFirebasePackage;
import io.invertase.firebase.auth.RNFirebaseAuthPackage; // <-- Add this line
public class MainApplication extends Application implements ReactApplication {
    // ...
    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new RNFirebasePackage(),
          new RNFirebaseAuthPackage() // <-- Add this line
      );
    }
  };
  // ...
}

Now you are all set to use authentications in your app.

signInWithPhoneNumber is a more straight-forward implementation of handling the auth flow, however, it provides less flexibility to handle the various situations which may occur.

i. Trigger phone auth

firebase.auth().signInWithPhoneNumber(phoneNumber)
  .then(confirmResult => // save confirm result to use with the manual verification code)
  .catch(error => /error);

ii. Confirm verification code

confirmResult.confirm(verificationCode)
  .then(user => // User is logged in){
  .catch(error => // Error with verification code);

iii. [Android] Handle Auto Verification

To handle auto verification, we need to listen to auth#onAuthStateChanged:

firebase.auth().onAuthStateChanged((user) => {
  if (user) // user is verified and logged in
});

Full Working Example:

Logics here:

Js part for phone auth

View here:

Here I have divided my login flow into three different parts as:

1. LoginContainer contains the logic part

2. LoginView Contains the View Part and

3. LoginStyles contains the CSS of the page

Styles here:

Now you are all set to take the taste of phone authentication in your cool react-native app. Here I have used the latest react-native version 0.60.4. If you get any issues just clone my repository with the link provided above.

Complete source code of this tutorial is available here — react-native-firebase-phone-auth-CRUD

2.CRUD Operations in react-native application

Before you start, you need to add Firebase Firestore in your app.

Add the dependency

Add the Firebase Firestore dependency to android/app/build.gradle:

dependencies {
  // ...
  implementation "com.google.firebase:firebase-firestore:19.0.0"
}

Install the RNFirebase Firestore package

Add the RNFirebaseFirestorePackage to your android/app/src/main/java/com/[app name]/MainApplication.java:

// ...
import io.invertase.firebase.RNFirebasePackage;
import io.invertase.firebase.firestore.RNFirebaseFirestorePackage; // <-- Add this line
public class MainApplication extends Application implements ReactApplication {
    // ...
    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new RNFirebasePackage(),
          new RNFirebaseFirestorePackage() // <-- Add this line
      );
    }
  };
  // ...
}

Then,

Enable multidex:

Adding Firestore to your Android app requires multiDexEnabled to be set to true in android/app/build.gradle:

//..
android {
  //..

  defaultConfig {
    //..
    multiDexEnabled true  // needed for firestore:
  }
  //..
}

Now you're all set to store and retrieve data in firebase Firestore.

1.Create

You will need to add the createDatabse() method to persist an item collection in the Firestore database:

createDatabse(){
firebase.firestore().collection('collection name').add({.....your data})
}

2. Read

You will need to add the readDatabse() method to retrieve the available item from the Firestore collection:

readDatabse() {
return firebase.firestore.collection('collection name').onSnapshot((data)=>{console.log(data)});
}

3. Update

Next, you need to add the updateDatabse() method to update an item data by its identifier:

updateDatabse(docId){
firebase.firestore.doc('collection name/' + docId).update({data to update});
}

Here, docId is the particular id that you get while fetching data from the Firestore, with this docId you will be able to update a particular doc from the list of docs.

4. Delete

Finally, you can add the deleteItem() method to delete an item by its identifier:

deleteItem(docId){
firebase.firestore.doc('collection name/' + docId).delete();
}

The complete working example is here:

ADD and Delete with image upload

CREATE and DELETE

Complete source code of this tutorial is available here — react-native-firebase-phone-auth-CRUD and image upload

3 Image Upload in react-native-firebase storage

Add the dependency

Add the Firebase Storage dependency to android/app/build.gradle:

dependencies {
  // ...
  implementation "com.google.firebase:firebase-storage:17.0.0"
}

Install the RNFirebase Storage package

Add the RNFirebaseStoragePackage to your android/app/src/main/java/com/[app name]/MainApplication.java:

// ...
import io.invertase.firebase.RNFirebasePackage;
import io.invertase.firebase.storage.RNFirebaseStoragePackage; // <-- Add this line
public class MainApplication extends Application implements ReactApplication {
    // ...
    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new RNFirebasePackage(),
          new RNFirebaseStoragePackage() // <-- Add this line
      );
    }
  };
  // ...
}

Now you are all set to upload images on firebase Firestore and update that too. In the above gist, I have used a function uploadImageTask() . In this function, I have uploaded an image to my firebase storage and received the URL and saved that to my database. In uploadImageTask(), we have used default javascript function decodeURI(imageURl).

Here, The decodeURI() function is used to decode URI generated by encodeURI(). Parameters: This function accepts single parameter complete_encoded_uri_string which holds the encoded string. Return Value: This function returns the decoded string (original string).

image upload to Storage

Here all the functions are tested on android and to make it working in IOS please follow the IOS Setup from the react-native-firebase documentation.
Once you setup then you can execute all the above functions or you can clone the repository.

You can follow all the steps and achieve this very easily or you can clone my repo on Github

Complete source code of this tutorial is available here — react-native-firebase-phone-auth-CRUD and image upload 😎 😎 😎 🕺 🕺 🕺..…

Conclusion

In this post, we learned how to integrate firebase phone auth with CRUD operations and image upload to the firebase storage. Since all the integrations are somehow tricky because of react-native stability but it has great documentation, if you face any issue please do ask me on our discuss section.

Complete source code of this tutorial is available here — react-native-firebase-phone-auth-CRUD and image upload

Next Steps

Now that you have learned the implementation of Firebase CRUD operations,phone auth, and image upload in react-native, you can also try

If you need a base to start your next Ionic 4 app, you can make your next awesome app using Ionic 4 Full App

Ionic 4 QR Code, Barcode Scanning

Shadman — Thu, 26 Mar 2020 18:59:29 +0000

Complete source code of this tutorial is available here — Ionic 4 Qrcode Barcode

This post is all about scanning QR code or Barcode and creating QR code in your cool new app. In this post, you will learn

How to implement phonegap-plugin-barcodescanner and cordova-plugin-qrscannerin our app.
How to create QR Code usng these plugin into an ionic app.

Before start, first you will need an ionic app to start with, hence you can follow how to create an ionic app for beginners and start after that from here.

What is Ionic 4

I know most of the readers reading this blog will know what is Ionic 4, but just for the sake of beginners, I explain this in every blog.

QR code and Barcode— What and why?

QR code or barcode scanning is something almost every smartphone user has done at least once. We scan QR codes in supermarkets, on products in general, and oh, Amazon delivery! It’s a very handy way to recognize products instead of entering 16 digit long ID numbers etc. Similarly, reading ID numbers from Passports, etc could be very handy if you are an international hotel owner and require guests to carry passports as IDs. Or maybe you want to read off a vehicle registration number using your phone.

Here are some potential use cases for these plugins in an Ionic 4 app

Super market app — QR/barcode scanners can provide product info to users
Delivery app — Barcode scan can track/sign off a package
Quick access to offers — Scan QR codes and go to a webpage
Web authentication of a mobile app — Similar to Whatsapp Web
Event app — Scan tickets or events passes

…… and many more

All this can now be done in Ionic apps, with the latest plugins available in Ionic 4. In this article, we will focus on such plugins. Some of these plugins have been around since Ionic 1, and have been changing ever since, and some are new. So here are some of the scan plugins and functionalities you can implement with Ionic 4.

Step 1.1 Barcode Scanner

Barcodes and QR codes are widely used for multiple purposes like to add a link where a user doesn’t need to type the whole URL it can be easily scanned from a QR code. Barcodes can also be seen everywhere on the day to day items like eatables clothes etc, we can wimple scan these barcodes to get information like item code date of manufacturing, prices, etc.
The Barcode Scanner Plugin opens a camera view and automatically scans a barcode, returning the data back to you.

A barcode is an image consisting of a series of parallel black and white lines that, when scanned, relay information about a product. A barcode is used to automate the transfer of product information, for eg. its price, from the product to an electronic system such as a cash register. Barcodes are traditionally read by optical devices such as a barcode reader or scanner. New advances in technology allow consumers to scan barcodes with their smartphones and tablets using in-built cameras. Now you can do the same with your Ionic 4 app as well.

To start using this first you need to create an Ionic 4 project. To create an Ionic 4 project you can follow our tutorial on How to create Ionic 4 app for beginners.

Then install the following packages by executing this command:-

ionic cordova plugin add phonegap-plugin-barcodescanner
npm install @ionic-native/barcode-scanner

Now import the Barcode module in your projects app.module.ts and then inject it inside the provider, so that you can use it as a dependency injection inside the constructor and access it all over the app components.

app.module.ts##iframe0##

Add Button to scan a Barcode and to create a QR code

Now you are ready to use the Barcode function provided by the Ionic Plugin and get the result. Before this let us make a beautiful view to access the barcode function by clicking a button and getting the data in response.

home.page.html##iframe1##

After this, you can simply use the following function to complete a scan process.

home.page.ts##iframe2##

This function will open the phone’s camera, allow you to scan a barcode, and in result will provide success or error .

You can also pass an options object in the scan({options}) function. These options are

preferFrontCamera : true, // iOS and Android
showFlipCameraButton : true, // iOS and Android
showTorchButton : true, // iOS and Android
torchOn: true, // Android, launch with the torch switched on (if   available)
saveHistory: true, // Android, save scan history (default false)
prompt : "Place a barcode inside the scan area", // Android
resultDisplayDuration: 500, // Android, display scanned text for X ms. 0 suppresses it entirely, default 1500
formats : "QR_CODE,PDF_417", // default: all but PDF_417 and RSS_EXPANDED
orientation : "landscape", // Android only (portrait|landscape), default unset so it rotates with the device

This plugin will, of course, require a camera and file saving access on the device, so take care of that as per your device. Since iOS 10 it’s mandatory to add NSCameraUsageDescription .
NSCameraUsageDescription describes the reason that the app accesses the user's camera. When the system prompts the user to allow access, this string is displayed as part of the dialog box. If you didn't provide the usage description, the app will crash before showing the dialog. Also, Apple will reject apps that access private data but don't provide a usage description.

To add this entry you can use the edit-config tag in the config.xml like this:

<edit-config target="NSCameraUsageDescription" file="*-Info.plist" mode="merge">
    <string>To scan barcodes</string>
</edit-config>

Let's go and check what we get on clicking on barcode scan button

Scanning a barcode

You will get a response in return after a successful scan.
You can check the whole working Barcode application on my GitHub repo here….

When I type in the text field my name shadman to generate a QR code of my name then the result that I got is amazing….

Generated QR code

Step 1.2 QRCode Scanner

Looks familiar? A Quick Response (QR) Code is a type of barcode that contains a matrix of dots. It can be scanned using a QR scanner or a smartphone with a built-in camera. Once scanned, software on the device converts the dots within the code into numbers or a string of characters. For example, scanning a QR code with your phone might open a URL in your phone’s web browser.

QR codes are able to contain more information than traditional barcodes. And now your Ionic 4 app can scan QR codes very efficiently.

Come let's go to check how a QR Scanner works!

Step 1:- Install the QR Scanner plugin by executing this command

ionic cordova plugin add cordova-plugin-qrscanner
npm install @ionic-native/qr-scanner

Now import the QR Scan module in your app.module.ts as we have done above for Barcode Scanner.

Add Button to scan a QRCode and to get the result

Now you are ready to use the QRCode Scanner function provided by the Ionic Plugin and get the result. Before this let us make a beautiful view to access the QRCode function by clicking a button and getting the data in response.

QRCode Scanner home.pahe.html##iframe3##

The Result for the above code is:

As we have done before for Barcode, you can simply use the Below function to complete a QR Code scan process.

QR Code Scanner functions##iframe4##

If camera permission was permanently denied you must use QRScanner.openSettings()method to guide the user to the settings page then they can grant the permission from there.

You can use QRScanner.useFrontCamera() to use front-camera for scanning as well.
Use pausePreview to pause the scanning while the camera is ON.
Use resumePreview to resume the scanning.
Use destroy to run hide, cancelScan, stop video capture, remove the video preview, and to deallocate as much as possible.

For more details, you can visit https://github.com/bitpay/cordova-plugin-qrscanner

Now when you click on the button to scan a QR code the result you will get will be amazingly like the below image but before this, it will prompt you for camera permission.

Camera permission required
Scanning a QR Code

The result will be:

QR Code Scanned output

Here in the result, I have scanned the QR code generated in the barcode tutorial above. You can follow all the steps and achieve this very easily or you can clone my repo on Github for both the plugins here and enjoy 😎 😎 😎 🕺 🕺 🕺..…

Conclusion

In this post, we learned how to integrate Barcode scanner and QR Code scanner and how to generate your own QR Code using phonegap-plugin-barcodescanner in Ionic 4 apps. Since both the plugins are amazingly light and have great documentation, it is developers’ first choice when it comes to creating QR code or Scanning a barcode or QR Code.

Complete source code of this tutorial is available here — Ionic 4 QRcodeBarcode

Next Steps

Now that you have learned the implementation of phonegap-plugin-barcodescanner and cordova-plugin-qrscanner in Ionic 4, you can also try

If you need a base to start your next Ionic 4 app, you can make your next awesome app using Ionic 4 Full App

Firebase with Ionic 4 - Hosting, Auth and DB connection

Shadman — Wed, 25 Mar 2020 20:48:10 +0000

Firebase Starter Kit (Ionic 4): A great starter to get you started with Ionic 4 and Firebase.

Let’s take a dive to know the paramount benefits of Firebase for your Ionic 4 App.

Today Firebase is one of the fastest-growing platforms for application development. Some of the reasons are

You don’t need to write a back-end from scratch. Firebase is a ready-made back-end, with a DB attached to it. You just integrate Firebase SDK in your app and you are good to go.
It’s R-E-A-L T-I-M-E 🕺.If you are a developer, you understand the importance of a real-time back-end/database in today’s app market. Things like chat, news feeds, ratings, bookings, etc all are very easy if you factor in real-time operations
Simple Authentication operations.The very first things required in a user-facing application is login/register operations. Firebase handles this very smoothly and with minimum coding effort. You can integrate a number of social authentication services like Facebook, Google etc. with Firebase as well.
You get tonnes of additional features in-built e.g. push notifications, analytics, etc 😍😍
It’s free, up to a certain usage limit. But this is pretty awesome for developers who are trying things, or making MVPs, or even for small scale app businesses. 🤑

In this article, we will focus on Firebase with ionic — hosting, Auth and DB Connection. Firebase has been around since Ionic 1, and has been changing ever since. So here are some of the latest plugins and functionalities you can implement using Firebase with Ionic 4.

1. Hosting with firebase in ionic 4 —

Hosting or deploying an ionic app on firebase is a pinch game. Not believing,
let us see how easy it is…..

Step 1: —

We are proceeding as you don’t have any already created firebase project. Let's create one by following these steps…

1. Go to https://console.firebase.google.com/

2. Click on add a project and fill the project name input field and check the terms & conditions block and click on create project button.

Now in the next step your project is ready, click on Continue.

Step 2: —

Next, in a Terminal, install the Firebase CLI:

npm install -g firebase-tools
firebase login
firebase init

With the Firebase CLI installed, run firebase init within your Ionic project.

Now the dialog will bring up some questions and we need to select Hosting (using space, then hit enter).

The CLI prompts:

“Which Firebase CLI features do you want to set up for this folder?” Choose “Hosting: Configure and deploy Firebase Hosting sites.”

“Select a default Firebase project for this directory:” Choose the project you created on the Firebase website.

“What do you want to use as your public directory?” Enter “www”.

Note: Answering these next two questions will ensure that routing, hard reload, and deep linking work in the app:

Configure as a single-page app (rewrite all urls to /index.html)?” Enter “Yes”.

“File www/index.html already exists. Overwrite?” Enter “No”.

A firebase.json config file is generated, configuring the app for deployment.

The complete firebase.json looks like:

{
  "hosting": {
    "public": "www",
    "ignore": [
      "firebase.json",
      "/.*",
      "/node_modules/"
    ],
    "rewrites": [
      {
        "source": "",
        "destination": "/index.html"
      }
    ],
}

For more information about the firebase.json properties, see the Firebase documentation.

Step 3: —

Next, build an optimized version of the app by running:

ionic build --prod

step 4:-

Last, deploy the app by running:

firebase deploy

After the successful deploy, you will see a success message with two links in which one will be your project console and another will be hosting URL like below image

Now you can hit the hosting URL and see your app is hosted on the server.

2. Firebase Authentication in ionic 4 —

Ionic has made app authentications too easy for their developer, still not believing? Let us check this out here…

You may use our Firebase Starter Kit too to get started with Firebase Authentication and many more.

Everyone wants the identity of the user to save their data securely on the cloud to give them a smooth and reliable experience on all of the users’ devices after a single login. Users don’t want to fill the data again and again on every device, so Firebase Authentication provides us these facilities here.

Firebase Authentication provides backend services, easy-to-use SDKs, and ready-made UI libraries to authenticate users to your app. It supports authentication using passwords, phone numbers, popular federated identity providers like Google, Facebook and Twitter, and more.

In ionic install the plugin by executing this command:

ionic cordova plugin add cordova-plugin-firebase-authentication
npm install @ionic-native/firebase-authentication

Now Import the plugin in your component.

import { FirebaseAuthentication } from '@ionic-native/firebase-authentication/ngx';
constructor(private firebaseAuthentication: FirebaseAuthentication) { }

You can use the following functions to do various tasks in authentication modules.

I. Register a User with Email and Password

this.firebaseAuthentication.createUserWithEmailAndPassword('admin@enappd.com', '123')
.then((res: any) => console.log(res))
.catch((error: any) => console.error(error));

II. Send Email Verification

Initiates email verification for the current user.

this.firebaseAuthentication.sendEmailVerification()
.then((res: any) => console.log(res))
.catch((error: any) => console.error(error));

III. Send Password Reset Email

Triggers the Firebase Authentication backend to send a password-reset email to the given email address, which must correspond to an existing user of your app.

this.firebaseAuthentication.sendPasswordResetEmail()
.then((res: any) => console.log(res))
.catch((error: any) => console.error(error));

IV. Login with Email & Password

Asynchronously signs in using an email and password.

this.firebaseAuthentication.signInWithEmailAndPassword('test@gmail.com', '123')
.then((res: any) => console.log(res))
.catch((error: any) => console.error(error));

V. VerifyPhoneNumber(phoneNumber, timeout)

Starts the phone number verification process for the given phone number.

this.firebaseAuthentication.verifyPhoneNumber('+123456789', '30000')
.then((res: any) => console.log(res))
.catch((error: any) => console.error(error));

VI. Sign-in anonymously

Create and use a temporary anonymous account to authenticate with Firebase.

this.firebaseAuthentication.signInAnonymously().then(function(userInfo) {
// user is signed in
});

VII. Google login — signInWithGoogle(idToken, accessToken)

Uses Google’s idToken and accessToken to sign-in into firebase account. In order to retrieve those tokens follow instructions for Android and iOS.

VIII. Facebook login — signInWithFacebook(accessToken)

Uses Facebook’s accessToken to sign-in into firebase account. In order to retrieve those tokens follow instructions for Android and iOS.

IX. Twitter login — signInWithTwitter(token, secret)

Uses Twitter’s token and secret to sign-in into firebase account. In order to retrieve those tokens follow instructions for Android and iOS.

X. Sign out

Signs out the current user and clears it from the disk cache.

this.firebaseAuthentication.signOut().then(function() {
// user was signed out
});

3. Firebase Data Base Connection —

To connect your app with firebase database, at first, we need to install @angular/fire package in our app.

By executing this command firebase will be installed in your app:-

npm install @angular/fire firebase --save

Once AngularFire has been installed (the plugin that we’ll use to communicate our Ionic app with Firebase), we need to create a new project in Firebase. As we have already created a firebase project, hence go to the firebase console, where you’ll see the following menu:

Click on “Add Firebase to your web app” to see your new Firebase application’s credentials. We’ll specify these credentials to tell our Ionic application to communicate with our Firebase application.

The next step is to add firebase to our ionic app. For this go to the app/src/environment.ts file and paste the credentials copied from the “Add Firebase to your web app” dialog.

export const environment = {
 production: false,
 firebase: {
   apiKey: "YOUR_API_KEY",
   authDomain: "YOUR_AUTH_DOMAIN",
   databaseURL: "YOUR_DATABASE_URL",
   projectId: "YOUR_PROJECT_ID",
   storageBucket: "YOUR_STORAGE_BUCKET",
   messagingSenderId: "YOUR_SENDER_ID"
 }
};

Now goto firebase console and click on your project and then on the database on the left side menu.

Then create a database by filling the necessary details. Like,

After creating a database you can select real-time database

After selecting Real-time database, you will get the screen like,

Before starting,

import { AngularFirestoreModule } from ‘@angular/fire/firestore’; in your app.module.ts. So that you can access this in your components.

Now we are ready to start CRUD(Create, Read, Update, Delete) operations with firebase and ionic. We are going to see all these operations one by one:

import { AngularFirestoreCollection, AngularFirestore } from ‘@angular/fire/firestore’; in your page.ts

and in the constructor inject:

constructor(private firestore: AngularFirestore) { }

Create

You will need to add the createDatabse() method to persist an item collection in the Firestore database:

createDatabse(items: Item){
    return this.firestore.collection('itemsList').add(items);
}

2. Read

You will need to add the readDatabse() method to retrieve the available item from the Firestore collection:

readDatabse() {
    return this.firestore.collection('policies').snapshotChanges();
}

3. Update

Next, you need to add the updateDatabse() method to update an item data by its identifier:

updateDatabse(items: Item){
    delete items.id;
    this.firestore.doc('itemsList/' + items.id).update(items);
}

4. Delete

Finally, you can add the deleteItem() method to delete an item by its identifier:

deleteItem(itemId: string){
    this.firestore.doc('itemsList/' + itemId).delete();
}

You can find the fully-functioning ionic -firebase starter kit with lots of more features only by clicking here….

Conclusion:

In this tutorial, we have learned how to deploy our ionic app on firebase using firebase hosting method, then we got to know what are the various tasks in firebase authentications modules with the ionic app and how to achieve those?
At last but not least we got to know how we can connect our firebase database with our ionic application very easily and we understood the methods and functions of firebase CRUD operation in the ionic application. Firebase provides us these facilities for free up to a limit. Firebase is truly a great match for modern-day mobile apps and is really developer-friendly.

Next Steps

Now that you have learned the implementation of Local Notifications in Ionic 4, you can also try

Ionic 4 Payment Gateways — Stripe | PayPal | Apple Pay | RazorPay
Ionic 4 Charts with — Google Charts | HighCharts | d3.js | Chart.js
Ionic 4 Social Logins — Facebook | Google | Twitter
Ionic 4 Authentications — Via Email | Anonymous
Ionic 4 Features — Geolocation | QR Code reader | Pedometer
Media in Ionic 4 — Audio | Video | Image Picker | Image Cropper
Ionic 4 Essentials — Native Storage | Translations | RTL
Ionic 4 messaging — Firebase Push | Reading SMS | Local notification
Ionic 4 with Firebase — Basics | Cloud functions

If you need a base to start your next Ionic 4 app, you can make your next awesome app using Ionic 4 Full App

Ionic 4 - Save and Retrieve Data using Native storage and SQLite

Shadman — Wed, 25 Mar 2020 20:35:07 +0000

This post is all about saving data locally in your cool new app. In this post, you will learn

How to implement cordova-sqlite-storage in our app.
How to integrate native-storage into an ionic app.

Before start, first you will need an ionic app to start with, hence you can follow how to create an ionic app for beginners and start after that from here.

1. Storage — What and why?

Storage is an easy way to store key/value pairs and JSON objects. Storage uses a variety of storage engines underneath, picking the best one available depending on the platform.

When running in a native app context, Storage will prioritize using SQLite, as it’s one of the most stable and widely used file-based databases, and avoids some of the pitfalls of things like local storage and IndexedDB, such as the OS deciding to clear out such data in low disk-space situations.

As every application needs their data to store in local storage or cache for fast loading or for any purpose, we have a nice solution for that in ionic as @ionic/storage.

To start with first execute the following command in your terminal:

ionic cordova plugin add cordova-sqlite-storage

Next, install the package (comes by default for Ionic apps > Ionic V1):

npm install --save @ionic/storage

Next, add it to the imports list in your NgModule declaration (for example, in src/app/app.module.ts):

import { IonicStorageModule } from '@ionic/storage';
@NgModule({
  declarations: [
    // ...
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot()
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    // ...
  ],
  providers: [
    // ...
  ]
})
export class AppModule {}

Now create a service for ionic storage functions by executing this command:

ionic generate service storage

Now in your generated storage service add the following codes to use wherever needed in the application:

import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage';
@Injectable({
providedIn: 'root'
})
export class StorageService {
constructor(public storage: Storage)
{ console.log('Your storage provider is working here !'); }
// set a key/value
async set(key: string, value: any): Promise<any> {
try {
const result = await this.storage.set(key, value);
console.log('set string in storage: ' + result);
return true;
} catch (reason) {
console.log(reason);
return false;
}
}
// to get a key/value pair
async get(key: string): Promise<any> {
try {
const result = await this.storage.get(key);
console.log('storageGET: ' + key + ': ' + result);
if (result != null) {
return result;
}
return null;
} catch (reason) {
console.log(reason);
return null;
}
}
// set a key/value object
async setObject(key: string, object: Object) {
try {
const result = await this.storage.set(key, JSON.stringify(object));
console.log('set Object in storage: ' + result);
return true;
} catch (reason) {
console.log(reason);
return false;
}
}
// get a key/value object
async getObject(key: string): Promise<any> {
try {
const result = await this.storage.get(key);
if (result != null) {
return JSON.parse(result);
}
return null;
} catch (reason) {
console.log(reason);
return null;
}
}
// remove a single key value:
remove(key: string) {
    this.storage.remove(key);
}
//  delete all data from your application:
clear() 
{
   this.storage.clear();
}
}

Now create a page using the ionic command:

ionic generate page storagedemo

In storagedemo.page.ts inject storage in constructor

constructor(public storageService: StorageService) { }

Now let’s save and get strings in your constructor. For simplicity, we’ll just output the result in the console.

i. Save String:

this.storageService.set('user_name', 'Shadman').then(result => {
console.log('Data is saved');
}).catch(e => {
console.log("error: " + e);
});

ii. Get String:

this.storageService.get('user_name').then(result => {
if (result != null) {
console.log('Username: '+ result);
}
}).catch(e => {
console.log('error: '+ e);
// Handle errors here
});

iii. Save an Object:

this.storageService.setObject('person', {name : 'Shadman', age : 26});

iv. Get an Object:

this.storageService.getObject('person').then(result => {
if (result != null) {
console.log('Person: '+ result);
}
}).catch(e => {
console.log('error: ', e);
});

v. You can remove any value associated with the key:

this.storageService.remove('user_name');

vi. You can delete/clear all the data from your application:

this.storageService.clear();

2. Ionic native-storage — What and Why?

This plugin is created because of the non-persistent property of LocalStorage in the WebView of Android and iOS. In iOS stored data from LocalStorage can be removed by the OS, when running out of memory.

When to use the plugin:

Simple: Uniform and convenient way of organizing, storing, and accessing the data
Fast: Less than 1 millisecond to save or retrieve an object (in general)
Persistence: Save data over multiple sessions, i.e. holds the data until the application is removed from the device
Small data: Store small amounts of persistent data (less than a few hundred kilobytes)
It is possible to store more than a few megabytes, but that’s not the intended usage of the plugin.

When not to use the plugin:

Storing and retrieving files can be done by means of the file plugin
For storing many objects please consider trying a database-based strategy, for instance: WebSQL and SQLite plugin.

Installation:

Execute the following command in your terminal:

ionic cordova plugin add cordova-plugin-nativestoragenpm install @ionic-native/native-storage

After installation completes, import NativeStorage module in your app.module.ts

import { NativeStorage } from '@ionic/storage';
@NgModule({
  declarations: [
    // ...
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    NativeStorageModule.forRoot()
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    // ...
  ],
  providers: [
    // ...
  ]
})
export class AppModule {}

Now you are totally set to use this in your app’s components/pages as:

Storing values

this.nativeStorage.setItem('myitem', {property: 'value', anotherProperty: 'anotherValue'})
  .then(
    () => console.log('Stored item!'),
    error => console.error('Error storing item', error)
  );

Retrieving values

this.nativeStorage.getItem('myitem')
  .then(
    data => console.log(data),
    error => console.error(error)
  );

Retrieving all keys

storageService.keys().then(
data => console.log(data),
error =>{console.log(error);}
);

Removing values

Removing a single variable:

NativeStorage.remove("reference_to_value",<success-callback>, <error-callback>);

Removing all stored variables:

NativeStorage.clear(<success-callback>, <error-callback>);

iOS-specific features

App Groups (share data between apps) First the suite name must be provided before accessing and retrieving data.

NativeStorage.initWithSuiteName("suitename");

Now at last but not least, you’re all set to play with ionic/storage and ionic/native storage.

Conclusion:

In this post, we learned how to implement ionic SQLite-storage and ionic native-storage, we got to know the difference and the use of these two in ionic 4 application. I hope this post made your confusions clear that what is ionic-storage and why to use, as same for the native-storage.

NEED FREE IONIC 4 STARTERS?

You can also find free Ionic 4 starters on our website enappd.com

You can also make your next awesome app using Ionic 4 Full App

Next Steps

Now that you have learned the implementation of SQLite-storage and native -storage for storing or caching values in Ionic 4, you can also try

References

Ionic documentation

DEV Community: Shadman

BarCode and QR Code Scanning in React Native Apps

What is React-Native

What and why QR Code?

Add Button to scan a QRCode and to get the result

reactivate()

Props

onRead (required)

fadeIn

reactivate

reactivateTimeout

topContent

bottomContent

containerStyle

cameraStyle

topViewStyle

bottomViewStyle

showMarker

customMarker

markerStyle

notAuthorizedView

cameraType

checkAndroid6Permissions

permissionDialogTitle

permissionDialogMessage

cameraProps

Conclusion

Next Steps

Send, Read and Delete SMS in React Native

Step 1: — What and why React Native?

step 2: — How to create react native app

step 3: — What and Why react-native-sms and react-native-get-sms?

Step 4: — Setup and Implementation

Android Permissions

Conclusion

Next Steps

How to translate in React Native app- Globalization, Internationalization, and Text to Speech

What is React-Native

What and why Internationalization and Text to speech?

i18n

STEP 1: Prepare language JSON files

STEP 2: Implement libraries

Add Interactive UI to Translate and text to speech

Speaking

Waiting for initialization

Ducking

List Voices

Set default Language

Set default Voice

Set default Speech Rate

Set default Pitch

Conclusion

Next Steps

Progressive Web App (PWA) Features in Ionic 4

What is Ionic 4

What is PWA?

Why do we need Progressive Web Apps?

Who’s building PWAs?

Features of Progressive Web App in ionic 4

Service-Worker in Ionic 4 PWA: —

Firebase phone authentication: —

Push Notifications in ionic 4 PWA Application: —

Deploying the application

Firebase

Conclusion

Next Steps

Implement Google Vision in React Native apps

Step 1: — What and why React Native ?

Step 2: — What and why Google Vision API ?

Brief History of Machine Learning

Step 3: — How to create react native app ?

Step 4: —How to get google vision API key ?

Step 5: — Implementation and setup

Conclusion

Next Steps

Twitter Login in React Native Apps Using Firebase

Twitter Login — What and why?

Authentication in React Native

Firebase

Firebase Authentication Options

`reactivate()`

`onRead` (required)

`fadeIn`

`reactivate`

`reactivateTimeout`

`topContent`

`bottomContent`

`containerStyle`

`cameraStyle`

`topViewStyle`

`bottomViewStyle`

`showMarker`

`customMarker`

`markerStyle`

`notAuthorizedView`

`cameraType`

`checkAndroid6Permissions`

`permissionDialogTitle`

`permissionDialogMessage`

`cameraProps`

Step 4: Install the package for Twitter Login using `react-native-twitter-signin package`