Ion-Searchbar Not Visible on Android Native Build but Works in Browser

Ionic Framework
1

Hello everyone,

I’m facing an issue with the <ion-searchbar> component in my Ionic/Angular project. The search bar works perfectly fine when I run the app in the browser, but it doesn’t render or appear correctly in the Android native build (tested in Android Studio and on an emulator).

Here’s what I’ve noticed:

  • In the browser, the search bar renders with all expected elements (input field, icons, etc.), and I can interact with it normally.
  • In Android Studio, the <ion-searchbar> is present in the DOM but missing many key styles and child elements like the search input field or the clear button.
2

In the browser, is this a dev build or a prod build (the same as your Android native build)?

It sounds like the CSS/styles aren’t being imported correctly so your prod build is not including them.

3

Hi, sorry for the delay in responding and thank you for your comment.

It does seem like that’s the issue. It looks like the styles aren’t being imported correctly in the production build. How can I ensure that the required CSS is included properly in the final build?

Any suggestions would be greatly appreciated. Thanks! :blush:

Edited to add: If I run ionic serve --prod, I encounter the same issue with the ion-searchbar.

4

I’ve solved it by adding this in angular.json:

"production": { 
    "buildOptimizer": false,
     ...
}
1 Like