Bottom navigation disappears on API 36+

[dlcole]

I started this issue in Discord but am creating an issue here to better capture the related information.

My app uses:
nativescript 9.1.1
@nativescript/android 9.1.1
@nativescript-community/ui-material-bottom-navigation 7.3.2

On Android API 36 and 37 the bottom navigation disappears. CoPilot suggests this is an edge-to-edge issue, but so far no changes to the various styles.xml files make any difference.

Here's one of the styles for API 36:

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Android 15/16 edge-to-edge fix: keep the Material BottomNavigation visible above the system nav bar. -->
    <style name="AppThemeBase36" parent="AppThemeBase35">
        <item name="android:windowTranslucentNavigation">false</item>
        <item name="android:fitsSystemWindows">true</item>
        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
        <item name="android:windowOptOutEdgeToEdgeEnforcement">true</item>
    </style>

    <style name="AppTheme" parent="AppThemeBase36">
    </style>

</resources>

Any suggestions here? I have to believe other folks have already encountered this.

Edit 9/10/2026:

This addition to onLoaded() for the main page did the trick:

 if (isAndroid) {
    // Make bottom navigation bar visible on Android 11+ (API 30+) devices. 
    if (android.os.Build.VERSION.SDK_INT >= 30) {
      application.android.foregroundActivity.getWindow().setDecorFitsSystemWindows(true);
    }
}

Edit 9/13/2026:

I stand corrected. The above fix works with targetSdkVersion 35 but not with 36 or 37, and Google Play now requires a version greater than 35 . This is an edge-to-edge issue, and I know 9.1 made changes for this. Still searching (and welcoming any pointers)

Edit 09/14/2026:

With considerable effort, I now have bottom navigation visible and the status bar / action bar properly displayed on API 36 and 37. With API 35, however, the action bar is underneath the status bar, and I haven't found a change that corrects that without loosing bottom navigation.

Here's a quick summary of your changes:

In app-root.xml:
<Frame defaultPage="/views/main-page" androidOverflowEdge="dont-apply" >

In main-page.xml:
<Page androidOverflowEdge="top" ...

<mdt:BottomNavigation selectedIndex="0" id="btmnav" androidOverflowEdge="top" >

On every other -page.xml:

<Page androidOverflowEdge="top" ...

On every other -page.js where the layout starts with a StackLayout, in onLoaded:

myutils.removeAndroidTopInset(page);

In myutils.js:

export function removeAndroidTopInset(page) {
  if (!global.isAndroid || !page?.content || android.os.Build.VERSION.SDK_INT < 35) {
    return;
  }

  const activity = utils.android.getCurrentActivity();
  if (!activity) {
    return;
  }

  const statusTop = activity
    .getWindowManager()
    .getCurrentWindowMetrics()
    .getWindowInsets()
    .getInsets(android.view.WindowInsets.Type.statusBars())
    .top;

  page.content.style.marginTop = -utils.layout.toDeviceIndependentPixels(statusTop);
}

I've carefully read @wwalkerrun 's links at https://discord.com/channels/603595811204366337/603595811720527881/1525559623321522378 but haven't been able to use Utils.android.enableEdgeToEdge() to affect any changes.

After working on this for a week, my main questions is whether the changes I describe above is the right approach, or whether I really need to be making insets myself. If so, I would love to have some kind of pointer for how to do this when using @nativescript-community/ui-material-bottom-navigation.

{N} and all platforms and plugins are at the latest current level.