{"action":"closed","issue":{"url":"https://api.github.com/repos/mcnamee/react-native-starter-app/issues/2","repository_url":"https://api.github.com/repos/mcnamee/react-native-starter-app","labels_url":"https://api.github.com/repos/mcnamee/react-native-starter-app/issues/2/labels{/name}","comments_url":"https://api.github.com/repos/mcnamee/react-native-starter-app/issues/2/comments","events_url":"https://api.github.com/repos/mcnamee/react-native-starter-app/issues/2/events","html_url":"https://github.com/mcnamee/react-native-starter-app/issues/2","id":123071982,"number":2,"title":"Referring to only 1 SideMenu Throughout Code","user":{"login":"robtg4","id":13613075,"avatar_url":"https://avatars.githubusercontent.com/u/13613075?v=3","gravatar_id":"","url":"https://api.github.com/users/robtg4","html_url":"https://github.com/robtg4","followers_url":"https://api.github.com/users/robtg4/followers","following_url":"https://api.github.com/users/robtg4/following{/other_user}","gists_url":"https://api.github.com/users/robtg4/gists{/gist_id}","starred_url":"https://api.github.com/users/robtg4/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/robtg4/subscriptions","organizations_url":"https://api.github.com/users/robtg4/orgs","repos_url":"https://api.github.com/users/robtg4/repos","events_url":"https://api.github.com/users/robtg4/events{/privacy}","received_events_url":"https://api.github.com/users/robtg4/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/mcnamee/react-native-starter-app/labels/help%20wanted","name":"help wanted","color":"159818"}],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":6,"created_at":"2015-12-19T08:49:12Z","updated_at":"2016-02-23T11:52:36Z","closed_at":"2016-02-23T11:52:36Z","body":"I seem to be having some difficulty with requiring only one side menu per app instead of having the same side menu implemented on every page that the menu can navigate to - much like keeping one tabbar per app where you can navigate to the different tab pages\r\n\r\nright now, my home.js component - the first page to have the side menu, looks like this (i took the toggle implementation you used to make the menu work with MenuButton): \r\n\r\n```\r\nvar React = require('react-native');\r\nvar {\r\n\tView, \r\n\tImage,\r\n\tStyleSheet,\r\n\tText, \r\n\tListView, \r\n\tTouchableHighlight, \r\n\tAsyncStorage, \r\n} = React;\r\n\r\n//additional libraries\r\nvar Parse = require('parse/react-native');\r\nvar EventEmitter = require('EventEmitter');\r\nvar Spinner = require('react-native-spinkit');\r\nvar SideMenu = require('react-native-side-menu');\r\nvar Subscribable = require('Subscribable');\r\n\r\n//dynamic component references + libraries \r\nvar ArticlePreview = require('./exp_base_components/article-preview');\r\nvar Api = require('../utils/api');\r\nvar FeedStore = require('../stores/feed-store');\r\nvar ArticleDetails = require('./exp_base_components/article-details');\r\nvar Menu = require('./menu');\r\nvar MenuButton = require('../common/menuButton');\r\n\r\n//dimensions\r\nvar Dimensions = require('Dimensions');\r\nvar window = Dimensions.get('window');\r\n\r\nmodule.exports = React.createClass({ \r\n\t//mixins are for menu functionality taken from \r\n\t//here: https://github.com/mcnamee/react-native-starter-app\r\n\tmixins: [Subscribable.Mixin],\r\n\tcomponentWillMount: function() {\r\n\t\tthis.eventEmitter = new EventEmitter();\r\n\t\tParse.User.currentAsync()\r\n\t\t\t.then((user) => { this.setState({user: user}); })\r\n\t},  \r\n\t//on first login (and all new logins)\r\n\t//need to pull onboarding keywords that indicate user interests\r\n\t//so that we can pull the appropiate feeds \r\n\tcomponentDidMount: function() {\r\n\t\t//console.log(this.state.user);\r\n\t\tvar personalFeed = null; \r\n\t\tvar Onboarding = Parse.Object.extend(\"Onboarding\");\r\n\t\tvar query = new Parse.Query(Onboarding);\r\n\t\tquery.equalTo(\"userObjectId\", Parse.User.current());\r\n\t\tvar that = this;\r\n\t\tquery.find({\r\n\t\t  success: function(result) {\r\n\t\t    console.log(\"Successfully retrieved \" + result.length + \" users!\");\r\n\t\t    var object = result[0];\r\n\t\t    console.log(object.id);\r\n\t\t    // Do something with the returned Parse.Object values\r\n\t\t    console.log(object.get('interests'));\r\n\t\t    that.fetchData(object.get('interests'));\r\n\t\t  },\r\n\t\t  error: function(error) {\r\n\t\t    console.log(\"Error: \" + error.code + \" \" + error.message);\r\n\t\t  }\r\n\t\t});\r\n\r\n\t},\r\n\t//states of this components \r\n\tgetInitialState: function() {\r\n\t\treturn {\r\n\t\t\tuser: null, \r\n\t\t\tpersonalFeed: null, \r\n\t\t\ttouchToClose: true,\r\n        \tdisableGestures: false,\r\n\t\t\tisLoaded: false, \r\n\t\t\tdataSource: new ListView.DataSource({\r\n               rowHasChanged: (row1, row2) => row1 !== row2,\r\n            }), \r\n\t\t}\r\n\t},\r\n\t//part of menu button functionality \r\n\tnavigate: function(title, link) {\r\n      this.refs.rootSidebarMenu.closeMenu();\r\n\r\n      this.refs.rootNavigator.replace({\r\n        title: title,\r\n        component: link,\r\n      });\r\n    },\r\n    //gettign data for rss feed based on user interests \r\n\tfetchData: function(personalFeed) {\r\n\t\tvar that = this; \r\n\t    FeedStore.getArticles(personalFeed)\r\n\t\t\t.then((data) => {\r\n\t\t\t\tvar entries = data; \r\n\t\t        that.setState({\r\n\t\t        \tdataSource : that.state.dataSource.cloneWithRows(entries),\r\n\t\t            isLoaded   : true, \r\n\t\t        });\r\n\t\t  \t}).done();\r\n\t}, \r\n\t//rendering component \r\n\trender: function() {\r\n\r\n\t\tif (!this.state.isLoaded) {\r\n            return this.renderLoadingView();\r\n        }\r\n        return <SideMenu \r\n        \t\t\tmenu={<Menu events={this.eventEmitter} navigate={this.navigate} />}\r\n        \t\t\ttouchToClose={this.state.touchToClose}\r\n          \t\t\tdisableGestures={this.state.disableGestures}\r\n        \t\t\ttoleranceX={0}\r\n        \t\t\tedgeHitWidth={window.width/5}\r\n        \t\t\topenMenuOffset={window.width/5}>\r\n        \t\t<View style={styles.container}>\r\n        \t\t\t{this.renderListView()}\r\n        \t\t</View>\r\n        \t\t<MenuButton \r\n\t\t\t\t\tselected={this.state.enoughSelections}\r\n\t\t\t\t\tsource={require('../img/menu-btn.png')}\r\n\t\t\t\t\tresize={'contain'}\r\n\t\t\t\t\tonPress={this.onMenuPress} />\r\n        \t</SideMenu>\r\n\t},\r\n\t//menu press function \r\n\tonMenuPress: function() {\r\n\t\tthis.eventEmitter.emit('toggleMenu');\r\n\t}, \r\n\t//loading render\r\n\trenderLoadingView: function() {\r\n        return (\r\n            <View style={styles.container}>\r\n            \t<Spinner style={styles.spinner} isVisible={!this.state.isLoaded} size={50} type={'Arc'} color={'#FF0000'}/>\r\n            </View>\r\n        );\r\n    }, \r\n    //rendering list view\r\n\trenderListView: function() {\r\n        return (\r\n                <ListView\r\n                    dataSource = {this.state.dataSource}\r\n                    initialListSize = {5}\r\n                    pageSize={5}\r\n                    renderRow  = {this.renderEntry} />\r\n        );\r\n    }, \r\n    //rendering rows within list view\r\n    renderEntry: function(entry) {\r\n\r\n\t\tif (typeof entry.mediaGroups === 'undefined')\r\n\t\t{\r\n\t\t\treturn (\r\n\t\t\t\t<ArticlePreview\r\n\t\t\t\t\tcategory={entry.categories[0]}\r\n\t\t\t\t\tkey={entry.title}\r\n\t\t\t\t\theartText={'2.9k'}\r\n\t\t\t\t\tcategoryPress={this.onCategoryDetailsPress}\r\n\t\t\t\t\tselected={false}\r\n\t\t\t\t\tsource={require('../img/stock_image.png')}\r\n\t\t\t\t\ttext={entry.title.toLowerCase().replace('&nbsp;','')}\r\n\t\t\t\t\tonPress={() => this.onArticleDetailsPress(entry)} />\r\n\t\t\t);\r\n\t\t} else \r\n\t\t{ \r\n\t\t\tvar url = entry.mediaGroups[0].contents[0].url; \r\n\t\t\tif (url.indexOf('w=150') > -1)\r\n\t\t\t{\r\n\t\t\t\turl.replace(\"w=150\", \"w=500\");\r\n\t\t\t}\r\n\t\t\tvar catsource = entry.categories[0]; \r\n\t\t\tif (typeof catsource == \"undefined\")\r\n\t\t\t{\r\n\t\t\t\tcatsource = \"News\";\r\n\t\t\t}\r\n\t\t\treturn (\r\n\t\t\t\t<ArticlePreview\r\n\t\t\t\t\tcategory={catsource}\r\n\t\t\t\t\tkey={entry.title}\r\n\t\t\t\t\theartText={'2.9k'}\r\n\t\t\t\t\tcategoryPress={this.onCategoryDetailsPress}\r\n\t\t\t\t\tselected={false}\r\n\t\t\t\t\tsource={{uri: url }}\r\n\t\t\t\t\ttext={entry.title.toLowerCase().replace('&nbsp;','')}\r\n\t\t\t\t\tonPress={() => this.onArticleDetailsPress(entry)} />\r\n\t\t\t);\r\n\t\t}\r\n\t\t\t\r\n\t},\r\n\t//pressing category button to go to feed of that category \r\n\tonCategoryDetailsPress: function() {\r\n\t\t//forward to sytled web view of categorical article feed\r\n\t\tconsole.log(\"onCategoryDetailsPress\"); \r\n\t}, \r\n\t//press to see article's details \r\n\tonArticleDetailsPress: function(entry) {\r\n\t\t//forward to sytled web view of article details given link\r\n\t\tconsole.log(\"onArticleDetailsPress\"); \r\n\t\tconsole.log(entry);\r\n\r\n\t\t//asynchronously store entry\r\n\r\n\t\t//pushing to new component\r\n\t\tthis.props.navigator.push({\r\n\t\t\tname: 'articledetails',\r\n            passProps: {entry: entry},\r\n\t\t});\r\n\t}, \r\n\t/*\r\n\tonChange: function(event, articles) {\r\n\t\tthis.setState({articles: articles}); //trigers re-render of component\r\n\t}\r\n\t*/\r\n\r\n});\r\n```\r\n The problem is that i can navigate to the other pages because the Menu component referenced in the SideMenu does not have Navigator as a part of it - so pushing to the next page is meaningless to it. Is there a better way to implement this? I can give you access to the repo if needed."}}