Issue with native dialogs on Android

[pmmmwh]

Before submitting a new issue

• I tested using the latest version of the library, as the bug might be already fixed.
• I tested using a supported version of react native.
• I checked for possible duplicate issues, with possible answers.

Bug summary

I'm a bit unsure if this should belong to here or Expo / RN CLI / RN.

Since this package (esp. the Expo plugin) applies Theme.xxx.DayNight.NoActionBar themes, it breaks how native dialogs are rendered (e.g. in react-native-webview where the default dialogs from system are shown when JS calls alert) due to some default generated overrides (presumably for RN < 0.75?):

<style name="AppTheme" parent="Theme.EdgeToEdge.DayNight.NoActionBar">
  <item name="android:textColor">@android:color/black</item>
  <item name="android:editTextStyle">@style/ResetEditText</item>
  <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
  <item name="colorPrimary">@color/colorPrimary</item>
  <item name="android:statusBarColor">#FFFBFF</item>
</style>

Issues (only in dark mode):

• when editTextBackground is set, native dialogs will be very dark
• when android:textColor and colorPrimary are set buttons will never adopt for dark theme and become very hard to read

My current solution is to apply extra plugins to remove those keys, but maybe this should be something that is included in this package (since it's probably quite hard to figure out what's going on):

withAndroidStyles(config, (config) => {
  config.modResults.resources.style = config.modResults.resources.style?.map(
    (style): typeof style => {
      if (style.$.name === "AppTheme") {
        style.item = style.item.filter(
          (i) =>
            ![
              "android:editTextBackground",
              "android:textColor",
              "colorPrimary",
            ].includes(i.$.name),
        );
      }

      return style;
    },
  );

  return config;
});

Library version

1.1.3

Environment info

expo-env-info 1.2.1 environment info:
  System:
    OS: macOS 15.2
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.12.0 - ~/.local/share/mise/installs/node/22.12.0/bin/node
    Yarn: 1.22.22 - ~/.local/share/mise/installs/node/22.12.0/bin/yarn
    npm: 11.0.0 - ~/.local/share/mise/installs/node/22.12.0/bin/npm
    Watchman: 2024.12.02.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.16.2 - /opt/homebrew/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 24.2, iOS 18.2, macOS 15.2, tvOS 18.2, visionOS 2.2, watchOS 11.2
  IDEs:
    Android Studio: 2024.2 AI-242.23339.11.2421.12700392
    Xcode: 16.2/16C5032a - /usr/bin/xcodebuild
  npmPackages:
    expo: ~52.0.23 => 52.0.23
    expo-router: ~4.0.15 => 4.0.15
    react: 18.3.1 => 18.3.1
    react-dom: 18.3.1 => 18.3.1
    react-native: 0.76.5 => 0.76.5
    react-native-web: ~0.19.13 => 0.19.13
  npmGlobalPackages:
    eas-cli: 14.2.0
  Expo Workflow: managed

Steps to reproduce

1. Have an app that uses react-native-edge-to-edge and renders a WebView using react-native-webview
2. Run the app on Android, ensure dark theme is enabled
3. Trigger alert("test") in the WebView, and see how the dialogs look wonky

Reproducible sample code

Add the following view to an Expo app (code written using Expo Router here):


export default function Route() {
  return (
    <WebView source={{ uri: 'https://reactnative.dev/' }} style={{ flex: 1 }} />
  );
}


Then, use `chrome://inspect` to go into WebView debugger. In the debugger, trigger `alert("test")`.

There are probably other ways to trigger native dialogs but this is the specific route I encountered the issue.

[zoontek]

@pmmmwh Thanks for the very clear report, appreciate it!

This is kinda an Expo issue. Let me explain.

Since React Native 0.64+ and dark mode support, the default app theme inherit from Theme.AppCompat.DayNight.NoActionBar (PR link). But Expo never catched up, and to this day, they still inherits from Theme.AppCompat.Light.NoActionBar, resulting in partial dark mode support.

So let's say I create a fresh Expo app without any dependencies or modifications, and just display a native dialog with Alert:

Works well! After all, my phone is configured to use light mode 🙂

---

Now, I switch my phone to use dark mode:

Hum? The native dialog stays light? Well…it's normal, as Expo inherits from Theme.AppCompat.Light.NoActionBar by default. Android (the system) is actually not aware that your app supports dark mode.

---

Let's add react-native-edge-to-edge to the project, and restarts the app (the phone still uses dark mode):

Looks broken… And that's still normal: as we now inherits from Theme.EdgeToEdge, which inherits from Theme.AppCompat.DayNight.NoActionBar, Android is now well-aware that our app supports dark mode! But as Expo, by default, sets android:textColor, android:editTextStyle for light mode only (without their dark mode counterpart), it messes with the native dialog style in dark mode.

A possible fix would be to correctly set these colors, using values/colors.xml and values-night/colors.xml:

But for me, this fix should be done upstream: directly in Expo (and they could finally switch to Theme.AppCompat.DayNight.NoActionBar)

---

Meanwhile, I also shipped a new version with new themes. It you set ["react-native-edge-to-edge", { "android": { "parentTheme": "Light" } }] you'll preserve the current Expo behavior:

[andrewwardmt]

Here's a plugin to set the colors and style with Expo

const customColorsPlugin: ConfigPlugin = (appConfig: ExpoConfig) => {
    appConfig = withAndroidStyles(appConfig, config => {
        config.modResults = AndroidConfig.Styles.assignStylesValue(config.modResults, {
            add: true,
            name: "android:textColor",
            value: "@color/textColor",
            parent: {
                name: "AppTheme",
            }
        });
        return config;
    });

    appConfig = withAndroidColors(appConfig, async config => {
        config.modResults = AndroidConfig.Colors.assignColorValue(config.modResults, {
            name: "textColor",
            value: "#000",
        });
        return config;
    });

    appConfig = withAndroidColorsNight(appConfig, async config => {
        config.modResults = AndroidConfig.Colors.assignColorValue(config.modResults, {
            name: "textColor",
            value: "#fff",
        });
        return config;
    });

    return appConfig;
};

Edit: this doesn't work properly when the system theme doesn't match the app theme. Will go with the light parent theme until expo fixes this in expo 53:

            [
                "react-native-edge-to-edge",
                {
                    android: {
                        parentTheme: "Light",
                        enforceNavigationBarContrast: false,
                    },
                },
            ],