Alert not properly visible in Dark mode

[humble-programmer]

Description

Upon upgrading from version 0.63.2 to 0.64.0, I am facing a styling issue with the Alert component/API on Android. Previously, it always used to display a light background with a dark title, main text and buttons regardless of the device's theme (be it in System Default, Light or Dark mode). This was probably because the AppTheme in android/app/src/main/res/values/styles.xml inherited from Theme.AppCompat.Light.NoActionBar.

Now, upon upgrading to 0.64, the AppTheme's parent has changed to Theme.AppCompat.DayNight.NoActionBar probably to better accomodate Dark mode (and device theme change, in general). However, with this change, while the Alert component's background has changed to dark and its main text has changed to light (both good), the title and action button texts remain dark. This makes them very hard to read.

React Native version:

System:
OS: Windows 8 6.2.9200
CPU: (4) x64 Intel(R) Core(TM) i3-3120M CPU @ 2.50GHz
Memory: 1.44 GB / 7.61 GB
Binaries:
Node: 12.18.3 - C:\Program Files\nodejs\node.EXE
Yarn: Not Found
npm: 6.14.6 - C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK:
API Levels: 22, 26, 27, 28, 29
Build Tools: 26.0.2, 27.0.3, 28.0.3, 29.0.2, 30.0.0
System Images: android-28 | Google APIs Intel x86 Atom
Android NDK: Not Found
Windows SDK: Not Found
IDEs:
Android Studio: Version 3.6.0.0 AI-192.7142.36.36.6241897
Visual Studio: Not Found
Languages:
Java: 11.0.2
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.1 => 17.0.1
react-native: 0.64.0 => 0.64.0
react-native-windows: Not Found
npmGlobalPackages:
react-native: Not Found

Steps To Reproduce

1. Create project with npx react-native init

2. Change theme to Dark Mode from Device Settings

3. Use the following code wherever appropriate

    import { Alert } from 'react-native';
    
    ...
    
    Alert.alert('Confirm Log Out', 'Are you sure you would like to log out?',
                [{ text: 'Cancel', onPress: () => { } }, { text: 'Log Out', onPress: () => { } }],
                { cancelable: true }
    );
   

Expected Results

When in Dark Mode, the Alert title and action button texts to be in Light colors

Screenshots:

Current light mode (or in previous version, any mode style):

Current dark mode:

[sidverma32]

@rectified95 I would like to take this up. As this will be my first contribution to this repo. if you can guide me it will be very helpful.

[humble-programmer]

I have narrowed down the issue to android/app/src/main/res/values/styles.xml.
In the base application theme, there is an explicitly added item
<item name="android:textColor">#000000</item>
This leads the textColor of the app to be black even though the theme is actually DayNight. Removing this has fixed the issue for me.
A permanent fix would be to not have this item added by default when creating a new project, as it is buggy behavior.

[sidverma32]

So it will be better if we don't include this line <item name="android:textColor">#000000</item> in this file android/app/src/main/res/values/styles.xml for the inital setup and let people add it as per their project requirements.
@rectified95 Shall i raise a PR for it or if you can suggest any better solution for this issue?

[sidverma32]

@rectified95 I have raised PR for this 31487, please review and do let me know if any modifications needed in that.

[harveyconnor]

Can confirm, removing <item name="android:textColor">#000000</item> solves the issue.

[pavelpashkovsky]

in android/app/src/main/java/com/rrmobile/MainApplication.java

add import androidx.appcompat.app.AppCompatDelegate; to top import section. Then add AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO); to onCreate(). This action disables dark mode on android.

[ahron1]

So it will be better if we don't include this line <item name="android:textColor">#000000</item> in this file android/app/src/main/res/values/styles.xml for the inital setup and let people add it as per their project requirements.
@rectified95 Shall i raise a PR for it or if you can suggest any better solution for this issue?

I am not sure this is the best approach, because if someone simply removes this line and does nothing else, there is no default text color anymore. So wherever the text color is not explicitly styled, the text no longer has a color. People expect text to have a default style and just work.

E.g. right now, I just deleted this line manually, and half my text is no longer visible.

A better approach that doesn't break any expected behavior is what's discussed in this other thread. But it is slightly more elaborate.

[professorkolik]

This changes AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO); should be added in migration helper, this simple change has breaking behaviour for many projects

[jjr52]

I know this is an old thread, but I am getting this exact behaviour on RN v0.71.3.
The last comment on this thread seems to imply that this issue was resolved/fixed in v0.66. Have I misunderstood or has the issue reappeared?