1import React from 'react';
2import { Appearance, StyleSheet, Text, View } from 'react-native';
3import type { NativeEventSubscription } from 'react-native';
4
5type ColorSchemeName = Appearance.AppearancePreferences['colorScheme'];
6
7interface State {
8  colorScheme: ColorSchemeName;
9}
10
11// See: https://github.com/expo/expo/pull/10229#discussion_r490961694
12// eslint-disable-next-line @typescript-eslint/ban-types
13export default class AppearanceScreen extends React.Component<{}, State> {
14  static navigationOptions = {
15    title: 'Appearance',
16  };
17
18  subscription?: NativeEventSubscription;
19
20  state: State = {
21    colorScheme: Appearance.getColorScheme(),
22  };
23
24  componentDidMount() {
25    this.subscription = Appearance.addChangeListener(
26      ({ colorScheme }: { colorScheme: ColorSchemeName }) => {
27        this.setState({ colorScheme });
28      }
29    );
30  }
31
32  componentWillUnmount() {
33    if (this.subscription) this.subscription.remove();
34  }
35
36  render() {
37    const { colorScheme } = this.state;
38    const isDark = colorScheme === 'dark';
39
40    return (
41      <View style={[styles.screen, isDark ? styles.darkScreen : styles.lightScreen]}>
42        <Text style={isDark ? styles.darkText : styles.lightText}>
43          {`Current color scheme: `}
44
45          <Text style={styles.boldText}>{this.state.colorScheme}</Text>
46        </Text>
47      </View>
48    );
49  }
50}
51
52const styles = StyleSheet.create({
53  screen: {
54    flex: 1,
55    justifyContent: 'center',
56    alignItems: 'center',
57  },
58  lightScreen: {
59    backgroundColor: '#f8f8f9',
60  },
61  darkScreen: {
62    backgroundColor: '#000',
63  },
64  lightText: {
65    color: '#242c39',
66  },
67  darkText: {
68    color: '#fff',
69  },
70  boldText: {
71    fontWeight: 'bold',
72  },
73});
74