-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.js
106 lines (99 loc) · 3.05 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
import React from 'react';
import { View, StatusBar, Platform } from 'react-native';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs'
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack';
import { FontAwesome, Ionicons } from '@expo/vector-icons'
import Constants from 'expo-constants'
import AddEntry from './components/AddEntry';
import reducer from './reducers'
import History from './components/History'
import Live from './components/Live'
import EntryDetail from './components/EntryDetail'
import { purple, white } from './utils/colors'
import { setLocalNotification } from './utils/helpers'
function UdaciStatusBar ({backgroundColor, ...props}) {
return (
<View style={{ backgroundColor, height: Constants.statusBarHeight }}>
<StatusBar translucent backgroundColor={backgroundColor} {...props} />
</View>
)
}
const Tab =
Platform.OS === 'ios'
? createBottomTabNavigator()
: createMaterialTopTabNavigator()
const TabNav = () => (
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ color, size }) => {
let icon
if (route.name === 'Add Entry') {
icon = (
<FontAwesome name="plus-square" size={size} color={color} />
)
} else if (route.name === 'History') {
icon = (
<Ionicons name="ios-bookmarks" size={size} color={color} />
)
} else if (route.name === 'Live') {
icon = (
<Ionicons name='ios-speedometer' size={30} color={color} />
)
}
return icon
},
})}
tabBarOptions={{
activeTintColor: Platform.OS === 'ios' ? purple : white,
style: {
backgroundColor: Platform.OS === 'ios' ? white : purple,
},
indicatorStyle: {
// Android tab indicator (line at the bottom of the tab)
backgroundColor: 'yellow',
},
}}
>
<Tab.Screen name="History" component={History} />
<Tab.Screen name="Add Entry" component={AddEntry} />
<Tab.Screen name="Live" component={Live} />
</Tab.Navigator>
)
const Stack = createStackNavigator();
const MainNav = () => (
<Stack.Navigator headerMode="screen">
<Stack.Screen
name="Home"
component={TabNav}
options={{headerShown: false}}/>
<Stack.Screen
name="EntryDetail"
component={EntryDetail}
options={{
headerTintColor: white,
headerStyle: {
backgroundColor: purple,
}
}
}/>
</Stack.Navigator>
);
export default class App extends React.Component {
componentDidMount() {
setLocalNotification()
}
render() {
return (
<Provider store={createStore(reducer)}>
<NavigationContainer>
<UdaciStatusBar backgroundColor={purple} style="light" />
<MainNav />
</NavigationContainer>
</Provider>
);
}
}