Android Alert style overriding React Native Development Menu

Question

I am trying to style the Android alert dialog in React Native. What I've done is this:

1. I've added a special style for the App Theme:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:textColor">#000000</item>
        <item name="android:alertDialogTheme">@style/AlertDialogTheme</item>
    </style>

    <style name="SplashTheme" parent="Theme.AppCompat.NoActionBar">
        <item name="android:windowBackground">@drawable/background_splash</item>
    </style>

</resources>

2. That style looks as such:

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="AlertDialogTheme" parent="Theme.AppCompat.Dialog.Alert">
        <item name="android:background">#FFFFFF</item>
        <item name="android:textColor">#0078D4</item>
        <item name="android:textColorPrimary">#000000</item>
        <item name="android:buttonBarNegativeButtonStyle">@style/NegativeButtonStyle</item>
        <item name="android:buttonBarPositiveButtonStyle">@style/PositiveButtonStyle</item>
    </style>

    <style name="NegativeButtonStyle" parent="Widget.AppCompat.Button.ButtonBar.AlertDialog">
        <item name="android:textColor">#0078D4</item>
        <item name="android:textAllCaps">false</item>
    </style>

    <style name="PositiveButtonStyle" parent="Widget.AppCompat.Button.ButtonBar.AlertDialog">
        <item name="android:textColor">#0078D4</item>
        <item name="android:textAllCaps">false</item>
    </style>
</resources>

Now, when I trigger the Alert in React Native, this looks great! However, when I try to pull up the debug menu to enable reloading/debugging/etc., it just looks blank:

Can anyone tell me if:

1. There's a better way to do this styling so that it doesn't impact the developer menu
2. There's a way to modify my existing custom style to re-light the developer menu in the app?

I have verified that removing the style fixes the issue, so this is the cause.

Thanks!

Daye

did you find any solution for this, how to edit there alert component with out impacting the debug menu ? – Korenblat

Answer 1

Add this item to your AlertDialogTheme with suitable color

<item name="android:textColorAlertDialogListItem">#121212</item>

Even if you have textColor item is declared in your theme, ListItem's text color needs to be added separtely for it to override white color.

Offense