-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.js
76 lines (73 loc) · 2.49 KB
/
App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
// Import necessary libraries and modules.
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { TouchableOpacity } from 'react-native';
import React from 'react';
import {
NavigationContainer,
StackActions,
DefaultTheme
} from '@react-navigation/native';
// Import screen components and global variables.
import MainScreen from './src/screens/MainScreen';
import NoteScreen from './src/screens/NoteScreen';
import './src/utils/constants/Globals';
// Define the navigation's theme color.
const NavigationTheme = {
...DefaultTheme,
colors: {
...DefaultTheme.colors,
background: global.backgroundColor
},
};
const Stack = createNativeStackNavigator();
export default function App() {
// Render navigation container and stack navigator.
return (
<NavigationContainer theme={NavigationTheme}>
<Stack.Navigator
screenOptions={({ navigation, route }) => ({
headerTitle: global.appName,
headerTintColor:
route.name == 'MainScreen'
? global.tintColor
: global.deepShadeColor,
headerTitleStyle: {
fontSize: global.windowWidth / 20,
},
headerStyle: {
backgroundColor: global.backgroundColor,
},
headerLeft: () => route.name != 'MainScreen' && (
<TouchableOpacity
style={{ marginRight: global.windowWidth / 20 }}
onPress={() => {
navigation.popToTop();
navigation.dispatch(StackActions.replace("MainScreen"));
}}>
<Icon
name='chevron-left'
color={global.shadeColor}
size={global.windowWidth / 16}
/>
</TouchableOpacity>
),
headerRight: () => (
<TouchableOpacity
onPress={() =>
navigation.dispatch(StackActions.replace(route.name))
}>
<Icon
color={global.deepShadeColor}
name={route.name != 'MainScreen' ? 'backspace' : 'cached'}
size={route.name != 'MainScreen' ? global.windowWidth / 20 : global.windowWidth / 18}
/>
</TouchableOpacity>
)
})}>
<Stack.Screen name='MainScreen' component={MainScreen} />
<Stack.Screen name='NoteScreen' component={NoteScreen} />
</Stack.Navigator>
</NavigationContainer >
);
}