How to Use the Default Light and Dark Themes in React Native

One of the great features of React Native is its built-in support for light and dark themes, which allows your app to adapt to the user’s system preferences. This guide will walk you through how to implement the default light and dark themes in your React Native app.

Why Use Light and Dark Themes?

Modern mobile apps often support both light and dark modes to enhance user experience. React Native simplifies this by providing default themes you can easily integrate into your app.

Getting Started with Themes

1. Install Necessary Packages

If you're using Expo, most of the tools are already included. You will need to install the following if you aren’t using it already:

npm install @react-navigation/native

2. Import ThemeProvider

In your main layout file (e.g., _layout.js or App.js), import and wrap your app with ThemeProvider from @react-navigation/native:

import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
import { useColorScheme } from 'react-native';

export default function App() {
  const colorScheme = useColorScheme();

  return (
    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
      {/* Your app components here */}
    </ThemeProvider>
  );
}

Accessing the Theme in Components

To access the current theme in your components, use the useTheme hook provided by @react-navigation/native:

import { useTheme } from '@react-navigation/native';

export default function HomeScreen() {
  const { colors } = useTheme();

  return (
    <View style={{ flex: 1, backgroundColor: colors.background }}>
      <Text style={{ color: colors.text }}>Hello, React Native!</Text>
    </View>
  );
}

Key Theme Properties

The default themes include properties like:

colors.background – Background color
colors.text – Text color
colors.border – Border color

Benefits of Using Default Themes

Automatic adaptation to system settings.
Consistent user experience.
Easy access to theme properties using useTheme.

Conclusion

Using the default light and dark themes in React Native is a simple yet powerful way to enhance your app’s usability. By leveraging ThemeProvider and useTheme, you can ensure your app seamlessly adapts to your user’s preferences.

Happy coding! 🚀

Using the Default Light and Dark Themes in React Native: A Beginner’s Guide