How to Check whether Dark Mode is enabled in React Native?

Oct 07, 2022 . Admin

In this article we will cover on how to implement react native check if dark mode. We will use how to check if dark mode is enabled android. you'll learn detect dark mode react native. This post will give you simple example of react native get dark mode. Let's get started with Appearance in react native.

In this example,We will learn to light and dark mode in react native. you can get using useColorScheme and Appearance get to userinterface in react native.

Step 1: Download Project

In the first step run the following command to create a project.

expo init ExampleApp
Step 2: App.js

In this step, You will open the App.js file and put the code.

import React from 'react';
import {Text, StyleSheet, Appearance, View, useColorScheme} from 'react-native';

const App = () => {
  const colorScheme = useColorScheme();
  
  const themeTextStyle = colorScheme === 'light' ? styles.lightThemeText : styles.darkThemeText;

  const themeContainerStyle = colorScheme === 'light' ? styles.lightContainer : styles.darkContainer;
  
  return (
    <View style={[styles.container, themeContainerStyle]}>
      <Text style={[styles.text, themeTextStyle]}>The current preferred theme: {colorScheme}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  lightContainer: {
    backgroundColor: '#ffffff',
  },
  darkContainer: {
    backgroundColor: '#242c40',
  },
  lightThemeText: {
    color: '#242c40',
  },
  darkThemeText: {
    color: '#ffffff',
  },
});

export default App;
Step 3: Run Project

In the last step run your project using the below command.

expo start

You can QR code scan in Expo Go Application on mobile.

Output:

It will help you...

#React Native