React Native - Dark Mode

React Native

 

 

✅ useColorScheme

---

color scheme을 가져오는 hook

import React from 'react';
import {Text, StyleSheet, useColorScheme} from 'react-native';
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';

const App = () => {
  const colorScheme = useColorScheme();
  return (
    <SafeAreaProvider>
      <SafeAreaView style={styles.container}>
        <Text>useColorScheme(): {colorScheme}</Text>
      </SafeAreaView>
    </SafeAreaProvider>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default App;

 

https://reactnative.dev/docs/usecolorscheme

useColorScheme · React Native

 

 

✅ Appearance

---

import {Appearance} from 'react-native';

const colorScheme = Appearance.getColorScheme();
if (colorScheme === 'dark') {
  // Use dark color scheme
}

 

https://reactnative.dev/docs/appearance

Appearance · React Native

 

 

✅ ThemeProvider(다크모드 색상을 직접 지정하기 귀찮을 때 쓸 수 있는 preset)

---

app 폴더를 사용하는 expo router 방식에서는 NavigationContainer를 사용하지 않기 때문에 NavigationContainer의 theme prop에 주는 방식이 아닌 ThemeProvider의 value prop에 theme을 제공하는 방식을 사용한다.

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

const isDark = useColorScheme() === "dark";

  return (
    <ThemeProvider value={isDark ? DarkTheme : DefaultTheme}>
      <Tabs />
      <StatusBar style="auto" />
    </ThemeProvider>
  );