-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.tsx
111 lines (101 loc) · 3.05 KB
/
App.tsx
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
import React from 'react';
import {ThemeProvider} from 'react-native-elements';
import SvgUri from 'react-native-svg-uri';
import {Provider} from 'react-redux';
import {ToastProvider} from 'react-native-toast-notifications';
// @store
import {store} from './src/store';
// @navigation vendors
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
// @screens
import FavoritesScreen from './src/screens/FavoritesScreen/FavoritesScreen';
import HomeScreen from './src/screens/HomeScreen/HomeScreen';
import DetailScreen from './src/screens/DetailScreen/DetailScreen';
// @theme
import {theme} from './src/mainTheme';
import {FontNames, FontSizes, Pallet} from './src/theme';
// @assets
const homeIcon = require('./src/assets/svg/home');
const favoritesIcon = require('./src/assets/svg/favorite');
const App = () => {
const StackScreen = createStackNavigator();
const Tab = createBottomTabNavigator();
const MyTabs = () => (
<Tab.Navigator
initialRouteName="Artwork"
screenOptions={({route}) => ({
tabBarActiveTintColor: Pallet.blackGray,
tabBarInactiveTintColor: Pallet.primaryColor,
activeBackgroundColor: Pallet.grayVariant,
inactiveBackgroundColor: Pallet.grayVariant,
labelStyle: {
fontFamily: FontNames.TextSemiBold,
fontSize: FontSizes.Small,
},
tabBarStyle: {
height: 90,
paddingHorizontal: 5,
paddingTop: 0,
backgroundColor: Pallet.grayVariant,
position: 'absolute',
borderTopWidth: 0,
},
tabBarIcon: ({focused}) => {
let icon = 'home';
if (route.name === 'Artwork') {
icon = homeIcon;
}
if (route.name === 'Favorites') {
icon = favoritesIcon;
}
return (
<SvgUri
fill={focused ? Pallet.blackGray : Pallet.primaryColor}
height={18}
width={18}
svgXmlData={icon}
/>
);
},
})}>
<Tab.Screen
options={{headerShown: false}}
name="Artwork"
component={HomeScreen}
/>
<Tab.Screen
options={{headerShown: false}}
name="Favorites"
component={FavoritesScreen}
/>
</Tab.Navigator>
);
const HomeStackScreen = () => (
<StackScreen.Navigator initialRouteName="Home">
<StackScreen.Screen
name="Home"
component={MyTabs}
options={{headerShown: false}}
/>
<StackScreen.Screen
name="Detail"
component={DetailScreen}
options={{headerShown: false}}
/>
</StackScreen.Navigator>
);
return (
<ThemeProvider theme={theme}>
<ToastProvider>
<Provider store={store}>
<NavigationContainer>
<HomeStackScreen />
</NavigationContainer>
</Provider>
</ToastProvider>
</ThemeProvider>
);
};
export default App;