fixAdyenDropInAndroidStatusBarStyleFix.ts

gistfile1.txt

import { ConfigPlugin, withDangerousMod } from "@expo/config-plugins";
import * as fs from "fs";
import * as path from "path";

/**
 * Expo config plugin to patch the Android `styles.xml` file
 * to fix the Adyen DropIn status bar color bug (see: https://github.com/Adyen/adyen-react-native/issues/630).
 */
const fixAdyenDropInAndroidStatusBarStyleFix: ConfigPlugin = (config) => {
  return withDangerousMod(config, [
    "android",
    (config) => {
      const stylesPath = path.join(
        config.modRequest.projectRoot,
        "android",
        "app",
        "src",
        "main",
        "res",
        "values",
        "styles.xml",
      );

      if (!fs.existsSync(stylesPath)) {
        throw new Error(`styles.xml not found at ${stylesPath}`);
      }

      let stylesXml = fs.readFileSync(stylesPath, "utf8");

      const styleId = "AdyenCheckout.Translucent";
      if (stylesXml.includes(styleId)) {
        console.log(`Style "${styleId}" already exists. Skipping.`);
        return config;
      }

      const styleBlock = `
    <style name="${styleId}">
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:backgroundDimEnabled">true</item>
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>`;

      stylesXml = stylesXml.replace(
        "</resources>",
        `${styleBlock}\n</resources>`,
      );
      fs.writeFileSync(stylesPath, stylesXml);

      console.log(`✅ Injected Adyen style into styles.xml`);
      return config;
    },
  ]);
};

export default fixAdyenDropInAndroidStatusBarStyleFix;