|
5 | 5 | * @format |
6 | 6 | */ |
7 | 7 |
|
8 | | -import React from 'react'; |
9 | | -import type {PropsWithChildren} from 'react'; |
| 8 | +import React, {useState, useEffect, useCallback} from 'react'; |
| 9 | + |
10 | 10 | import { |
11 | | - ScrollView, |
12 | 11 | StatusBar, |
13 | 12 | StyleSheet, |
14 | | - Text, |
15 | 13 | useColorScheme, |
16 | 14 | View, |
| 15 | + Platform, |
17 | 16 | } from 'react-native'; |
18 | 17 |
|
19 | | -import { |
20 | | - Colors, |
21 | | - DebugInstructions, |
22 | | - Header, |
23 | | - LearnMoreLinks, |
24 | | - ReloadInstructions, |
25 | | -} from 'react-native/Libraries/NewAppScreen'; |
| 18 | +import {NavigationContainer} from '@react-navigation/native'; |
| 19 | +import {createNativeStackNavigator} from '@react-navigation/native-stack'; |
| 20 | +import {Provider} from 'react-redux'; |
26 | 21 |
|
27 | | -type SectionProps = PropsWithChildren<{ |
28 | | - title: string; |
29 | | -}>; |
| 22 | +import store from './redux/store'; |
| 23 | +import HomeScreen from './components/HomeScreen'; |
| 24 | +import Settings from './components/Settings'; |
| 25 | +import Notifications from './components/Notifications'; |
| 26 | +import Goals from './components/Goals'; |
| 27 | +import Themes from './components/Themes'; |
| 28 | +import {themes} from './helpers/colors'; |
| 29 | +import ImportExport from './components/ImportExport'; |
| 30 | +import Synchronization from './components/Synchronization'; |
| 31 | +import PeriodicStats from './components/PeriodicStats'; |
30 | 32 |
|
31 | | -function Section({children, title}: SectionProps): React.JSX.Element { |
32 | | - const isDarkMode = useColorScheme() === 'dark'; |
33 | | - return ( |
34 | | - <View style={styles.sectionContainer}> |
35 | | - <Text |
36 | | - style={[ |
37 | | - styles.sectionTitle, |
38 | | - { |
39 | | - color: isDarkMode ? Colors.white : Colors.black, |
40 | | - }, |
41 | | - ]}> |
42 | | - {title} |
43 | | - </Text> |
44 | | - <Text |
45 | | - style={[ |
46 | | - styles.sectionDescription, |
47 | | - { |
48 | | - color: isDarkMode ? Colors.light : Colors.dark, |
49 | | - }, |
50 | | - ]}> |
51 | | - {children} |
52 | | - </Text> |
53 | | - </View> |
54 | | - ); |
55 | | -} |
| 33 | +const Stack = createNativeStackNavigator(); |
56 | 34 |
|
57 | | -function App(): React.JSX.Element { |
| 35 | +const App: React.FC = () => { |
58 | 36 | const isDarkMode = useColorScheme() === 'dark'; |
59 | 37 |
|
60 | | - const backgroundStyle = { |
61 | | - backgroundColor: isDarkMode ? Colors.darker : Colors.lighter, |
62 | | - }; |
63 | | - |
64 | | - /* |
65 | | - * To keep the template simple and small we're adding padding to prevent view |
66 | | - * from rendering under the System UI. |
67 | | - * For bigger apps the reccomendation is to use `react-native-safe-area-context`: |
68 | | - * https://github.com/AppAndFlow/react-native-safe-area-context |
69 | | - * |
70 | | - * You can read more about it here: |
71 | | - * https://github.com/react-native-community/discussions-and-proposals/discussions/827 |
72 | | - */ |
73 | | - const safePadding = '5%'; |
| 38 | + const theme = isDarkMode ? themes.dark : themes.light; |
74 | 39 |
|
75 | 40 | return ( |
76 | | - <View style={backgroundStyle}> |
77 | | - <StatusBar |
78 | | - barStyle={isDarkMode ? 'light-content' : 'dark-content'} |
79 | | - backgroundColor={backgroundStyle.backgroundColor} |
80 | | - /> |
81 | | - <ScrollView |
82 | | - style={backgroundStyle}> |
83 | | - <View style={{paddingRight: safePadding}}> |
84 | | - <Header/> |
85 | | - </View> |
86 | | - <View |
87 | | - style={{ |
88 | | - backgroundColor: isDarkMode ? Colors.black : Colors.white, |
89 | | - paddingHorizontal: safePadding, |
90 | | - paddingBottom: safePadding, |
91 | | - }}> |
92 | | - <Section title="Step One"> |
93 | | - Edit <Text style={styles.highlight}>App.tsx</Text> to change this |
94 | | - screen and then come back to see your edits. |
95 | | - </Section> |
96 | | - <Section title="See Your Changes"> |
97 | | - <ReloadInstructions /> |
98 | | - </Section> |
99 | | - <Section title="Debug"> |
100 | | - <DebugInstructions /> |
101 | | - </Section> |
102 | | - <Section title="Learn More"> |
103 | | - Read the docs to discover what to do next: |
104 | | - </Section> |
105 | | - <LearnMoreLinks /> |
106 | | - </View> |
107 | | - </ScrollView> |
108 | | - </View> |
| 41 | + <Provider store={store}> |
| 42 | + <View style={[theme.basic, styles.app]}> |
| 43 | + <StatusBar {...theme.status} /> |
| 44 | + <NavigationContainer> |
| 45 | + <Stack.Navigator initialRouteName="HomeScreen"> |
| 46 | + <Stack.Screen |
| 47 | + name="HomeScreen" |
| 48 | + component={HomeScreen} |
| 49 | + options={{headerShown: false}} |
| 50 | + /> |
| 51 | + <Stack.Screen |
| 52 | + name="PeriodicStats" |
| 53 | + component={PeriodicStats} |
| 54 | + options={{headerShown: false}} |
| 55 | + /> |
| 56 | + <Stack.Screen |
| 57 | + name="Settings" |
| 58 | + component={Settings} |
| 59 | + options={{headerShown: false}} |
| 60 | + /> |
| 61 | + <Stack.Screen |
| 62 | + name="Notifications" |
| 63 | + component={Notifications} |
| 64 | + options={{headerShown: false}} |
| 65 | + /> |
| 66 | + <Stack.Screen |
| 67 | + name="Goals" |
| 68 | + component={Goals} |
| 69 | + options={{headerShown: false}} |
| 70 | + /> |
| 71 | + <Stack.Screen |
| 72 | + name="ImportExport" |
| 73 | + component={ImportExport} |
| 74 | + options={{headerShown: false}} |
| 75 | + /> |
| 76 | + <Stack.Screen |
| 77 | + name="Synchronization" |
| 78 | + component={Synchronization} |
| 79 | + options={{headerShown: false}} |
| 80 | + /> |
| 81 | + <Stack.Screen |
| 82 | + name="Themes" |
| 83 | + component={Themes} |
| 84 | + options={{headerShown: false}} |
| 85 | + /> |
| 86 | + </Stack.Navigator> |
| 87 | + </NavigationContainer> |
| 88 | + </View> |
| 89 | + </Provider> |
109 | 90 | ); |
110 | | -} |
| 91 | +}; |
111 | 92 |
|
112 | 93 | const styles = StyleSheet.create({ |
113 | | - sectionContainer: { |
114 | | - marginTop: 32, |
115 | | - paddingHorizontal: 24, |
116 | | - }, |
117 | | - sectionTitle: { |
118 | | - fontSize: 24, |
119 | | - fontWeight: '600', |
120 | | - }, |
121 | | - sectionDescription: { |
122 | | - marginTop: 8, |
123 | | - fontSize: 18, |
124 | | - fontWeight: '400', |
125 | | - }, |
126 | | - highlight: { |
127 | | - fontWeight: '700', |
| 94 | + app: { |
| 95 | + ...Platform.select({ |
| 96 | + android: { |
| 97 | + paddingTop: Number(Platform.Version) > 34 ? StatusBar.currentHeight : 0, |
| 98 | + flex: 1, |
| 99 | + }, |
| 100 | + }), |
128 | 101 | }, |
129 | 102 | }); |
130 | 103 |
|
|
0 commit comments