fix: native pill look on android

2026-03-14 21:36:20 +00:00 · 2024-10-27 12:37:46 +01:00
parent d1221dae83
commit f5857e2162
3 changed files with 135 additions and 8 deletions
--- a/plugins/withNativeStyles.js
+++ b/plugins/withNativeStyles.js
@@ -0,0 +1,110 @@
+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: "Widget.Material3.BottomNavigationView",
+        parent: "@style/Widget.Material3.BottomNavigationView",
+      },
+      item: [
+        {
+          $: { name: "android:layout_margin" },
+          _: "16dp",
+        },
+        {
+          $: { name: "android:background" },
+          _: "@drawable/bottom_nav_background",
+        },
+      ],
+    });
+
+    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;