React Native HMS ML Kit Plugin |Installation and Example

Introduction

This article covers, how to integrate React Native HMS ML Kit Plugin to a React Native application and also shows examples for some use cases.

React Native HMS ML Kit Plugin supports services listed below

• Text Related Services
• Language Related Services
• Image Related Services
• Face/Body Related Services
• Natural Language Processing Languages

Prerequisites

• Make sure HMS Core APK exists on your device.
• Create your agconnect-services.json file using App Gallery and put it under android/app/ directory.
• Make sure your app’s minSdkVersion is 19 or higher.
• Open build.gradle file under project-directory/android and change it as given below.

• Open build.gradle file under project-directory/android/app and change it as given below.

• Now we can download the plugin.

Finding Text Language In an Image

The answer of “What is the language of this text in the image ?” resides in HMS ML Kit Plugin. We need to use HMSTextRecognition and HMSLanguageDetection modules to find this answer. HMSTextRecognition module will detect the text in image, then HMSLanguageDetection will detect the language used in this text.

Here is the Magic !!! Lets Run the App

Conclusion

In this article, we integrated React Native HMS ML Kit Plugin to our application and created a language detector application which finds language of a text in an image.

You can ask questions on the comments section.

Thank you.

References

React Native HMS ML Kit Plugin

@hmscore/react-native-hms-ml