In this blog, we will discuss How to Use Toast Component in App Using Bagisto Native.
Introduction
Bagisto Native provides ready-to-use bridge components for Android and iOS applications. These components help connect web views with native functionalities.
Using these bridge components, you can access native features without writing extra native code. This makes development faster and easier.
One of the useful components is the Toast component, which allows the web layer to display native toast messages to users.
You can also explore our blog on building mobile applications using Next.js.
How to Create Mobile App using Next.js
What is Toast Component
The Toast component shows short messages to users directly from the native app. It is commonly used for notifications like “Item added to cart” or “Login successful”.
This component works as a bridge between the web layer and the native layer.
Prerequisites
Before using the Search component, make sure:
- 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' } } } |
After that, 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.
iOS Setup
For iOS, you need to use Swift Package Manager.
Open your project in Xcode and go to: File → Add Package Dependencies.
Then enter the repository URL.
|
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 Toast Component Works
The web layer calls the Toast component and passes the message that needs to be shown on the screen. The native component receives this request and displays the message as a native toast.
The toast appears briefly and disappears automatically without any user action.
Android Implementation
On Android, the Toast component receives the message from the web layer. It displays the message using Android’s native Toast class at the bottom of the screen for a short duration.
Android Toast Flow
The web layer calls the Toast component with the message text. The component receives the request and shows the native toast message to the user.
iOS Implementation
On iOS, the Toast component works similarly. It receives the message from the web layer and displays it using iOS’s native toast functionality.
No additional native code is required.
iOS Toast Flow
The web layer calls the Toast component with the message text. The component receives the request and shows the native toast message to the user.
Benefits of Toast Component
Easy to integrate
Works for both Android and iOS
No need to write native logic separately
Improves user experience
Conclusion
The Toast Component in Bagisto Native helps you easily show native toast messages from your web layer. You only need to configure it once, and it will work seamlessly with your application.
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.
Please check my other blogs here.
Be the first to comment.