Androidでダークモードにするとアラートの文字が黒いままで見にくい現象が起きた
Androidでアラートを出そうとした時、通常はこのようなUIになります。
実装はとても簡単でこんな感じです。
import React from 'react';
import {Alert, Button, View} from 'react-native';
export const AlertView = () => {
const onAlert = () => {
return Alert.alert('こんにちは')
}
return (
<View>
<Button title="タップ" onPress={onAlert} />
</View>
);
};
React Native標準のAlertを使えば簡単に表示できます。
ただ、アラート内の文字にスタイリングを当てることはできないというデメリットもありますが、基本的にアラートを出すときはこれで十分だと考えられます。
しかし、スマホをダークモードにしてしまうと。。。。
アラート自体は暗くなるのに文字が黒いままで非常に見にくくなります。
自動的に対応してくれないのかよ！と思いました。
解決策
プロジェクト内のandroidディレクトリ内にダークモードでも文字色を黒にするように標準で設定されていました。
その文をなくせば解決します。
プロジェクト名/android/src/main/res/values/styles.xmlに行きます。
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:textColor">#000000</item> ←問題のコード
</style>
</resources>
item name="android:textColor">#000000</item>
これを消しちゃってください。それで問題解決します。
実際に検証してみると、、
こんな感じになります！
アラートの文字以外にもTextInputのPlaceholderなど文字にカラーを設定していないところはダークモードにしても黒くなってしまいます。