In this blog, we will discuss how to use Scan Search in app using Bagisto Native through the Dynamic Button component.
Introduction
Bagisto Native provides ready-to-use bridge components for Android and iOS applications. These components connect the web layer with native features.
For Scan Search, we use the Dynamic Button component to show a Scan icon on the app toolbar or action bar. Then, when the user taps the icon, the native Scan Search flow opens.
Additionally, you can explore our blog on building mobile applications using Next.js.
How to Create Mobile App using Next.js
What is Scan Search in Bagisto Native
Scan Search in Bagisto Native allows users to search products by scanning QR codes or barcodes. It uses native camera APIs inside the mobile app.
In our flow, Scan Search is not triggered as a separate component. Instead, it opens from the Dynamic Button component.
What is Dynamic Button Component
The Dynamic Button component is a Hotwire bridge component used to show native action icons on the toolbar. These icons can perform actions like cart, scanner, theme change, and Scan Search.
Additionally, the Dynamic Button component shows a scan icon for Scan Search. On click, it opens the camera and scans QR codes or barcodes from the captured image.
Prerequisites
- Integrate Hotwire Native into your application. You can follow our Hotwire integration guide here:
How to Build a Mobile App with Hotwire - Add Bagisto Native to your project.
- Register the bridge components properly.
- Configure your application with Hotwire.
How to Add Bagisto Native in Your Project
Android Setup
First, you need to add the JitPack repository in your project-level Gradle file.
|
1 2 3 4 5 6 7 |
dependencyResolutionManagement { repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS) repositories { mavenCentral() maven { url 'https://jitpack.io' } } } |
Next, add the Bagisto Native dependency in your app-level Gradle file.
|
1 2 3 |
dependencies { implementation 'com.github.SocialMobikul:BagistoNative_Android:Tag' } |
Replace Tag with the latest version.
Now sync your project, and Bagisto Native will be added successfully.
For more details, explore our Bagisto Native Android Package.
|
1 |
https://github.com/SocialMobikul/BagistoNative_iOS |
After adding the package, it will be available in your project.
For more information explore our Bagisto Native iOS Package
Register Bridge Components
Android
Register the bridge components inside your Application class.
|
1 2 3 |
Hotwire.registerBridgeComponents( *CustomBridgeComponents.all ) |
iOS
Register bridge components in AppDelegate.
|
1 |
Hotwire.registerBridgeComponents(BagistoNative.coreComponents) |
How Scan Search in Bagisto Native Works
The Scan Search functionality is triggered through the Dynamic Button component. The web layer sends an event to show the Scan icon on the toolbar.
Next, when the user taps the icon, the Dynamic Button component handles the camera permission automatically. The native layer then opens the camera for continuous scanning.
Then, the camera automatically detects and reads QR codes or barcodes in real-time. Once a code is detected, the scanned value is processed and returned to the web layer.
Finally, the component sends the scanned value back to the web layer through the bridge reply. This value can then be used for product search.
Android Implementation of Scan Search in Bagisto Native
After setup, the Scan Search works through the Dynamic Button component. Then, when the Scan icon is tapped, Android opens the camera and continuously scans QR codes or barcodes.
The component returns the scanned value to the web layer through the bridge reply.
Android Scan Search Flow
The component adds a scan icon to the toolbar. Tapping it requests camera permission, opens the camera, and sends the scanned value to the web layer.
iOS Implementation of Scan Search in Bagisto Native
Similarly, in iOS, the Scan Search works after setup. When triggered, it opens the native iOS scan interface for real-time scanning.
No additional native code is required.
iOS Scan Search Flow
The component adds a scan icon to the toolbar. Tapping it requests camera permission, opens the camera, and sends the scanned value to the web layer.
Benefits of Scan Search in Bagisto Native
- Easy to integrate
- Works for both Android and iOS
- Scans QR codes and barcodes in real-time
- Dynamic Button handles camera permission automatically
- No need to write complex scanning logic in the web layer
Conclusion
Scan Search in Bagisto Native lets you easily add native scanning-based search functionality to your application.
Therefore, configure the Dynamic Button component once, and it will work seamlessly with your web layer.
You can also check other blogs on Hotwire Native implementation in WordPress to learn more.
To learn more about how Hotwire works, you can check the Hotwire overview and how it workflow guide
Be the first to comment.