CODEWITHSUNDEEP
react-nativeandroid-darkmode
cakePHP
cakePHP

Reputation: 465

How to force disable android dark mode in React Native

I made one app in react-native using

"react-native": "0.62.0",

"react": "16.11.0",

as I put my android device in dark mode, my UI designs get disturbed so i want to make it disable for now.

please help.

Upvotes: 8

Views: 33839

Answers (5)

Deepak Singh
Deepak Singh

Reputation: 1145

File path: android/app/src/main/res/values/styles.xml

change

<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">

to

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

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

Please also Subscribe to my Youtube channel

Upvotes: 24

Bhavya Koshiya
Bhavya Koshiya

Reputation: 1806

You can disable force dark mode in android by adding this line in your styles.xml in your android folder

<item name="android:forceDarkAllowed">false</item>

Like this

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:forceDarkAllowed">false</item>
        <item name="android:textColor">#000000</item>
    </style>
</resources>

You need to run the app again after doing these changes since these changes are native level.

Edit: If you get error about target API use it like this

<item name="android:forceDarkAllowed" tools:targetApi="q">false</item>

Upvotes: 20

shriekdj
shriekdj

Reputation: 91

You Can Appearance hook for it.

import { useEffect } from 'react';
import { Appearance } from 'react-native';
const App = () => {
  useEffect(() => Appearance.setColorScheme('light'),
  [])
  return <View>
    <Text>Some Text<Text>
  </View>
}

Upvotes: 5

Adriano Werpel Silva
Adriano Werpel Silva

Reputation: 389

It's complicade because you can try many things but if you buy a theme of other developer maybe the code have lines to force the dark mode. I bought a theme a have this lines, like this:

export const useTheme = () => {
 const isDarkMode = useColorScheme() === 'dark';
 const forceDark = useSelector(state => state.application.force_dark);
 const themeStorage = useSelector(state => state.application.theme);
 const listTheme = ThemeSupport.filter(item => item.theme == themeStorage);
 const theme = listTheme.length > 0 ? listTheme[0] : DefaultTheme;

 if (forceDark) {
   return {theme: theme.dark, colors: theme.dark.colors}; <--- change here
 }
 if (forceDark === false) {
   return {theme: theme.light, colors: theme.light.colors};
 }
 return isDarkMode
   ? {theme: theme.dark, colors: theme.dark.colors} <----- change here
   : {theme: theme.light, colors: theme.light.colors};
};

So I change dark to ligth and solved my problem.

Upvotes: 0

Ganesh Moorthy A
Ganesh Moorthy A

Reputation: 204

For IOS change your info.plist

<key>UIUserInterfaceStyle</key>
    <string>Light</string>

Upvotes: 11

Related Questions