How to Use Search Component in Apps Using Bagisto Native

Rahul Saini

8 July 2026

In this blog, we will discuss How to Use Search 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 Search component, which allows users to perform searches using native interfaces.

You can also explore our blog on building mobile applications using Next.js.

How to Create Mobile App using Next.js

What is Search Component

The Search component is used to trigger native search events from your web layer. It allows users to search for products or content through native search interfaces.

This component works as a bridge between the web layer and the native layer.

Prerequisites

Before using the Search 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 .

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        mavenCentral()
        maven { url 'https://jitpack.io' }
    }
}

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.

dependencies {
    implementation 'com.github.SocialMobikul:BagistoNative_Android:Tag'
}

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.

https://github.com/SocialMobikul/BagistoNative_iOS

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

Hotwire.registerBridgeComponents(
    *CustomBridgeComponents.all
)

Hotwire.registerBridgeComponents(

*CustomBridgeComponents.all

)

iOS

Hotwire.registerBridgeComponents(BagistoNative.coreComponents)

1	Hotwire.registerBridgeComponents(BagistoNative.coreComponents)

How Search Component Works

The Search component listens to events triggered from the web layer inside the WebView. When the Search 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 search interface. This process works similarly for both Android and iOS.

Android Implementation

After setup, the Search component works automatically.

When the Search event is triggered from the web, Android opens the native search dialog.

You can pass search queries from the web side.

Android Search Flow

When the user clicks on the Search button, the web layer triggers the Search event. The native layer then receives the event and opens the device’s native search interface.

iOS Implementation

In iOS, the Search component works similarly after setup.

When triggered, it opens the native iOS search interface.

No additional native code is required.

iOS Search Flow

When the user clicks on the Search button, the web layer triggers the Search event. The native layer then receives the event and opens the device’s native search interface.

Benefits of Search Component

Easy to integrate
Works for both Android and iOS
No need to write native logic separately
Improves user experience

Conclusion

The Search component in Bagisto Native helps you easily add native search 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.