-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.js
123 lines (110 loc) · 3.17 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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
import React from 'react';
import {
SafeAreaView,
ScrollView,
StatusBar,
StyleSheet,
Text,
View,
Image,
} from 'react-native';
import FA5Icon from 'react-native-vector-icons/FontAwesome5';
import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons';
import FAIcon from 'react-native-vector-icons/FontAwesome';
import AntIcon from 'react-native-vector-icons/AntDesign';
import MATIcon from 'react-native-vector-icons/MaterialIcons';
import {
RecoilRoot,
atom,
selector,
useRecoilState,
useRecoilValue,
} from 'recoil';
// import { hideBottomTabRecoil } from './application/RecoilStates/recoilStates';
import {createStackNavigator} from '@react-navigation/stack';
import {NavigationContainer} from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import HomeScreenStack from './application/BottomTabScreens/Home/HomeScreenStack';
import CardianScreenStack from './application/BottomTabScreens/Cardian/CardianScreenStack';
import MyPageScreenStack from './application/BottomTabScreens/MyPage/MyPageScreenStack';
import LOGO from './application/assets/images/logo2.png';
const ICON_COLOR = 'salmon';
const THEME_COLOR = '#242424';
const Tab = createBottomTabNavigator();
function Main() {
// const [Tab, setHideBottomTab] = useRecoilState(hideBottomTabRecoil);
return (
<NavigationContainer>
<Tab.Navigator
tabBarOptions={{
activeTintColor: ICON_COLOR,
inactiveTintColor: THEME_COLOR,
labelPosition: 'below-icon',
style: {
height: Platform.OS == 'android' ? 70 : 70,
paddingBottom: Platform.OS == 'android' ? 15 : 20,
paddingTop: Platform.OS == 'android' ? 8 : 6,
},
labelStyle: {
fontSize: Platform.OS == 'android' ? 12 : 10,
},
}}>
<Tab.Screen
name="CARDIAN"
component={HomeScreenStack}
options={{
tabBarLabel: 'CARDIAN',
tabBarIcon: ({color, size}) => (
<Image source={LOGO} style={{width: 30, height: 25}}></Image>
),
}}
/>
<Tab.Screen
name="MyHero"
component={CardianScreenStack}
options={{
tabBarLabel: 'My Heroes',
tabBarIcon: ({color, size}) => (
<MATIcon name="supervisor-account" color={color} size={28} />
),
}}
/>
<Tab.Screen
name="MyPage"
component={MyPageScreenStack}
options={{
tabBarLabel: 'My Page',
tabBarIcon: ({color, size}) => (
<AntIcon name="profile" color={color} size={26} />
),
}}
/>
</Tab.Navigator>
</NavigationContainer>
);
}
export default function App() {
return (
<RecoilRoot>
<Main />
</RecoilRoot>
);
}
const styles = StyleSheet.create({
sectionContainer: {
marginTop: 32,
paddingHorizontal: 24,
},
sectionTitle: {
fontSize: 24,
fontWeight: '600',
},
sectionDescription: {
marginTop: 8,
fontSize: 18,
fontWeight: '400',
},
highlight: {
fontWeight: '700',
},
});