In this blog, we will discuss How to Use Location 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 Location component, which allows users to share their current GPS location from the app.
You can also explore our blog on building mobile applications using Next.js.
How to Create Mobile App using Next.js
What is Bagisto Native Location Component
The Location component retrieves the device’s current GPS coordinates. It allows users to share their latitude and longitude with the web layer.
This component bridges 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 Bagisto Native Location Component Works
The Location Component automatically triggers when the user navigates to a page that requires location input, such as an address screen. When triggered, it adds a location icon to the app toolbar.
When the user taps the location icon, the app requests location permission and retrieves the device’s current GPS coordinates.
The latitude and longitude are then sent to the web layer through the bridge reply.
Android Implementation
On Android, the Location Component adds a location icon to the toolbar when triggered. When the user taps the icon, the component requests location permission using Android’s permission system.
After permission is granted, it fetches the current GPS coordinates. The latitude and longitude are then sent back to the web layer via the bridge reply.
Android Location Flow
The web layer triggers the Location component, which adds a location icon to the toolbar. Tapping the icon requests permission, fetches GPS coordinates, and returns them to the web layer.
iOS Implementation
On iOS, the Location Component works similarly. When triggered, it displays the location icon on the toolbar.
When the user taps the icon, the component requests location permission using the iOS permission system.
After permission is granted, it retrieves the device’s current GPS coordinates.
The latitude and longitude are then sent back to the web layer through the bridge reply.
No additional native code is required.
iOS Location Flow
The web layer triggers the Location component, which adds a location icon to the toolbar. Tapping the icon requests permission, fetches GPS coordinates, and returns them to the web layer.
Benefits of Bagisto Native Location Component
Easy to integrate
Works for both Android and iOS
Automatically handles permission requests
No need to write native logic separately
Improves user experience
Conclusion
The Location Component in Bagisto Native helps you easily fetch the device’s current GPS coordinates. 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.
Be the first to comment.