How do I get the native looking android pill icons like in the demo video?

[fredrikburmester]

What I want:

What I have:

[okwasniewski]

Hey,

In order to get that your styles.xml should inherit from Material3, I'm still trying to figure out how to make it work properly for Expo users as multiple libraries override this style. Until this is shipped in the library I think you can have a local config plugin that changes it, I noticed in the docs there is withAndroidStyles function that allows you to modify it. I will get in touch with Expo folks to figure it out 👍🏻

Here are the docs:

https://okwasniewski.github.io/react-native-bottom-tabs/docs/guides/android-native-styling.html

[fredrikburmester]

I created an expo plugin config that adds the "pill" style to the android tab bar. It's a first version but it's working. I hope this will help!

const { withAndroidStyles, withDangerousMod } = require("@expo/config-plugins");
const fs = require("fs");
const path = require("path");

function withNativeTabBarStyles(config) {
  // First, apply the styles modifications
  config = withAndroidStyles(config, async (config) => {
    const styleContents = config.modResults;

    // Find or create the AppTheme style
    let appTheme = styleContents.resources.style.find(
      (style) => style.$.name === "AppTheme"
    );

    if (!appTheme) {
      appTheme = {
        $: {
          name: "AppTheme",
          parent: "Theme.Material3.DayNight.NoActionBar",
        },
        item: [],
      };
      styleContents.resources.style.push(appTheme);
    } else {
      appTheme.$.parent = "Theme.Material3.DayNight.NoActionBar";
    }

    // Update or add items in the AppTheme style
    const itemsToAdd = [
      {
        name: "android:editTextBackground",
        value: "@drawable/rn_edit_text_material",
      },
      {
        name: "bottomNavigationStyle",
        value: "@style/Widget.Material3.BottomNavigationView",
      },
      {
        name: "android:navigationBarColor",
        value: "@android:color/transparent",
      },
      { name: "android:statusBarColor", value: "@android:color/transparent" },
    ];

    itemsToAdd.forEach(({ name, value }) => {
      const existingItem = appTheme.item.find((item) => item.$.name === name);
      if (existingItem) {
        existingItem._ = value;
      } else {
        appTheme.item.push({
          $: { name },
          _: value,
        });
      }
    });

    // Add custom bottom navigation style
    styleContents.resources.style.push({
      $: {
        name: "CustomBottomNavigationView",
        parent: "@style/Widget.Material3.BottomNavigationView",
      },
      item: [
        {
          $: { name: "android:layout_margin" },
          _: "16dp",
        },
        {
          $: { name: "android:background" },
          _: "@drawable/bottom_nav_background",
        },
      ],
    });

    const bottomNavigationStyleItem = appTheme.item.find(
      (item) => item.$.name === "bottomNavigationStyle"
    );
    if (bottomNavigationStyleItem) {
      bottomNavigationStyleItem._ = "@style/CustomBottomNavigationView";
    } else {
      appTheme.item.push({
        $: { name: "bottomNavigationStyle" },
        _: "@style/CustomBottomNavigationView",
      });
    }

    return {
      ...config,
      modResults: styleContents,
    };
  });

  // Then, add the drawable file creation
  return withDangerousMod(config, [
    "android",
    async (config) => {
      const drawablePath = path.join(
        config.modRequest.platformProjectRoot,
        "app",
        "src",
        "main",
        "res",
        "drawable"
      );
      const filePath = path.join(drawablePath, "bottom_nav_background.xml");

      const fileContent = `<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="?attr/colorSurfaceVariant" />
    <corners android:radius="28dp" />
</shape>`;

      await fs.promises.mkdir(drawablePath, { recursive: true });
      await fs.promises.writeFile(filePath, fileContent);

      return config;
    },
  ]);
}

module.exports = withNativeTabBarStyles;