Help: showing new route from a deeply nested component

[folivi]

Hey guys,
Can someone help achieve this?
I have the implementation below.

It's pretty simple:

-in my index.ios.js file:

<TabBarIOS>
<Icon.TabBarItem><Component1></Icon.TabBarItem>
<Icon.TabBarItem>
<Router firstRoute= Component2 />
</TabBarIOS>

Here goes the component 2

 <ScrollableTabView>
      <Component3 />
  </ScrollableTabView>

Component3 displays a collection of items
Let's say < ListItem />

In the ListItem component I render a view inside a TouchableHighlight.

The goal is to pop a < ItemDetailsView > to the router when user taps on one item inside the list
I assume I have to pass the router down from the parent to the nested children but I can't figure out how.

Thanks for your help

[charpeni]

You can pass specific props to the children components like this :

<Component3
  toRoute={this.props.toRoute}
/>

Or pass all the props to the component :

<Component3
  {...this.props}
/>

[folivi]

Thanks but I still don't get why it doesn't work.

I created this gist: https://gist.github.com/folivi/1c3cf4a8754335860ccede337d9eedfa
I followed the tweeter example but looks like the function this.showEvent is not passed from the Events components to the eventListItem. Strange thing is when I pass a string, the child component recieves it.
Hope you can help me
thanks