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
|
import React from 'react';
import {
TouchableHighlight,
View,
ScrollView,
Image,
Platform,
StyleSheet,
} from 'react-native';
import {
RkStyleSheet,
RkText,
RkTheme,
} from 'react-native-ui-kitten';
import { MainRoutes } from '../../config/navigation/routes';
import { FontAwesome, FontIcons } from '../../assets/icons';
import NavigationType from '../../config/navigation/propTypes';
import * as Screens from '../index';
export const NavbarRoutes = [
{
id: 'Articles2',
title: 'Problems',
icon: FontIcons.article,
screen: Screens.Articles2,
}, {
id: 'Login1',
title: 'Login',
icon: FontIcons.login,
screen: Screens.LoginV1,
}, {
id: 'AddProblem',
title: 'Add Problem',
icon: FontIcons.article,
screen: Screens.AddToCardForm,
}];
export class SideMenu extends React.Component {
static propTypes = {
navigation: NavigationType.isRequired,
};
onMenuItemPressed = (item) => {
this.props.navigation.navigate(item.id);
};
getThemeImageSource = (theme) => (
theme.name === 'light' ?
require('../../assets/images/smallLogo.png') : require('../../assets/images/smallLogoDark.png')
);
renderIcon = () => (
<Image style={styles.icon} source={this.getThemeImageSource(RkTheme.current)}/>
);
renderMenu = () => NavbarRoutes.map(this.renderMenuItem);
renderMenuItem = (item) => (
<TouchableHighlight
style={styles.container}
key={item.id}
underlayColor={RkTheme.current.colors.button.underlay}
activeOpacity={1}
onPress={() => this.onMenuItemPressed(item)}>
<View style={styles.content}>
<View style={styles.content}>
<RkText
style={styles.icon}
rkType='moon primary xlarge'>{item.icon}
</RkText>
<RkText>{item.title}</RkText>
</View>
<RkText rkType='awesome secondaryColor small'>{FontAwesome.chevronRight}</RkText>
</View>
</TouchableHighlight>
);
render = () => (
<View style={styles.root}>
<ScrollView
showsVerticalScrollIndicator={false}>
<View style={[styles.container, styles.content]}>
<RkText rkType='logo'>EcoAlerts</RkText>
</View>
{this.renderMenu()}
</ScrollView>
</View>
);
}
const styles = RkStyleSheet.create(theme => ({
container: {
height: 80,
paddingHorizontal: 16,
borderTopWidth: StyleSheet.hairlineWidth,
borderColor: theme.colors.border.base,
},
root: {
paddingTop: Platform.OS === 'ios' ? 20 : 0,
backgroundColor: theme.colors.screen.base,
},
content: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
},
icon: {
marginRight: 13,
},
}));
|
