In this blog, we will discuss How to Use Share Component in Apps 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 Share component, which allows users to share content using native apps.
You can also explore our previous blog on building mobile applications using Next.js:
How to Create Mobile App using Next.js
What is Share Component
The Share component is used to open the device’s native share dialog. It allows users to share text, URLs, or other content through applications like WhatsApp, Gmail, and more.
This component works as a bridge between the web layer and the native layer.
Prerequisites
Before using the Share component, make sure:
- Hotwire Native is integrated into your application. You can follow our Hotwire integration guide here:
How to Build a Mobile App with Hotwire - Bagisto Native is added to your project.
- Bridge components are registered properly.
- Your application is configured with Hotwire setup
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 Share Component Works
The Share component listens to events triggered from the web layer inside the WebView. When the Share action is triggered, the event is sent to the native layer for handling.
The native layer then handles the request and opens the device’s native share dialog. This process works similarly for both Android and iOS.
Android Implementation
After setup, the Share component works automatically.
When the Share event is triggered from the web, Android opens the native share dialog.
You can pass text or URLs from the web side, and it will be handled by the native layer.
Android Share Flow
When the user clicks on the Share button, the web layer triggers the Share event. The native layer then receives the event and opens the device’s native share dialog.
iOS Implementation
In iOS, the Share component works similarly after setup.
When triggered, it opens the native iOS share sheet.
No additional native code is required.
iOS Share Flow
When the user clicks on the Share button, the web layer triggers the Share event. The native layer then receives the event and opens the device’s native share dialog.
Benefits of Share Component
- Easy to integrate
- Works for both Android and iOS
- No need to write native logic separately
- Improves user experience
Conclusion
The Share component in Bagisto Native helps you easily add native sharing functionality to your application. You only need to configure it 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.