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