react-native-menu/App.js at master · BritK333/react-native-menu · GitHub

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
import React from "react"
import {createAppContainer} from "react-navigation"
import {createDrawerNavigator} from "react-navigation-drawer"
import {Dimensions} from "react-native"
import {Feather} from "@expo/vector-icons"

import {
  ProfileScreen,
  MessageScreen,
  ActivityScreen,
  ListScreen,
  ReportScreen,
  StatisticScreen,
  SignOutScreen
} from "./screens"

import SideBar from "./components/SideBar"

const DrawerNavigator = createDrawerNavigator({
   ProfileScreen: {
    screen: ProfileScreen,
    navigationOptions: {
      title: "Profile",
      drawerIcon: ({tintColor}) =>
      <Feather name="user" size={16} color={tintColor} />
    }
  },


  MessageScreen: {
    screen: MessageScreen,
    navigationOptions: {
      title: "Message",
      drawerIcon: ({tintColor}) =>
      <Feather name="message-square" size={16} color={tintColor} />
    }
  },

  ActivityScreen: {
    screen: ActivityScreen,
    navigationOptions: {
      title: "Activities",
      drawerIcon: ({tintColor}) =>
      <Feather name="activity" size={16} color={tintColor} />
    }
  },

  ListScreen: {
    screen: ListScreen,
    navigationOptions: {
      title: "Lists",
      drawerIcon: ({tintColor}) =>
      <Feather name="list" size={16} color={tintColor} />
    }
  },

  ReportScreen: {
    screen: ReportScreen,
    navigationOptions: {
      title: "Reports",
      drawerIcon: ({tintColor}) =>
      <Feather name="bar-chart" size={16} color={tintColor} />
    }
  },

  StatisticScreen: {
    screen: StatisticScreen,
    navigationOptions: {
      title: "Statistics",
      drawerIcon: ({tintColor}) =>
      <Feather name="trending-up" size={16} color={tintColor} />
    }
  },

  SignOutScreen: {
    screen: SignOutScreen,
    navigationOptions: {
      title: "SignOut",
      drawerIcon: ({tintColor}) =>
      <Feather name="log-out" size={16} color={tintColor} />
    }
  },

},{
  contentComponent: props => <SideBar {...props} />,

  drawerWidth: Dimensions.get("window").width * 0.85,
  hideStatusBar: true,

  contentOptions: {
    activeBackgroundColor: "rgba(212,118,207,0.2)",
    activeTintColor: "#53115B",
    itemsContainerStyle: {
      marginTop: 16,
      marginHorizontal: 8
    },
    itemStyle: {
      borderRadius: 4
    }

  }
})

export default createAppContainer(DrawerNavigator)