DrawerNavigatorItems.js
2.51 KB
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
import * as React from 'react';
import { View, Text, Platform, StyleSheet } from 'react-native';
import SafeAreaView from '../SafeAreaView';
import TouchableItem from '../TouchableItem';
/**
* Component that renders the navigation list in the drawer.
*/
const DrawerNavigatorItems = ({
navigation: { state, navigate },
items,
activeItemKey,
activeTintColor,
activeBackgroundColor,
inactiveTintColor,
inactiveBackgroundColor,
getLabel,
renderIcon,
onItemPress,
itemsContainerStyle,
itemStyle,
labelStyle,
iconContainerStyle,
drawerPosition
}) => <View style={[styles.container, itemsContainerStyle]}>
{items.map((route, index) => {
const focused = activeItemKey === route.key;
const color = focused ? activeTintColor : inactiveTintColor;
const backgroundColor = focused ? activeBackgroundColor : inactiveBackgroundColor;
const scene = { route, index, focused, tintColor: color };
const icon = renderIcon(scene);
const label = getLabel(scene);
return <TouchableItem key={route.key} onPress={() => {
onItemPress({ route, focused });
}} delayPressIn={0}>
<SafeAreaView style={{ backgroundColor }} forceInset={{
[drawerPosition]: 'always',
[drawerPosition === 'left' ? 'right' : 'left']: 'never',
vertical: 'never'
}}>
<View style={[styles.item, itemStyle]}>
{icon ? <View style={[styles.icon, focused ? null : styles.inactiveIcon, iconContainerStyle]}>
{icon}
</View> : null}
{typeof label === 'string' ? <Text style={[styles.label, { color }, labelStyle]}>
{label}
</Text> : label}
</View>
</SafeAreaView>
</TouchableItem>;
})}
</View>;
/* Material design specs - https://material.io/guidelines/patterns/navigation-drawer.html#navigation-drawer-specs */
DrawerNavigatorItems.defaultProps = {
activeTintColor: '#2196f3',
activeBackgroundColor: 'rgba(0, 0, 0, .04)',
inactiveTintColor: 'rgba(0, 0, 0, .87)',
inactiveBackgroundColor: 'transparent'
};
const styles = StyleSheet.create({
container: {
paddingVertical: 4
},
item: {
flexDirection: 'row',
alignItems: 'center'
},
icon: {
marginHorizontal: 16,
width: 24,
alignItems: 'center'
},
inactiveIcon: {
/*
* Icons have 0.54 opacity according to guidelines
* 100/87 * 54 ~= 62
*/
opacity: 0.62
},
label: {
margin: 16,
fontWeight: 'bold'
}
});
export default DrawerNavigatorItems;