0

I'm new in react-native, i'm trying to build an app with a router and a side-menu with some links to others pages inside this menu.

Well, i'm actually using gb-native-router and react-native-side-menu to do this. Actually i've found 2 solutions.

First solution : 

<SideMenu menu={menu}>  //here, the sidemenu is outside the router, i can't put in inner (the chat will slide but not the Navigator)
    <Router
      firstRoute={Routes.Main.App}
      headerStyle={Styles.NavBar.container}
      titleStyle={Styles.NavBar.navContent}
      borderBottomWidth={Styles.Props.NavBar.borderBottomWidth}
      borderColor={Styles.Props.NavBar.borderColor}
    />
</SideMenu>

Second solution :

Include the side-menu in the test.js file (see link) to do something like this : 

<SideMenu menu={menu}>  
    <View><Chat /></View>
</SideMenu>

Problem : The first solution is working well, but when i'm trying to do "this.props.toRoute({})", this function is not defined (because the side-menu isn't in the router i guess) And the second solution, the router (Navigator) will not move with the rest of the page when i'm accessing to the side-menu (because he is not in the side-menu :p).

Any Help for this probem ? I think i can use NSNotificationCenter to send a signal to all app, and add a listener inside the router to try to route properly ... But I would like to find a more simple and better way.

You can see more code here : https://rnplay.org/apps/Xr8PPA

Thanks for your help !

EDIT :

Here, a short code of index.js from react-native-side-menu : 

  render() {
    let menu = null;

    /**
     * If menu is ready to be rendered
     */
    if (this.state.shouldRenderMenu) {
      menu = <View style={styles.menu}>{this.props.menu}</View>;
    }

    return (
      <View style={styles.container} onLayout={this.onLayoutChange.bind(this)}>
        {menu}
        {this.getContentView()}
      </View>
    );
  }

It seems that my menu from menu.js is only render in a view. So i don't know how to access router from here ... :(

neodern
  • 28
  • 5

1 Answers1

0

Try using this.refs in conjunction with calling the toRoute function not from the child but from the parent.

The code on rnplay is broken due to dependencies, but I updated the code:

Updated: https://rnplay.org/apps/kcD0kg

Adam Terlson
  • 12,610
  • 4
  • 42
  • 63
  • Thanks for your quick answer ! I've try your solution, but is not working. :( It seems that the function onNextPageClick is usable on SideMenu module, but not in the final menu (was looking inside this module, my menu is only rendered in a view inside this module.) So, from my menu, it's always impossible to use this and add a route on an item. :( Any help ? (I've edit my question with a part of code of index.js from react-native-side-menu – neodern Dec 08 '15 at 21:34
  • you can see here the content of the object SideMenu (the module) https://cloudup.com/cMJA9BfqeJ0 And the content of the React.class of my menu https://cloudup.com/cRoj9VY0wRa – neodern Dec 08 '15 at 22:32
  • I've updated my code with your answer (not working) https://rnplay.org/apps/Xr8PPA Sorry for spamming :s – neodern Dec 08 '15 at 23:05
  • @neodern I'm sorry, that was my fault, I put the callback prop on the wrong element (SideMenu instead of Menu)! I updated the rnplay code in a fork (https://rnplay.org/apps/kcD0kg). I think it's important to understand that your child component not having access to something available at the parent level is absolutely not a problem. Perhaps [this SO disucssion](http://stackoverflow.com/questions/21285923/reactjs-two-components-communicating) would help clarify why. [Here's a React tutorial](https://facebook.github.io/react/docs/tutorial.html) which includes parent/child communication. – Adam Terlson Dec 09 '15 at 10:42
  • Thanks for the docs ! :) But i'm really sorry ... `Cannot read property 'onNextPageClick' of undefined` ... Seriously i don't understand this. Maybe the module react-native-side-menu doesn't allow this and it's just not possible to do this ? I don't understand ... :S – neodern Dec 09 '15 at 21:22
  • Hey ! My menu was declared like this `var Menu = Class Menu extends Component`, dunno why (thought it was the same thing) but i changed to var Menu = React.createClass and now it's "working" ... But `this.refs.router.firstRoute is not a function` ... seems that u can't route from this place ... U need to be inside the `` like i said to be able to use `toRoute` method ... ... Seems you can't use a router and a side menu module ? >.< Maybe something to do with `customAction` from [gb-native-router doc](https://github.com/MikaelCarpenter/gb-native-router) ? – neodern Dec 09 '15 at 21:50
  • As I said, there's no such thing as needing to be "inside" another component. The same can be achieved by passing callback handlers around and/or using ref. Your `var Menu` line is wrong, I suggest reading more about how ES6 classes work (hint: drop the `var Menu = `part). Best of luck! – Adam Terlson Dec 10 '15 at 08:28
  • Ok, i got it. It works with `this.refs.router.refs.navigator.push({` Thanks for help, and documentations ! ;) – neodern Dec 11 '15 at 08:40