react_native_brackets_template_app_entry_with_dark_mode.ts

1import React from 'react';
2import {
3  SafeAreaView,
4  StatusBar,
5  StyleSheet,
6  Text,
7  useColorScheme,
8  View,
9} from 'react-native';
10
11import {
12  Colors,
13} from 'react-native/Libraries/NewAppScreen';
14
15const App = () => {
16  const isDarkMode = useColorScheme() === 'dark';
17
18  const backgroundStyle = {
19    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
20    flex: 1,
21  };
22
23  return (
24    <SafeAreaView style={backgroundStyle}>
25      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
26      <View style={styles.container}>
27        <Text style={[
28          styles.text,
29          { color: isDarkMode ? Colors.white : Colors.black }
30        ]}>
31          Welcome to Brackets Template
32        </Text>
33      </View>
34    </SafeAreaView>
35  );
36};
37
38const styles = StyleSheet.create({
39  container: {
40    flex: 1,
41    justifyContent: 'center',
42    alignItems: 'center',
43  },
44  text: {
45    fontSize: 24,
46    fontWeight: '600',
47  },
48});
49
50export default App;