Dark mode is becoming increasingly popular among mobile users, offering them a way to reduce eye strain and conserve battery life. As a result, many developers are looking for ways to add dark mode support to their React Native apps. In this article, we&#x27;ll discuss the prerequisites, how to create a React Native project, how to handle different themes, and how to support dark mode in React Native. We&#x27;ll also cover how to change the color scheme and save the color scheme preference.

![react native dark mode](https:&#x2F;&#x2F;devbrite.io&#x2F;media&#x2F;cover9.jpg)
## Prerequisites

Before we dive into how to add dark mode support to your React Native application, let&#x27;s take a look at the prerequisites. To follow along with this tutorial, you&#x27;ll need to have the following installed:

- React Native CLI
- Node.js and npm
- Xcode or Android Studio

## Creating a React Native Project

To get started, open a terminal window and create a new React Native project with the following command:

&#96;&#96;&#96;
react-native init MyProject
&#96;&#96;&#96;

This will create a new React Native project in the &#96;MyProject&#96; directory.

## Handling Different Themes in React Native

In React Native, you can handle different themes using the &#96;StyleSheet&#96; API. This API allows you to specify different styles for different themes, such as dark and light mode.

To create different styles for different themes, you can use the &#96;create&#96; method of the &#96;StyleSheet&#96; API. This method takes two arguments: an object with the styles for each theme and a boolean indicating whether the theme is dark or light. For example, the following code creates two themes, one for dark mode and one for light mode:

&#96;&#96;&#96;javascript
const styles = StyleSheet.create({
  dark: {
    backgroundColor: &#x27;black&#x27;,
    color: &#x27;white&#x27;,
  },
  light: {
    backgroundColor: &#x27;white&#x27;,
    color: &#x27;black&#x27;,
  },
}, {
  dark: true,
});
&#96;&#96;&#96;

## How to Support Dark Mode in React Native

Now that we&#x27;ve covered how to handle different themes in React Native, let&#x27;s look at how to support dark mode.

To support dark mode, you&#x27;ll need to create two components: a &#96;ThemeContext&#96; component and a &#96;DarkModeToggle&#96; component. 

The &#96;ThemeContext&#96; component will contain the state for the current theme and a function to set the theme. The &#96;DarkModeToggle&#96; component will be a toggle switch that will allow the user to switch between dark and light mode.

### ThemeContext Component

The &#96;ThemeContext&#96; component will contain the state for the current theme and a function to set the theme. To create this component, you&#x27;ll need to use the &#96;React.createContext&#96; API. 

&#96;&#96;&#96;javascript
const ThemeContext = React.createContext({
  theme: &#x27;light&#x27;,
  setTheme: () =&gt; {},
});
&#96;&#96;&#96;

This will create a context object with two properties: &#96;theme&#96; and &#96;setTheme&#96;. The &#96;theme&#96; property will store the current theme and the &#96;setTheme&#96; property will be a function to set the theme.

### DarkModeToggle Component

The &#96;DarkModeToggle&#96; component will be a toggle switch that will allow the user to switch between dark and light mode. To create this component, you&#x27;ll need to use the &#96;useContext&#96; hook to get the &#96;ThemeContext&#96; object.

&#96;&#96;&#96;javascript
const DarkModeToggle = () =&gt; {
  const { theme, setTheme } = useContext(ThemeContext);

  return (
    &lt;Switch
      value={theme === &#x27;dark&#x27;}
      onValueChange={(value) =&gt; setTheme(value ? &#x27;dark&#x27; : &#x27;light&#x27;)}
    &#x2F;&gt;
  );
};
&#96;&#96;&#96;

This will create a toggle switch that will call the &#96;setTheme&#96; function when the user changes the value.

## Changing the Color Scheme

Now that we have the components in place, we can start changing the color scheme of the app. To do this, we&#x27;ll use the &#96;useTheme&#96; hook to get the current theme and the &#96;StyleSheet&#96; API to apply the correct style.

&#96;&#96;&#96;javascript
const App = () =&gt; {
  const theme = useTheme();

  return (
    &lt;View style={styles[theme]}&gt;
      {&#x2F;* App content here *&#x2F;}
    &lt;&#x2F;View&gt;
  );
};
&#96;&#96;&#96;

This will apply the correct style based on the current theme.

## Saving the Color Scheme Preference

Finally, we&#x27;ll need to save the user&#x27;s color scheme preference so that it persists across sessions. To do this, we&#x27;ll use the &#96;AsyncStorage&#96; API to store the user&#x27;s preference.

&#96;&#96;&#96;javascript
const saveTheme = async (theme) =&gt; {
  try {
    await AsyncStorage.setItem(&#x27;theme&#x27;, theme);
  } catch (err) {
    &#x2F;&#x2F; Error saving data
  }
};
&#96;&#96;&#96;

We can then call this function in the &#96;setTheme&#96; function to save the user&#x27;s preference.

&#96;&#96;&#96;javascript
const setTheme = (theme) =&gt; {
  &#x2F;&#x2F; Set the theme
  setThemeState(theme);

  &#x2F;&#x2F; Save the theme
  saveTheme(theme);
};
&#96;&#96;&#96;

This will save the user&#x27;s preference in &#96;AsyncStorage&#96; and ensure that it persists across sessions.

## Conclusion

In this article, we looked at how to add dark mode support to a React Native app. We discussed the prerequisites, how to create a React Native project, how to handle different themes, and how to support dark mode in React Native. We also covered how to change the color scheme and save the color scheme preference. With these steps, you should now be able to add dark mode support to your React Native apps.

Dark Mode Support in React Native

About

Legal

Products

Resources

Category: