-
Notifications
You must be signed in to change notification settings - Fork 1
/
App.js
77 lines (71 loc) · 2.66 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
import React from 'react';
import { StyleSheet } from 'react-native';
import TodoList from './src/screens/TodoList';
import Calendar from './src/screens/Calendar';
import DailyProgress from './src/screens/DailyProgress';
import HomeScreen from './src/screens/HomeScreen';
import {createBottomTabNavigator, createStackNavigator} from 'react-navigation';
import {Icon} from "native-base";
// Navigation configuration. Our implementation uses React Navigation with a TabNavigator, where
// we have nested a StackNavigator inside some of the screens, in order to get access to both a header and
// Tab-bar on the bottom
export default createBottomTabNavigator(
{
Home: HomeScreen,
"Calendar": createStackNavigator({Calendar: {screen: Calendar}}),
"Tasks": createStackNavigator({TodoList: {screen: TodoList}}),
"Daily Progress": createStackNavigator({DailyProgress: {screen: DailyProgress}})
},
{
// Set icon color and version depending on whether the tab is currently focused or not
navigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, tintColor }) => {
const { routeName } = navigation.state;
let iconName;
let type;
if (routeName === 'Home') {
iconName = `ios-information-circle${focused ? '' : '-outline'}`;
type="Ionicons";
} else if (routeName === 'Calendar') {
iconName = `ios-calendar${focused ? '' : ''}`;
type="Ionicons";
} else if (routeName === 'Tasks') {
iconName = `ios-list${focused ? '' : ''}`;
type="Ionicons";
} else if (routeName === 'Daily Progress') {
iconName = `ios-body${focused ? '' : ''}`;
type = "Ionicons";
}
return <Icon type={type} name={iconName} color={tintColor} style={{marginTop: 3, marginBottom: 1, fontSize: 28, color: `${focused ? '#007aff' : 'gray' }`}} />;
},
}),
tabBarOptions: {
// Blue for focused tab, gray otherwise
activeTintColor: '#007aff',
inactiveTintColor: 'gray',
},
},
{
portraitOnlyMode: true
}
);
// StyleSheet
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'stretch',
justifyContent: 'center',
},
image: {
flexGrow:1,
height:'100%',
width:null,
alignItems: 'center',
justifyContent:'center',
},
paragraph: {
textAlign: 'center',
color: 'white',
fontSize: 30,
},
});