Dark Mode Support in React Native

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'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'll also cover how to change the color scheme and save the color scheme preference.

Prerequisites

Before we dive into how to add dark mode support to your React Native application, let's take a look at the prerequisites. To follow along with this tutorial, you'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:

react-native init MyProject

This will create a new React Native project in the MyProject directory.

Handling Different Themes in React Native

In React Native, you can handle different themes using the StyleSheet 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 create method of the StyleSheet 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:

const styles = StyleSheet.create({
  dark: {
    backgroundColor: 'black',
    color: 'white',
  },
  light: {
    backgroundColor: 'white',
    color: 'black',
  },
}, {
  dark: true,
});

How to Support Dark Mode in React Native

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

To support dark mode, you'll need to create two components: a ThemeContext component and a DarkModeToggle component.

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

ThemeContext Component

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

const ThemeContext = React.createContext({
  theme: 'light',
  setTheme: () => {},
});

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

DarkModeToggle Component

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

const DarkModeToggle = () => {
  const { theme, setTheme } = useContext(ThemeContext);

  return (
    <Switch
      value={theme === 'dark'}
      onValueChange={(value) => setTheme(value ? 'dark' : 'light')}
    />
  );
};

This will create a toggle switch that will call the setTheme 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'll use the useTheme hook to get the current theme and the StyleSheet API to apply the correct style.

const App = () => {
  const theme = useTheme();

  return (
    <View style={styles[theme]}>
      {/* App content here */}
    </View>
  );
};

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

Saving the Color Scheme Preference

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

const saveTheme = async (theme) => {
  try {
    await AsyncStorage.setItem('theme', theme);
  } catch (err) {
    // Error saving data
  }
};

We can then call this function in the setTheme function to save the user's preference.

const setTheme = (theme) => {
  // Set the theme
  setThemeState(theme);

  // Save the theme
  saveTheme(theme);
};

This will save the user's preference in AsyncStorage 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.